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

設(shè)計思路：

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、遵義網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、成都商城網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為遵義等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

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

div?id="div1"

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

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

:

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

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

:

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

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

/div

style樣式

#div1{

width:50%;

margin:300px?auto;

background:black;

}

獲取圖片元素以及當前時間：

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

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

var?oDate=new?Date();

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

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

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

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

解決以上兩個問題的代碼解決方案：

代碼

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ù)字時鐘（1）_files/"+str.charAt(i)+".jpg";

}

通過setInterval()來實現(xiàn)每隔1秒進行重新獲取當前時間以及圖片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ù)字時鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

,1000);

但是還是有一個問題，網(wǎng)頁在打開的初始階段，顯示時間為00：00：00，這是因為定時器有個特性，當定時器被打開后，不會立刻執(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ù)字時鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick();

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

完整的數(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ù)字時鐘（1）_files/"+str.charAt(i)+".jpg";

}

}

setInterval(tick,1000);

tick();?

}

如何用javascript實現(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做一個簡單的英文日期時鐘， 效果如下，不要秒鐘感恩

label id="time"/label

script language="javascript"

function getCurrentDate() {

var date = new Date();

var monthArray=new Array

("January","February","March","April","May","June","July","August",

"September","October","November","December");

var weekArray = new Array("Sunday","Monday","Tuesday",

"Wednesday","Thursday","Friday","Saturday");

month=date.getMonth();

day=date.getDate();

hours = date.getHours();

minutes = date.getMinutes()

if(day.toString().length == 1){

day="0"+day.toString();

}

document.getElementById("time").innerHTML=(day+" "+monthArray[month] +", "+hours+":"+minutes);

}

window.onload = function(){

setInterval("getCurrentDate()",1000);

}

/script

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

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

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

Date()就能得到一個時間對象，當然，JS是客戶端的，你直接Date()得到的也是客戶端的時間。也就是說，你把你的電腦時間調(diào)成1970-7-7 12:01:35，他顯示的就是這個時間。如果你要服務(wù)器端的時間，可以用服務(wù)器端語言把時間當成字符串寫到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時間，要注意兩點：

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

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

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

js怎么寫一個時鐘？每秒跳一次的那種

html

head

script type="text/javascript"

!--

window.onload=function(){

var oDiv=document.getElementById('time'); // 獲取DIV

function theTime(){

var theDate=new Date(); // 創(chuàng)建一個日期對象

var year=theDate.getFullYear();; // 獲取年份

var month=theDate.getMonth(); // 獲取月份

var day=theDate.getDate(); //獲取日

var hour=theDate.getHours(); //獲取小時

var minues=theDate.getMinutes(); // 獲取分鐘

var second=theDate.getSeconds(); // 獲取秒

oDiv.innerHTML="現(xiàn)在的時間是"+year+"年"+month+"月"+day+"日 "+hour+":"+minues+":"+second;

}

theTime(); // 執(zhí)行時間函數(shù)

setInterval(theTime,1000); // 更新時間

}

//--

/script

/head

div id="time"/div

/html

你試下,，，，

JavaScript 如何實現(xiàn)的簡單時鐘？

背景時鐘

====1、以下是這個效果的全部代碼。[最好從一個空頁面開始]

html

head

TITLE背景時鐘/TITLE

script language=javaScript

!--//

function clockon() {

thistime= new Date()

var hours=thistime.getHours()

var minutes=thistime.getMinutes()

var seconds=thistime.getSeconds()

if (eval(hours) 10) {hours="0"+hours}

if (eval(minutes) 10) {minutes="0"+minutes}

if (seconds 10) {seconds="0"+seconds}

thistime = hours+":"+minutes+":"+seconds

if(document.all) {

bgclocknoshade.innerHTML=thistime

bgclockshade.innerHTML=thistime

}

if(document.layers) {

document.bgclockshade.document.write('div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Verdana;color:FFAAAAA;font-size:120px;top:10px;left:152px"'+thistime+'/div')

document.bgclocknoshade.document.write('div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Verdana;color:DDDDDD;font-size:120px;top:10px;left:150px"'+thistime+'/div')

document.close()

}

var timer=setTimeout("clockon()",200)

}

//--

/script

link rel="stylesheet" href="../style.css"/head

body onLoad="clockon()"

div id="bgclockshade" style="position:absolute;visibility:visible;font-family:Arial;color:FF8888;font-size:120px;top:102px;left:152px"/div

div id="bgclocknoshade" style="position:absolute;visibility:visible;font-family:Arial;color:DDDDDD;font-size:120px;top:100px;left:150px"/div

div id="mainbody" style="position:absolute; visibility:visible"

/div

/body

/html

說明：時鐘顯示的位置需要你修正TOP,LEFT參數(shù)來確定。TOP表示層距離顯示器頂部的象素值，LEFT表示距離左側(cè)的象素。

網(wǎng)頁名稱：關(guān)于時鐘樣式JavaScript的信息
URL網(wǎng)址：http://chinadenli.net/article3/dsgehos.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、App設(shè)計、商城網(wǎng)站、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計、

廣告

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