javascript 單例模式演示代碼 javascript面向?qū)ο缶幊?/h1>
更新時(shí)間：2010年04月09日 10:40:54 作者：
單例模式的好處就是:類(lèi)只實(shí)例化一次,省資源,節(jié)省開(kāi)銷(xiāo),提高速度，學(xué)習(xí)js面向?qū)ο缶幊痰呐笥芽梢詤⒖枷隆?/div>
js的單例寫(xiě)法
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
loop.js是一個(gè)單例模式的js類(lèi)：
//一開(kāi)始就用new 無(wú)名類(lèi)的方式創(chuàng)建。這樣就實(shí)現(xiàn)了單例的功能。
var loop = new (function(){
// 外部公共函數(shù)
// 無(wú)限循環(huán)的操作
this.setloop = function(fn){Infinite_loop.setLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.deleteloop = function(fn){Infinite_loop.deleteLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploop = function(){Infinite_loop.stopLoop();}
// 單次循環(huán)的操作
this.setloopOne = function(fn){one_loop.setLoopOneFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploopOne = function(){one_loop.stopLoopOne();}
// 下面是兩個(gè)私有的單例模式成員
// 無(wú)限循環(huán)執(zhí)行的List對(duì)象
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();
}
})();
/* 單次執(zhí)行的list對(duì)象 */
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();
}
})();
})();
下面是實(shí)例:loop.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;"><img src="testFile/glass_32x32.gif" /></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 = "現(xiàn)在時(shí)間："+d.getUTCFullYear()+"年"+d.getUTCMonth()+"月"+d.getUTCDate()+"日 星期"+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>
</head>
<body onload="winInit();">
<div id="daa"></div>
<div id="Layer1" class="Layer1" style="left:190px; top:101px;">
<img src="testFile/glass_32x32.gif" name="mimg" width="40" height="40" id="mimg" /></div>
<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); //可以帶變量參數(shù)的setTimeout調(diào)用形式
return z;
}
setTimeout( function(){ sum = Plus(x, y, z); }, 3000);
/*除了可以帶變量參數(shù)還可以獲取返回值的setTimeout調(diào)用形式*/
</div>
</body>
</html>
jquery.js
jQuery 是1.2.6版的，小巧的js框架，可以到http://jquery.com/下載
testFile/glass_32x32.gif
其實(shí)大家可以再深入思考一下，
例如模擬一個(gè)簡(jiǎn)單工廠類(lèi)的東西。
var money = factory.creater ("美元");
您可能感興趣的文章:- js單例模式的兩種方案
- JS實(shí)現(xiàn)單例模式的6種方案匯總
- JavaScript的單例模式 （singleton in Javascript)
- 輕松掌握J(rèn)avaScript單例模式
- [js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
- JavaScript設(shè)計(jì)模式之策略模式詳解
- javascript設(shè)計(jì)模式--策略模式之輸入驗(yàn)證
- JavaScript設(shè)計(jì)模式之策略模式實(shí)例
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之策略模式
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
- javascript單例模式與策略模式實(shí)例詳解
相關(guān)文章
-
js 面向?qū)ο蟮募夹g(shù)創(chuàng)建高級(jí) Web 應(yīng)用程序
在 C++ 或 C# 中，在談?wù)搶?duì)象時(shí)，是指類(lèi)或結(jié)構(gòu)的實(shí)例。對(duì)象有不同的屬性和方法，具體取決于將它們實(shí)例化的模板（即類(lèi)）。 2010-02-02
-
項(xiàng)目中需要比較兩個(gè)對(duì)象是否相等，給Object對(duì)象開(kāi)展了（別緊張，別說(shuō)我把它污染了），一個(gè)實(shí)現(xiàn)而已，象java一樣可以只給自己想要的類(lèi)重寫(xiě)equals方法。 2011-02-02
-
作用主要為了防止類(lèi)名沖突，相同的類(lèi)名只要屬于不同的命名空間，便不會(huì)沖突。
2010-05-05
-
這篇起，會(huì)由淺到深的分析js OO之寫(xiě)類(lèi)方式，大概會(huì)有5-8篇。后面陸續(xù)會(huì)分析流行庫(kù)（框架）的寫(xiě)類(lèi)方式。為了討論的單一性，暫不考慮類(lèi)的繼承，(私有,受保護(hù))屬性或方法。
2009-07-07
-
詳解new function(){}和function(){}() 區(qū)別分析
只要 new 表達(dá)式之后的 constructor 返回（return）一個(gè)引用對(duì)象（數(shù)組，對(duì)象，函數(shù)等），都將覆蓋new創(chuàng)建的匿名對(duì)象，如果返回（return）一個(gè)原始類(lèi)型（無(wú) return 時(shí)其實(shí)為 return 原始類(lèi)型 undefined），那么就返回 new 創(chuàng)建的匿名對(duì)象。 2008-03-03
-
js類(lèi)后臺(tái)管理菜單類(lèi)-MenuSwitch
js類(lèi)后臺(tái)管理菜單類(lèi)-MenuSwitch... 2007-09-09
-
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼 ，需要的朋友可以參考下。 2010-01-01
-
如果寫(xiě)一堆function難免會(huì)出現(xiàn)變量或函數(shù)的命名沖突，應(yīng)用了命名空間這種情況就從此杜絕了，而且代碼易于管理。 2010-05-05
-
JavaScript RegExp方法獲取地址欄參數(shù)(面向?qū)ο?
個(gè)人認(rèn)為循環(huán)用得多不是什么好事。這里推薦一種利用OO思想加上RegExp的方法，使它更靈活、高效。 2009-03-03
-
JavaScript 面向?qū)ο缶幊蹋?） 定義類(lèi)
最近這一段時(shí)間事情太多了，沒(méi)有時(shí)間再繼續(xù)寫(xiě)，幸好這兩天有點(diǎn)小閑，先小寫(xiě)一下JavaScript中面向?qū)ο笠恢型扑]的方法。 2010-05-05
最新評(píng)論
js的單例寫(xiě)法
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
loop.js是一個(gè)單例模式的js類(lèi)：
//一開(kāi)始就用new 無(wú)名類(lèi)的方式創(chuàng)建。這樣就實(shí)現(xiàn)了單例的功能。
var loop = new (function(){
// 外部公共函數(shù)
// 無(wú)限循環(huán)的操作
this.setloop = function(fn){Infinite_loop.setLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.deleteloop = function(fn){Infinite_loop.deleteLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploop = function(){Infinite_loop.stopLoop();}
// 單次循環(huán)的操作
this.setloopOne = function(fn){one_loop.setLoopOneFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploopOne = function(){one_loop.stopLoopOne();}
// 下面是兩個(gè)私有的單例模式成員
// 無(wú)限循環(huán)執(zhí)行的List對(duì)象
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();
}
})();
/* 單次執(zhí)行的list對(duì)象 */
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();
}
})();
})();
下面是實(shí)例:loop.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;"><img src="testFile/glass_32x32.gif" /></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 = "現(xiàn)在時(shí)間："+d.getUTCFullYear()+"年"+d.getUTCMonth()+"月"+d.getUTCDate()+"日 星期"+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>
</head>
<body onload="winInit();">
<div id="daa"></div>
<div id="Layer1" class="Layer1" style="left:190px; top:101px;">
<img src="testFile/glass_32x32.gif" name="mimg" width="40" height="40" id="mimg" /></div>
<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); //可以帶變量參數(shù)的setTimeout調(diào)用形式
return z;
}
setTimeout( function(){ sum = Plus(x, y, z); }, 3000);
/*除了可以帶變量參數(shù)還可以獲取返回值的setTimeout調(diào)用形式*/
</div>
</body>
</html>
jquery.js
jQuery 是1.2.6版的，小巧的js框架，可以到http://jquery.com/下載
testFile/glass_32x32.gif
其實(shí)大家可以再深入思考一下，
例如模擬一個(gè)簡(jiǎn)單工廠類(lèi)的東西。
var money = factory.creater ("美元");
//一開(kāi)始就用new 無(wú)名類(lèi)的方式創(chuàng)建。這樣就實(shí)現(xiàn)了單例的功能。
var loop = new (function(){
// 外部公共函數(shù)
// 無(wú)限循環(huán)的操作
this.setloop = function(fn){Infinite_loop.setLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.deleteloop = function(fn){Infinite_loop.deleteLoopFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploop = function(){Infinite_loop.stopLoop();}
// 單次循環(huán)的操作
this.setloopOne = function(fn){one_loop.setLoopOneFn(fn);} // 參數(shù) 1 參數(shù)類(lèi)型 function
this.stoploopOne = function(){one_loop.stopLoopOne();}
// 下面是兩個(gè)私有的單例模式成員
// 無(wú)限循環(huán)執(zhí)行的List對(duì)象
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();
}
})();
/* 單次執(zhí)行的list對(duì)象 */
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();
}
})();
})();
下面是實(shí)例:loop.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;"><img src="testFile/glass_32x32.gif" /></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 = "現(xiàn)在時(shí)間："+d.getUTCFullYear()+"年"+d.getUTCMonth()+"月"+d.getUTCDate()+"日 星期"+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>
</head>
<body onload="winInit();">
<div id="daa"></div>
<div id="Layer1" class="Layer1" style="left:190px; top:101px;">
<img src="testFile/glass_32x32.gif" name="mimg" width="40" height="40" id="mimg" /></div>
<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); //可以帶變量參數(shù)的setTimeout調(diào)用形式
return z;
}
setTimeout( function(){ sum = Plus(x, y, z); }, 3000);
/*除了可以帶變量參數(shù)還可以獲取返回值的setTimeout調(diào)用形式*/
</div>
</body>
</html>
jquery.js
jQuery 是1.2.6版的，小巧的js框架，可以到http://jquery.com/下載
testFile/glass_32x32.gif
其實(shí)大家可以再深入思考一下，
例如模擬一個(gè)簡(jiǎn)單工廠類(lèi)的東西。
var money = factory.creater ("美元");
您可能感興趣的文章:
- js單例模式的兩種方案
- JS實(shí)現(xiàn)單例模式的6種方案匯總
- JavaScript的單例模式 （singleton in Javascript)
- 輕松掌握J(rèn)avaScript單例模式
- [js高手之路]單例模式實(shí)現(xiàn)模態(tài)框的示例
- JavaScript設(shè)計(jì)模式之策略模式詳解
- javascript設(shè)計(jì)模式--策略模式之輸入驗(yàn)證
- JavaScript設(shè)計(jì)模式之策略模式實(shí)例
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式之策略模式
- 學(xué)習(xí)JavaScript設(shè)計(jì)模式(策略模式)
- javascript單例模式與策略模式實(shí)例詳解
相關(guān)文章
-
js 面向?qū)ο蟮募夹g(shù)創(chuàng)建高級(jí) Web 應(yīng)用程序
在 C++ 或 C# 中，在談?wù)搶?duì)象時(shí)，是指類(lèi)或結(jié)構(gòu)的實(shí)例。對(duì)象有不同的屬性和方法，具體取決于將它們實(shí)例化的模板（即類(lèi)）。2010-02-02 - 項(xiàng)目中需要比較兩個(gè)對(duì)象是否相等，給Object對(duì)象開(kāi)展了（別緊張，別說(shuō)我把它污染了），一個(gè)實(shí)現(xiàn)而已，象java一樣可以只給自己想要的類(lèi)重寫(xiě)equals方法。2011-02-02
- 作用主要為了防止類(lèi)名沖突，相同的類(lèi)名只要屬于不同的命名空間，便不會(huì)沖突。2010-05-05
- 這篇起，會(huì)由淺到深的分析js OO之寫(xiě)類(lèi)方式，大概會(huì)有5-8篇。后面陸續(xù)會(huì)分析流行庫(kù)（框架）的寫(xiě)類(lèi)方式。為了討論的單一性，暫不考慮類(lèi)的繼承，(私有,受保護(hù))屬性或方法。2009-07-07
-
詳解new function(){}和function(){}() 區(qū)別分析
只要 new 表達(dá)式之后的 constructor 返回（return）一個(gè)引用對(duì)象（數(shù)組，對(duì)象，函數(shù)等），都將覆蓋new創(chuàng)建的匿名對(duì)象，如果返回（return）一個(gè)原始類(lèi)型（無(wú) return 時(shí)其實(shí)為 return 原始類(lèi)型 undefined），那么就返回 new 創(chuàng)建的匿名對(duì)象。2008-03-03 -
js類(lèi)后臺(tái)管理菜單類(lèi)-MenuSwitch
js類(lèi)后臺(tái)管理菜單類(lèi)-MenuSwitch...2007-09-09 -
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼
JavaScript 使用簡(jiǎn)略語(yǔ)法創(chuàng)建對(duì)象的代碼 ，需要的朋友可以參考下。2010-01-01 - 如果寫(xiě)一堆function難免會(huì)出現(xiàn)變量或函數(shù)的命名沖突，應(yīng)用了命名空間這種情況就從此杜絕了，而且代碼易于管理。2010-05-05
-
JavaScript RegExp方法獲取地址欄參數(shù)(面向?qū)ο?
個(gè)人認(rèn)為循環(huán)用得多不是什么好事。這里推薦一種利用OO思想加上RegExp的方法，使它更靈活、高效。2009-03-03 -
JavaScript 面向?qū)ο缶幊蹋?） 定義類(lèi)
最近這一段時(shí)間事情太多了，沒(méi)有時(shí)間再繼續(xù)寫(xiě)，幸好這兩天有點(diǎn)小閑，先小寫(xiě)一下JavaScript中面向?qū)ο笠恢型扑]的方法。2010-05-05