如何在javascript表格中顯現(xiàn)時鐘

沒什么幾種不幾種，關(guān)鍵就在原理。

成都創(chuàng)新互聯(lián)公司主要從事做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)和平,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

你要什么效果？沒有猜錯的話，你要的是時間一秒一秒跳動的？

Date()就能得到一個時間對象，當(dāng)然，JS是客戶端的，你直接Date()得到的也是客戶端的時間。也就是說，你把你的電腦時間調(diào)成1970-7-7 12:01:35，他顯示的就是這個時間。如果你要服務(wù)器端的時間，可以用服務(wù)器端語言把時間當(dāng)成字符串寫到j(luò)s的一個變量里。比如，PHP用 var t=new Date('?=date('Y');?','?=date('m')-1;?','?=date('j');?','?=date('G');?','?=date('i');?','?=date('s');?');

這樣JS里就有一個t的時間了。你再document.write(t)就可以看到服務(wù)器端的時間了。

如果你要一秒一秒跳動的，就需要一個一秒鐘改變一次的函數(shù)，我隨便寫了個：

function timer(){

t=new Date(t.getTime()+1000);

document.getElementById("time").innerHTML=t.toLocaleString();

}

然后你每秒調(diào)用一次

setInterval(timer,1000);

這樣系統(tǒng)就會自動每秒自動往上加了。。

JS時間，要注意兩點(diǎn)：

1、ie和firefox在處理時間函數(shù)時，有一些區(qū)別，要兼容兩種瀏覽器的話一定要注意

2、使用JS的一些函數(shù)，可以免去你算時間的一些麻煩。如果你想自己去把時間一秒一秒加，就會很麻煩，比如，60進(jìn)制，潤年，2月的天數(shù)等等。。但是用t=new Date(t.getTime()+1000)還有t.toLocaleString()，你就不需要管這么多了，而且完全準(zhǔn)確的。

只要讀一次服務(wù)器時間就可以了，每秒在時間上加一，與服務(wù)器時間基本會一致。

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

setInterval(function aa(){}）；

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

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

javascript動態(tài)顯示時間

html

head

title時鐘特效/title

script type="text/javascript"

function disptime(){

var today = new Date()； //獲得當(dāng)前時間

var hh = today.getHours()； //獲得小時、分鐘、秒

var mm = today.getMinutes()；

var ss = today.getSeconds()；

/*設(shè)置div的內(nèi)容為當(dāng)前時間*/

document.getElementById("myclock").innerHTML="h1現(xiàn)在是:"+hh+":"+mm+":"+ss+"h1"；

/*

使用setTimeout在函數(shù)disptime()體內(nèi)再次調(diào)用setTimeout

設(shè)置定時器每隔1秒（1000毫秒），調(diào)用函數(shù)disptime()執(zhí)行，刷新時鐘顯示

*/

var myTime=setTimeout("disptime()"，1000)；

}

/script

/head

body onload="disptime()"

div id="myclock"/div

/body。

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

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();

}

如何使用JavaScript實(shí)現(xiàn)制作動態(tài)時鐘

!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();

//?畫時針刻度

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();

}

//?畫時針

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中的數(shù)字時鐘的顯示問題

html

head

script language="JavaScript"

function showTime()

{

var currentDate = new Date();

var hours = currentDate.getHours();

var minutes = currentDate.getMinutes();

var seconds = currentDate.getSeconds();

//

//格式化輸出

//

if (minutes 10)

minutes = "0" + minutes;

if (seconds 10)

seconds = "0" + seconds;

var currentTimeString ="font color=blue" + hours + ":" + minutes + ":" + seconds + "/font";

document.getElementById("show").innerHTML=currentTimeString; //改這地方

window.setTimeout("showTime()", 1000);

}

/script

/head

body onload="showTime()"

span id="show"/span !--加這地方--

/body

/html

名稱欄目：關(guān)于javascript時鐘的信息
分享路徑：http://chinadenli.net/article22/dsshpcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、App開發(fā)、網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站改版、網(wǎng)站維護(hù)

廣告

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