javascript這個(gè)數(shù)字時(shí)鐘總是延時(shí)一秒鐘顯示怎么辦？？

setInterval(function aa(){}）；

創(chuàng)新互聯(lián)建站作為成都網(wǎng)站建設(shè)公司，專注網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站建設(shè)方案、改版、費(fèi)用等問題，行業(yè)涉及衛(wèi)生間隔斷等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

這里的aa不是全局的。因此下面直接調(diào)用的那個(gè)沒執(zhí)行。方法是將aa的定義，挪到setInterval外面，setInterval(aa,1000)，下面也在onload里調(diào)用aa()，應(yīng)該就可以了。

另外，javascript的計(jì)時(shí)不是很準(zhǔn)，所以你會(huì)發(fā)現(xiàn)秒數(shù)有可能會(huì)跳，比如，當(dāng)前秒是1，毫秒數(shù)是999，下次執(zhí)行是1000毫秒后，但有可能是1001毫秒才執(zhí)行，所以直接跳到3秒了，解決的辦法是將刷新頻率調(diào)高，比如間隔為500毫秒，這樣就不會(huì)有跳秒的現(xiàn)象。但還會(huì)有秒的變化與實(shí)際不符的感覺，調(diào)整到200-250左右，人就基本感覺不出來了。

如何用javascript實(shí)現(xiàn)一個(gè)時(shí)鐘？

function?init(){

clock();

setInterval(clock,1000);

}

function?clock(){

var?now?=?new?Date();

var?ctx?=?document.getElementById('canvas').getContext('2d');

ctx.save();

ctx.clearRect(0,0,150,150);

ctx.translate(75,75);

ctx.scale(0.4,0.4);

ctx.rotate(-Math.PI/2);

ctx.strokeStyle?=?"black";

ctx.fillStyle?=?"white";

ctx.lineWidth?=?8;

ctx.lineCap?=?"round";

//?Hour?marks

ctx.save();

for?(var?i=0;i12;i++){

ctx.beginPath();

ctx.rotate(Math.PI/6);

ctx.moveTo(100,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.restore();

//?Minute?marks

ctx.save();

ctx.lineWidth?=?5;

for?(i=0;i60;i++){

if?(i%5!=0)?{

ctx.beginPath();

ctx.moveTo(117,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.rotate(Math.PI/30);

}

ctx.restore();

var?sec?=?now.getSeconds();

var?min?=?now.getMinutes();

var?hr??=?now.getHours();

hr?=?hr=12???hr-12?:?hr;

ctx.fillStyle?=?"black";

//?write?Hours

ctx.save();

ctx.rotate(?hr*(Math.PI/6)?+?(Math.PI/360)*min?+?(Math.PI/21600)*sec?)

ctx.lineWidth?=?14;

ctx.beginPath();

ctx.moveTo(-20,0);

ctx.lineTo(80,0);

ctx.stroke();

ctx.restore();

//?write?Minutes

ctx.save();

ctx.rotate(?(Math.PI/30)*min?+?(Math.PI/1800)*sec?)

ctx.lineWidth?=?10;

ctx.beginPath();

ctx.moveTo(-28,0);

ctx.lineTo(112,0);

ctx.stroke();

ctx.restore();

//?Write?seconds

ctx.save();

ctx.rotate(sec?*?Math.PI/30);

ctx.strokeStyle?=?"#D40000";

ctx.fillStyle?=?"#D40000";

ctx.lineWidth?=?6;

ctx.beginPath();

ctx.moveTo(-30,0);

ctx.lineTo(83,0);

ctx.stroke();

ctx.beginPath();

ctx.arc(0,0,10,0,Math.PI*2,true);

ctx.fill();

ctx.beginPath();

ctx.arc(95,0,10,0,Math.PI*2,true);

ctx.stroke();

ctx.fillStyle?=?"#555";

ctx.arc(0,0,3,0,Math.PI*2,true);

ctx.fill();

ctx.restore();

ctx.beginPath();

ctx.lineWidth?=?14;

ctx.strokeStyle?=?'#325FA2';

ctx.arc(0,0,142,0,Math.PI*2,true);

ctx.stroke();

ctx.restore();

}

如何使用JS實(shí)現(xiàn)一個(gè)簡(jiǎn)易數(shù)碼時(shí)鐘

設(shè)計(jì)思路：

數(shù)碼時(shí)鐘即通過圖片數(shù)字來顯示當(dāng)前時(shí)間，需要顯示的圖片的URL根據(jù)時(shí)間變化而變化。

a、獲取當(dāng)前時(shí)間Date()并將當(dāng)前時(shí)間信息轉(zhuǎn)換為一個(gè)6位的字符串;

b、根據(jù)時(shí)間字符串每個(gè)位置對(duì)應(yīng)的數(shù)字來更改圖片的src的值，從而實(shí)現(xiàn)更換顯示圖片;

構(gòu)建HTML基礎(chǔ)并添加樣式。

div?id="div1"

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

:

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

:

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

img?src='./數(shù)字時(shí)鐘（1）_files/0.jpg'

/div

style樣式

#div1{

width:50%;

margin:300px?auto;

background:black;

}

獲取圖片元素以及當(dāng)前時(shí)間：

var?oDiv=document.getElementById('div1');

var?aImg=oDiv.getElementsByTagName('img');

var?oDate=new?Date();

var?str=oDate.getHours()+oDate.getMinutes()+oDate.getSeconds();

這里出現(xiàn)兩個(gè)問題

1、oDate.getHours()返回的都是數(shù)字，這樣編寫為數(shù)字相加，而非字符串相加。

2、當(dāng)獲取的值為一位數(shù)時(shí)，會(huì)造成字符串的個(gè)數(shù)少于6，不滿足初始設(shè)計(jì)要求。

解決以上兩個(gè)問題的代碼解決方案：

代碼

var?oDiv=document.getElementById('div1');

var?aImg=oDiv.getElementsByTagName('img');

var?oDate=new?Date();

function?twoDigitsStr()

{

if(n10)

{return?'0'+n;}

else

{return?''+n;}

}

var?str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

設(shè)置所有圖片的src值：

for(var?i=0;iaImg.length;i++)

{

aImg[i].src="./數(shù)字時(shí)鐘（1）_files/"+str.charAt(i)+".jpg";

}

通過setInterval()來實(shí)現(xiàn)每隔1秒進(jìn)行重新獲取當(dāng)前時(shí)間以及圖片src值：

代碼

var?oDiv=document.getElementById('div1');

var?aImg=oDiv.getElementsByTagName('img');

setInterval(function?tick()

{

var?oDate=new?Date();

var?str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var?i=0;iaImg.length;i++)

{

aImg[i].src="./數(shù)字時(shí)鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

,1000);

但是還是有一個(gè)問題，網(wǎng)頁在打開的初始階段，顯示時(shí)間為00：00：00，這是因?yàn)槎〞r(shí)器有個(gè)特性，當(dāng)定時(shí)器被打開后，不會(huì)立刻執(zhí)行里面的函數(shù)，而是在1秒后執(zhí)行。解決代碼：

var?oDiv=document.getElementById('div1');

var?aImg=oDiv.getElementsByTagName('img');

function?tick()

{var?oDate=new?Date();

var?str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var?i=0;iaImg.length;i++)

{

aImg[i].src="./數(shù)字時(shí)鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick();

問題：代碼setInterval(tick,1000);中函數(shù)tick沒有帶括號(hào)，那么JS中函數(shù)帶括號(hào)與不帶括號(hào)有什么區(qū)別？

完整的數(shù)碼時(shí)鐘制作JS代碼為：

function?twoDigitsStr(n)

{

if(n10)

{return?'0'+n;}

else

{return?''+n;}

}

window.onload=function()

{

var?oDiv=document.getElementById('div1');

var?aImg=oDiv.getElementsByTagName('img');

function?tick()

{var?oDate=new?Date();

var?str=twoDigitsStr(oDate.getHours())+twoDigitsStr(oDate.getMinutes())+twoDigitsStr(oDate.getSeconds());

for(var?i=0;iaImg.length;i++)

{

aImg[i].src="./數(shù)字時(shí)鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick();?

}

用JS寫一個(gè)鐘表

!doctype?html

html

head

meta?charset="UTF-8"

titleclock?test/title

script?type="text/javascript"

onload?=?function(){

var?canvas?=?document.querySelector('canvas');

var?ctx?=canvas.getContext('2d');

var?frameId?=?null;

var?start?=?Date.now();

var?draw?=?function(){

console.log(frameId);

ctx.clearRect(0,0,410,410)

var?now?=?new?Date();

var?sec?=?now.getSeconds();

var?min?=?now.getMinutes();

var?hour?=?now.getHours()?+?min/60;

hour?=?hour12???hour-12?:hour;

ctx.save();

ctx.beginPath();

ctx.strokeStyle?='#ABCDEF';

ctx.lineWidth?=10;

ctx.arc(205,205,200,0,360,false);

ctx.stroke();

ctx.closePath();

ctx.restore();

//?畫時(shí)針刻度

for(var?i?=?1;i=12;i++){

ctx.save();

ctx.lineWidth=8;

ctx.font?=?'normal?400?20px/2??sans-serif';

ctx.translate(205,205);

ctx.rotate(i*30*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-195);

ctx.lineTo(0,-180);

ctx.fillText(i,(i10?-10:-5),-160);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//?畫分針秒針刻度

for(var?i?=?0;i60;i++){

ctx.save();

ctx.lineWidth=6;

ctx.translate(205,205);

ctx.rotate(i*6*Math.PI/180);

ctx.beginPath();

ctx.moveTo(0,-195);

ctx.lineTo(0,-185);

ctx.closePath();

ctx.stroke();

ctx.restore();

}

//?畫時(shí)針

ctx.save();

ctx.lineWidth=10;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(hour*30*Math.PI/180);

ctx.moveTo(0,-155);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

//?畫分針

ctx.save();

ctx.lineWidth=6;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(min*6*Math.PI/180);

ctx.moveTo(0,-165);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

//?畫秒針

ctx.save();

ctx.lineWidth=4;

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.moveTo(0,-175);

ctx.lineTo(0,20);

ctx.closePath();

ctx.stroke();

ctx.restore();

//?畫秒針裝飾

ctx.save();

ctx.lineWidth=4;

ctx.fillStyle="#ccc";

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.arc(0,0,10,0,360,false);

ctx.closePath();

ctx.stroke();

ctx.fill();

ctx.restore();

ctx.save();

ctx.lineWidth=4;

ctx.strokeStyle="#333";

ctx.fillStyle="red";

ctx.translate(205,205);

ctx.beginPath();

ctx.rotate(sec*6*Math.PI/180);

ctx.arc(0,-150,8,0,360,false);

ctx.closePath();

ctx.stroke();

ctx.fill();

ctx.restore();

if(Date.now()-start?=1000){

start?=?Date.now();

frameId?=?requestAnimationFrame(draw)

}else{

start?=?Date.now();

setTimeout(draw,1000);

}

};

draw();

}

/script

/head

body

canvas?width="410"?height="410"你的瀏覽器不支持canvas標(biāo)簽/canvas

/body

/html

文章題目：javascript鐘表,javascript鐘表效果討論心得
當(dāng)前URL：http://chinadenli.net/article15/dsigidi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、服務(wù)器托管、網(wǎng)站維護(hù)、域名注冊(cè)、電子商務(wù)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)