純js代碼制作的網(wǎng)頁(yè)時(shí)鐘特效

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專(zhuān)欄 > 網(wǎng)絡(luò)編程

來(lái)源：易賢網(wǎng) 閱讀：1294 次日期：2016-07-14 16:24:01

溫馨提示：易賢網(wǎng)小編為您整理了“純js代碼制作的網(wǎng)頁(yè)時(shí)鐘特效”,方便廣大網(wǎng)友查閱！

純js代碼制作的網(wǎng)頁(yè)時(shí)鐘特效,需要的碼農(nóng)可以拿去看一下。給大家做個(gè)參考。

<BODY>

<DIV

style="LEFT: 155px; WIDTH: 400px; ZOOM: 1; POSITION: absolute; TOP: 133px; HEIGHT: 300px">

<DIV id=bg

style="LEFT: -22px; WIDTH: 150px; ZOOM: 1.5; POSITION: absolute; TOP: -57px; HEIGHT: 150px"><IMG

style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="http://files.jb51.net/upload/novelty.gif">

</DIV>

<DIV id=h

style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG

style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="http://files.jb51.net/upload/novelty_h.gif">

</DIV>

<DIV id=m

style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG

style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="http://files.jb51.net/upload/novelty_m.gif">

</DIV>

<DIV id=s

style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG

style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="http://files.jb51.net/upload/novelty_s.gif">

</DIV>

<DIV id=dot

style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; WIDTH: 129px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 129px"><IMG

style="Z-INDEX: 22; WIDTH: 129px; HEIGHT: 129px" src="http://files.jb51.net/upload/novelty_dot.gif">

</DIV>

<DIV>

//oObj input requires that a matrix filter be applied.

//deg input defines the requested angle of rotation.

var deg2radians = Math.PI * 2 / 360;

function MatrixFilter(obj)

{

if(!obj.filters)return;

//alert(obj.filters.item(0));

var Matrix;

for(p in obj.filters)

{

if(p=="DXImageTransform.Microsoft.Matrix")Matrix=obj.filters["DXImageTransform.Microsoft.Matrix"];

}

if(!Matrix)

{

obj.style.filter+="progid:DXImageTransform.Microsoft.Matrix()";

}

Matrix=obj.filters["DXImageTransform.Microsoft.Matrix"];

this.equal=function(Matrix2D_x)

{

if(Matrix2D_x.M11)Matrix.M11 = Matrix2D_x.M11;

if(Matrix2D_x.M12)Matrix.M12 = Matrix2D_x.M12;

if(Matrix2D_x.M21)Matrix.M21 = Matrix2D_x.M21;

if(Matrix2D_x.M22)Matrix.M22 = Matrix2D_x.M22;

}

if(arguments[1])this.equal(arguments[1]);

this.Rotate=function(deg)

{

rad = deg * deg2radians;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

var d=new Matrix2D(costheta,-sintheta,sintheta,costheta);

this.equal(Matrix2D.Mul(Matrix,d));

}

this.RotateTo=function(deg)

{

rad = deg * deg2radians;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

var d=new Matrix2D(costheta,-sintheta,sintheta,costheta);

this.equal(d);

}

this.RotateAt=function(deg,sx,sy)

{

rad = deg * deg2radians;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

var d=new Matrix2D(costheta,-sintheta,sintheta,costheta);

var x=sx-Matrix.Dx;

var y=sy-Matrix.Dy;

this.MoveTo(x*costheta+y*sintheta-x,-x*sintheta+y*costheta-y);

this.equal(Matrix2D.Mul(Matrix,d));

}

this.RotateToAt=function(deg,sx,sy)

{

rad = deg * deg2radians;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

var d=new Matrix2D(costheta,-sintheta,sintheta,costheta);

var x=sx;

var y=sy;

this.MoveTo(x-(x*costheta-y*sintheta),-(x*sintheta+y*costheta-x));

this.equal(d);

}

this.MoveTo=function(sx,sy)

{

Matrix.Dx=sx;

Matrix.Dy=sy;

}

this.toMatrix2D=function()

{

return new Matrix2D(Matrix.M11,Matrix.M12,Matrix.M21,Matrix.M22);

}

this.ZoomBy=function(sx,sy)

{

var d=new Matrix2D(sx,0,0,sy);

this.equal(Matrix2D.Mul(Matrix,d));

}

this.toString=function()

{

return ""+Matrix.M11+" "+Matrix.M12+"\n"+Matrix.M21+" "+Matrix.M22+"\n"

}

//Matrix.SizingMethod='clip to original';

//this.fnSetRotation(30);

//alert(Matrix.M11);

//alert(obj.filters["DXImageTransform.Microsoft.Matrix"]);

}

function Matrix2D()

{

this.M11 = arguments[0]||1;

this.M12 = arguments[1]||0;

this.M21 = arguments[2]||0;

this.M22 = arguments[3]||1;

this.Mul_Matrix2D=function(Matrix2D_b)

{

var r=new Matrix2D();

r=Matrix2D.Mul(this,Matrix2D_b);

return r;

}

this.toString=function()

{

return ""+this.M11+" "+this.M12+"\n"+this.M21+" "+this.M22+"\n"

}

Matrix2D.Mul=function(Matrix2D_a,Matrix2D_b)

{

var r=new Matrix2D();

r.M11=Matrix2D_a.M11*Matrix2D_b.M11+Matrix2D_a.M12*Matrix2D_b.M21;

r.M12=Matrix2D_a.M11*Matrix2D_b.M12+Matrix2D_a.M12*Matrix2D_b.M22;

r.M21=Matrix2D_a.M21*Matrix2D_b.M11+Matrix2D_a.M22*Matrix2D_b.M21;

r.M22=Matrix2D_a.M21*Matrix2D_b.M12+Matrix2D_a.M22*Matrix2D_b.M22;

return r;

}

var ms=new MatrixFilter(s);

var mm=new MatrixFilter(m);

var mh=new MatrixFilter(h);

var i=1;

setInterval("ms.RotateToAt((new Date()).getSeconds()*6+6,69,69)",500);

setInterval("mm.RotateToAt((new Date()).getMinutes()*6+6,69,69)",500);

setInterval("mh.RotateToAt(((new Date()).getHours()+(new Date()).getMinutes()/60)*30,69,69)",500);

//mf.MoveTo(30,70);

//mf.ZoomBy(1.5,1.5);

//alert(mf.toMatrix2D());

//alert(Matrix2D.Mul(m2d1,m2d2));

//fnSetRotation(oDiv.filters.item(0),30);

</SCRIPT>

</DIV></DIV></BODY></HTML>

以上這篇純js代碼制作的網(wǎng)頁(yè)時(shí)鐘特效【附實(shí)例】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考

更多信息請(qǐng)查看網(wǎng)絡(luò)編程

上一篇：原生javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單動(dòng)畫(huà)效果

下一篇：JS 實(shí)現(xiàn)倒計(jì)時(shí)數(shù)字時(shí)鐘效果

易賢網(wǎng)手機(jī)網(wǎng)站地址：純js代碼制作的網(wǎng)頁(yè)時(shí)鐘特效

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長(zhǎng)的行的實(shí)現(xiàn)方法10月30日

vue.js語(yǔ)法及常用指令10月30日

python 讀寫(xiě)中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問(wèn)題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時(shí)切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開(kāi)啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開(kāi)發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類(lèi)型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合