<textarea id="runcode5593"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>js single case mode </title> <style type=" Text/css "> div{height:100px; Background: #CCC; border: #000 1px solid;} </style> <script type= "Text/javascript" > My = new function Yangbin () {this.name = "I'm a single case funnyzak! "; }; function Yangbin1 () {this.name = "I am funnyzak! "; function MyName () {var u = new Yangbin1 (); alert (u.name); } </script> </pead> <div onclick= "alert (my.name);" > You are? (single case) </div> <div onclick= "myname ();" > You are? (normal) </div> <body> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Loop.js is a single example of the JS class mode:
It was created in the first way with the new nameless class. This enables the function of a single example.
var loop = new (function () {
External public functions
Operation with infinite loops
This.setloop = function (fn) {INFINITE_LOOP.SETLOOPFN (FN);}//Parameter 1 parameter type function
This.deleteloop = function (fn) {INFINITE_LOOP.DELETELOOPFN (FN);}//Parameter 1 parameter type function
This.stoploop = function () {Infinite_loop.stoploop ();}
Operation of a single cycle
This.setloopone = function (fn) {one_loop.setlooponefn (FN);}//Parameter 1 parameter type function
This.stoploopone = function () {One_loop.stoploopone ();}
The following are two private, single-mode members
List object with infinite loop execution
var infinite_loop = new (function () {
This.loop_stop = true;
This.loop_action = new Array ();
This.loop_actionid = 0;
var opp = this;
THIS.SETLOOPFN = function (fn) {
if (typeof (FN)!= "function") {
throw new Error ("Window.loop.setloop ' s argment is not a function!"); Return
}
for (Var i=0;i<this.loop_action.length;i++) {
if (this.loop_action[i] = = fn) {
throw new Error (fn+ "has been registered!");
Return
}
}
This.loop_action.push (FN);
This.startloop ();
};
THIS.DELETELOOPFN = function (fn) {
for (Var i=0;i<this.loop_action.length;i++) {
if (this.loop_action[i] = = fn) {
This.loop_action.splice (i,1);
}
}
};
This. Loop = function () {
var run = function () {
if (Opp.loop_action.length > 0) {
(Opp.loop_action[opp.loop_actionid]) ();
opp.loop_actionid++;
if (opp.loop_actionid>=opp.loop_action.length) opp.loop_actionid=0;
SetTimeout (opp. LOOP,20);
Return
}
Opp.loop_stop = true;
};
Run ();
}
This.stoploop = function () {
This.loop_stop = true;
}
This.startloop = function () {
if (! this.loop_stop) return;
This.loop_stop = false;
This. Loop ();
}
})();
/* Single execution of the list object * *
var one_loop = new (function () {
This.loopone_stop = true;
This.loopone_action = new Array ();
var opp = this;
This.setlooponefn = function (fn) {
if (typeof (FN)!= "function") {
throw new Error ("Window.loop.setloopOne ' s argment is not a function!"); Return
}
This.loopOne_action.push (FN);
This.startloopone ();
}
This. Loopone = function () {
function Run () {
if (opp.loopone_action.length>0 &&!opp.loopone_stop) {
(Opp.loopOne_action.shift ()) ();
SetTimeout (opp. LOOPONE,20);
Return
}
Opp.loopone_stop = true;
}
Run ();
}
This.stoploopone = function () {
This.loopone_stop = true;
}
This.startloopone = function () {
if (! this.loopone_stop) return;
This.loopone_stop = false;
This. Loopone ();
}
})();
})();
Here is an example: loop.html
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>loop.js</title>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Loop.js" ></script>
<script type= "Text/javascript" >
function MoveLayer1 () {
This.moveleft = true;
This.movedown = true;
this.x1 = 100
this.y1 = 100;
THIS.X2 = 800;
This.y2 = 400;
}
MoveLayer1.prototype.move = function () {
var divLayer1 = document.getElementById ("Layer1");
var L = parseint (DivLayer1.style.left),
t = parseint (divLayer1.style.top);
var r = parseint (Math.random () *20);
if (L < this.x2 && This.moveleft) {
L+=1+r;
if (l>this.x2-1) This.moveleft = false;
}else if (L > this.x1 &&! this.moveleft) {
L-=1+r;
if (L < this.x1+1) This.moveleft = true;
}
if (T < this.y2 && This.movedown) {
T+=1+r;
if (t>this.y2-1) This.movedown = false;
}else if (T > this.y1 &&! this.movedown) {
T-=1+r;
if (T < this.y1+1) This.movedown = true;
}
DivLayer1.style.left =l+ "px";
DivLayer1.style.top = t+ "px";
}
function Circle () {
THIS.R = 50;
This.rx = 500;
This.ry = 500;
this.x;
This.y;
This.angle = 0;
This.speedangle = 10;
}
Circle.prototype.init = function () {
This.setxy ();
$ ("Body"). Append (' <div id= "CD" class= "Layer2" style= "Left: ' +this.x+ ' px;top: ' +this.y+ ' px;" ></div> ');
$ ("Body"). Append (' <div class= "Layer1" style= "Left: ' +this.rx+ ' px;top: ' +this.ry+ ' px;" ></div> ');
}
Circle.prototype.setXY = function () {
This.x = This.rx + This.r*math.cos (this.angle/(180/MATH.PI));
This.y = This.ry + this.r*math.sin (this.angle/(180/MATH.PI));
}
Circle.prototype.draw = function () {
This.angle +=this.speedangle;
This.setxy ();
var f = document.getElementById ("CD");
$ ("Body"). Append ($ ("#cd"). Clone ());
F.style.left =this.x+ "px";
F.style.top = this.y+ "px";
}
Function timetable () {
var f = document.getElementById ("Daa");
var d = new Date ();
f.innerhtml = "Now Time:" +d.getutcfullyear () + "Year" +d.getutcmonth () + "month" +d.getutcdate () + "Day Week" +d.getutcday () + "" + D.getutchours () + ":" +d.getutcminutes () + ":" +d.getutcseconds ();
}
var lenstr =-1;
function Prints () {
var str = document.getElementById ("Sourse"). InnerHTML;
if (lenstr<str.length) {
lenstr++;
var f = document.getElementById ("Prin");
if (lenstr%100==0) f.innerhtml + = "<br/>";
F.innerhtml + + Str.charat (LENSTR);
}else{
Loop.deleteloop (prints);
}
}
var movediv = new MoveLayer1 ();
function Imgmove () {movediv.move ();}
var mycircle = new Circle ();
function Drawcircle () {Mycircle.draw ();}
function WinInit () {
Mycircle.init ();
Loop.setloop (drawcircle);
Loop.setloop (Imgmove);
Loop.setloop (timetable);
Loop.setloop (prints);
}
</script>
<style type= "Text/css" >
<!--
. Layer1 {
Position:absolute;
Overflow:hidden;
Color: #fff;
width:50px;
height:50px;
z-index:50;
}
. Layer2 {
Position:absolute;
Overflow:hidden;
Color: #fff;
width:40px;
height:40px;
Z-index:1;
}
-->
</style>
<body onload= "WinInit ();" >
<div id= "DAA" ></div>
<div id= "Layer1" class= "Layer1" style= "left:190px"; top:101px; " >
<pre id= "Prin" ></pre>
<div id= "Sourse" style= "Display:none" >
var x = 1;
var y = 2;
var z = 3;
var sum;
function Plus (A, B)
{
var z = 0;
var i = 0;
for (i = 0; i < arguments.length; i++)
{
z = = Arguments[i];
}
settimeout (function () {alert (z);}, 6000); settimeout invocation form with variable arguments
return z;
}
settimeout (function () {sum = Plus (x, y, z);}, 3000);
/* In addition to the variable parameters can also get the return value of the settimeout call form * *
</div>
</body>
Jquery.js
JQuery is the 1.2.6 version of the Compact JS framework, can be downloaded to http://jquery.com/
testfile/glass_32x32.gif
In fact, we can think about it further,
For example, simulate a simple factory class thing.
var money = factory.creater ("USD" );
