鐘錶js代碼,js數字時鐘代碼

本文目錄一覽：

• 1、網頁上不斷監聽當前時間，然後判斷時間段的js代碼要怎麼寫？
• 2、JAVASCRIPT怎麼樣製作動態時間顯示，給我代碼也可以，謝謝啦
• 3、如何使用JS實現一個簡易數碼時鐘
• 4、js Canvas實現的日曆時鐘案例有哪些
• 5、前端js中設置一個會轉動的時鐘，關於時鐘轉動角度

網頁上不斷監聽當前時間，然後判斷時間段的js代碼要怎麼寫？

寫一個定時器就好了，window.setInterval(function () { }, 1000);

每一秒執行一次function(){}

JAVASCRIPT怎麼樣製作動態時間顯示，給我代碼也可以，謝謝啦

html

title/title

head

script language=”JavaScript”

var timerID=null;

var timerRunning=false;

file://啟動

function startclock()

{

stopclock();

time();

}

file://停止

function stopclock()

{

if(timerRunning)

clearTimeout(timerID);

timerRunning=false;

}

file://實現模塊

function time()

{

file://使用new操作符創建時間對象

var now=new Date();

var yr=now.getYear();

var mName=now.getMonth()+1;

var dayNr=((now.getDate()10)?”0″:””)+now.getDate();

var dName=now.getDay()+1;

var ampm=(now.getHours()=12)?”下午”:”上午”

var hours=now.getHours();

hours=((hours12)?hours-12:hours);

var minutes=((now.getMinutes()10)?”:0″:”:”)+now.getMinutes();

var seconds=((now.getSeconds()10)?”:0″:”:”)+now.getSeconds();

file://判斷今天是星期幾

if(dName==1)Day=”Sunday”;

if(dName==1)Day=”Monday”;

if(dName==3)Day=”Tuesday”;

if(dName==4)Day=”Wednesday”;

if(dName==5)Day=”Thursday”;

if(dName==6)Day=”Friday”;

if(dName==7)Day=”Saturday”;

file://判斷月份

if(mName==1)Month=”Janauary”;

if(mName==2)Month=”February”;

if(mName==3)Month=”March”;

if(mName==4)Month=”April”;

if(mName==5)Month=”May”;

if(mName==6)Month=”June”;

if(mName==7)Month=”July”;

if(mName==8)Month=”August”;

if(mName==9)Month=”September”;

if(mName=10)Month=”October”;

if(mName=11)Month=”November”;

if(mName=12)Month=”December”;

var DayOfWeek=(“”+Day+””);

var MonthDayYear=(“”+Month+”,”+dayNr+”,”+yr+””);

document.forms[0].elements[0].value=MonthDayYear;

var TimeValue=(“”+hours+minutes+seconds+””+ampm);

document.forms[0].elements[1].value=TimeValue;

timerID=setTimeout(“time()”,1000);

timerRunning=true;

}

/script

/head

body onLoad=”startclock()”

form

br

table border=0 widtn=400

tr

TD align=”center”input type=”button” title=”停止” onclick=”stopclock()”

TD align=”center”input type=”button” title=”繼續” onclick=”startclock()”

/tr

/table

/form

/html

代碼二

script

//定義時鐘顯示的函數

function displayTime()

{

var today = new Date(); // 定義日期對象

var hours = today.getHours();

var minutes = today.getMinutes();

var seconds = today.getSeconds();

// 從日期對象中中獲得時間信息

minutes = fixTime(minutes);

seconds = fixTime(seconds); // 引入fixTime（）函數，使分和秒可以正常顯示，對於小於10的數字則在該數字前加一個0

//將時間字符串組合在一起並寫出

var the_time = hours + “:” + minutes + “:” + seconds;

window.document.the_form.the_text.value = the_time; //把表格的值重新寫一遍，相當於刷新時間

the_timeout= setTimeout(‘displayTime();’,500); //每半秒鐘執行一次該函數,即500毫秒

}

function fixTime(the_time)

{

if (the_time 10)

{

the_time = “0” + the_time;

}

return the_time;

}

/script

附 一個更酷的時鐘原代碼

html

body bgcolor=#3A6EA5

pb用JavaScript編程實現鐘錶特效/b/p

請用查看源代碼方式閱讀所有程序代碼。

script language=”JavaScript”

!–

dCol=’#22ff’;

fCol=’#e09000′;

sCol=’00ff00′;

mCol=’ff0000′;

hCol=’ffff00′;

ClockHeight=40;

ClockWidth=40;

ClockFromMouseY=0;

ClockFromMouseX=100;

d=new Array(“星期日”,”星期一”,”星期二”,”星期三”,”星期四”,”星期五”,”星期六”);

m=new Array(“一月”,”二月”,”三月”,”四月”,”五月”,”六月”,”七月”,”八月”,”九月”,”十月”,”十一月”,”十二月”);

date=new Date();

day=date.getDate();

year=date.getYear();

if (year 2000) year=year+1900;

TodaysDate=”年 “+m[date.getMonth()]+day+”日 “+d[date.getDay()]+” “+year;

D=TodaysDate.split(”);

H=’…’;

H=H.split(”);

M=’….’;

M=M.split(”);

S=’…..’;

S=S.split(”);

Face=’1 2 3 4 5 6 7 8 9 10 11 12′;

font=’Arial’;

size=1;

speed=0.9;

ns=(document.layers);

ie=(document.all);

Face=Face.split(‘ ‘);

n=Face.length;

a=size*10;

ymouse=0;

xmouse=0;

scrll=0;

props=”font face=”+font+” size=”+size+” color=”+fCol+””;

props2=”font face=”+font+” size=”+size+” color=”+dCol+””;

Split=360/n;

Dsplit=360/D.length;

HandHeight=ClockHeight/4.5

HandWidth=ClockWidth/4.5

HandY=-7;

HandX=-2.5;

scrll=0;

step=0.06;

currStep=0;

y=new Array();x=new Array();Y=new Array();X=new Array();

for (i=0; i n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}

Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();

for (i=0; i D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}

if (ns){

for (i=0; i D.length; i++)

document.write(‘layer name=”nsDate’+i+'” top=0 left=0 height=’+a+’ width=’+a+’center’+props2+D[i]+’/font/center/layer’);

for (i=0; i n; i++)

document.write(‘layer name=”nsFace’+i+'” top=0 left=0 height=’+a+’ width=’+a+’center’+props+Face[i]+’/font/center/layer’);

for (i=0; i S.length; i++)

document.write(‘layer name=nsSeconds’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+sCol+’centerb’+S[i]+’/b/center/font/layer’);

for (i=0; i M.length; i++)

document.write(‘layer name=nsMinutes’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+mCol+’centerb’+M[i]+’/b/center/font/layer’);

for (i=0; i H.length; i++)

document.write(‘layer name=nsHours’+i+’ top=0 left=0 width=15 height=15font face=Arial size=3 color=’+hCol+’centerb’+H[i]+’/b/center/font/layer’);

}

if (ie) {

document.write(‘div id=”Od” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i D.length; i++)

document.write(‘div id=”ieDate” style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center”‘+props2+D[i]+’/font/div’);

document.write(‘/div/div’);

document.write(‘div id=”Of” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i n; i++)

document.write(‘div id=”ieFace” style=”position:absolute;top:0px;left:0;height:’+a+’;width:’+a+’;text-align:center”‘+props+Face[i]+’/font/div’);

document.write(‘/div/div’);

document.write(‘div id=”Oh” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i H.length; i++)

document.write(‘div id=”ieHours” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+hCol+’;text-align:center;font-weight:bold”‘+H[i]+’/div’);

document.write(‘/div/div’);

document.write(‘div id=”Om” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i M.length; i++)

document.write(‘div id=”ieMinutes” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+mCol+’;text-align:center;font-weight:bold”‘+M[i]+’/div’);

document.write(‘/div/div’)

document.write(‘div id=”Os” style=”position:absolute;top:0px;left:0px”div style=”position:relative”‘);

for (i=0; i S.length; i++)

document.write(‘div id=”ieSeconds” style=”position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:’+sCol+’;text-align:center;font-weight:bold”‘+S[i]+’/div’);

document.write(‘/div/div’)

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;

xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;

}

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

function ClockAndAssign(){

time = new Date ();

secs = time.getSeconds();

sec = -1.57 + Math.PI * secs/30;

mins = time.getMinutes();

min = -1.57 + Math.PI * mins/30;

hr = time.getHours();

hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;

if (ie){

Od.style.top=window.document.body.scrollTop;

Of.style.top=window.document.body.scrollTop;

Oh.style.top=window.document.body.scrollTop;

Om.style.top=window.document.body.scrollTop;

Os.style.top=window.document.body.scrollTop;

}

for (i=0; i n; i++){

var F=(ns)?document.layers[‘nsFace’+i]:ieFace[i].style;

F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;

F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);

}

for (i=0; i H.length; i++){

var HL=(ns)?document.layers[‘nsHours’+i]:ieHours[i].style;

HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;

HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);

}

for (i=0; i M.length; i++){

var ML=(ns)?document.layers[‘nsMinutes’+i]:ieMinutes[i].style;

ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;

ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);

}

for (i=0; i S.length; i++){

var SL=(ns)?document.layers[‘nsSeconds’+i]:ieSeconds[i].style;

SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;

SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);

}

for (i=0; i D.length; i++){

var DL=(ns)?document.layers[‘nsDate’+i]:ieDate[i].style;

DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;

DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);

}

currStep-=step;

}

function Delay(){

scrll=(ns)?window.pageYOffset:0;

Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);

Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);

for (i=1; i D.length; i++){

Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);

Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);

}

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (i=1; i n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

ClockAndAssign();

setTimeout(‘Delay()’,50);

}

if (ns||ie)window.onload=Delay;

//–

/script

/body

/html

如何使用JS實現一個簡易數碼時鐘

設計思路：

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

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

b、根據時間字符串每個位置對應的數字來更改圖片的src的值，從而實現更換顯示圖片;

構建HTML基礎並添加樣式。

  div id=”div1″

    img src=’./數字時鐘（1）_files/0.jpg’

    img src=’./數字時鐘（1）_files/0.jpg’

      :

      img src=’./數字時鐘（1）_files/0.jpg’

      img src=’./數字時鐘（1）_files/0.jpg’

      :

    img src=’./數字時鐘（1）_files/0.jpg’

     img src=’./數字時鐘（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();

這裡出現兩個問題

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

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

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

代碼

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

設置所有圖片的src值：

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

    {

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

    }

通過setInterval()來實現每隔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=”./數字時鐘（1）_files/”+str.charAt(i)+”.jpg”;

        }

    }

    ,1000);

但是還是有一個問題，網頁在打開的初始階段，顯示時間為00：00：00，這是因為定時器有個特性，當定時器被打開後，不會立刻執行裡面的函數，而是在1秒後執行。解決代碼：

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

        }

    }

    setInterval(tick,1000);

    tick();

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

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

        }

    }

    setInterval(tick,1000);

    tick(); 

}

js Canvas實現的日曆時鐘案例有哪些

一、.獲取上下文對象 

var cxt = document.getElementById(‘元素名’).getContect(‘2d’); 

IE8或更早的瀏覽器不支持元素。

二、 drawClock() – 實現畫時鐘 

1. clearRect() 清空給定矩形內的指定像素。 

context.clearRect(x,y,width,height);

屬性 |  值

—–|————

x,y | 要清除的矩形左上角點的(x,y)坐標

width,height| 要清除的矩形寬度和高度，單位為像素12345

2.new Date() — 得到系統時間

var sec = now.getSeconds();  var min = now.getMinutes();  var hour = now.getHours();  123

3.畫時鐘的形狀

cxt.beginPath();  cxt.lineWidth = 10;  cxt.strokeStyle = “blue”;  cxt.arc(550, 310, 300, 0, 360, false);  cxt.closePath();  cxt.stroke(); 123456

beginPath()的作用是canvas的繪製方法，都會以上一次beginPath之後的所有路徑為基礎進行繪製。

closepath()是關閉路徑，而不是結束路徑，它會試圖從當前路徑的終點連一條路徑到七、起點，讓整個路徑閉合起來。

cxt.lineWidth() ： 畫筆的寬度

cxt.strokeStyle() : 設置或返回用於筆觸的顏色、漸變或模式。

屬性值：color 指示繪圖筆觸顏色的 CSS 顏色值。默認值是 #000000。

gradient 用於填充繪圖的漸變對象（線性或放射性）

pattern 用於創建 pattern 筆觸的 pattern 對象

stroke ()繪製已定義的路徑

arc() 方法創建弧/曲線（用於創建圓或部分圓）。如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。 

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

參數

描述

x    圓的中心的 x 坐標。  

y    圓的中心的 y 坐標。  

r    圓的半徑。  

sAngle    起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。  

eAngle    結束角，以弧度計。  

counterclockwise    可選。規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。  

4）drawScale — 自定義函數畫刻度

function drawScale(size, width, color, value, startx, starty, endx, endy){  

   for(var i = 0; i size; i++){  

       drawPointer(width, color, value, i, startx, starty, endx, endy);  

   }  }  12345

5. 畫時鐘刻度依託點

function drawPointer(width, color, value, angle, startx, starty, endx, endy){  

   cxt.save();                 //先保存當前畫布  

   cxt.lineWidth = width;      //設置畫筆的寬度  

   cxt.strokeStyle = color;    //設置畫筆的顏色  

   cxt.translate(550, 310);    //重置異次元空間的原點坐標  

   cxt.rotate(value * angle * Math.PI / 180);  //設置旋轉的角度，參數是弧度  

   cxt.beginPath();  

   cxt.moveTo(startx, starty);  

   cxt.lineTo(endx, endy);  

   cxt.closePath();            //先閉合路徑，再畫線  

   cxt.stroke();               //開始畫線  

   cxt.restore();              //將旋轉後的線段返回給畫布  }  12345678910111213

translate() 方法重新映射畫布上的 (0,0) 位置。

–

JS代碼如下：

//獲取上下文文檔對象  var clock = document.getElementById(‘clock’);  

var cxt = clock.getContext(‘2d’);  

//畫指針  function drawPointer(width, color, value, angle, startx, starty, endx, endy){  

   cxt.save();                 //先保存當前畫布  

   cxt.lineWidth = width;      //設置畫筆的寬度  

   cxt.strokeStyle = color;    //設置畫筆的顏色  

   cxt.translate(550, 310);    //重置異次元空間的原點坐標  

   cxt.rotate(value * angle * Math.PI / 180);  //設置旋轉的角度，參數是弧度  

   cxt.beginPath();  

   cxt.moveTo(startx, starty);  

   cxt.lineTo(endx, endy);  

   cxt.closePath();            //先閉合路徑，再畫線  

   cxt.stroke();               //開始畫線  

   cxt.restore();              //將旋轉後的線段返回給畫布  }  

//畫刻度  function drawScale(size, width, color, value, startx, starty, endx, endy){  

   for(var i = 0; i size; i++){  

       drawPointer(width, color, value, i, startx, starty, endx, endy);  

   }  

}  

//為錶盤的中心填充顏色  function drawFill(){  

   cxt.save();  

   cxt.beginPath();  

   cxt.arc(550, 310, 7, 0, 360, false);  

   cxt.closePath();  

   cxt.fillStyle = “red”;  

   cxt.fill();  

   cxt.restore();  

}  

//畫時鐘  function drawClock(){  

   cxt.clearRect(0, 0, 1350, 620);  //清空整個畫布  

   var now = new Date();            //獲取系統時間，取出時,分,秒  

   var sec = now.getSeconds();  

   var min = now.getMinutes();  

   var hour = now.getHours();  

   min += sec / 60;  

   hour += min / 60;  

   if(hour 12) hour -= 12;  

   cxt.beginPath();  

   cxt.lineWidth = 10;  

   cxt.strokeStyle = “blue”;  

   cxt.arc(550, 310, 300, 0, 360, false);  

   cxt.closePath();  

   cxt.stroke();  

   drawScale(12, 7, “pink”, 30, 0, -280, 0, -260);      //畫時刻度  

   drawScale(60, 5, “pink”, 6,  0, -280, 0, -270);      //畫分刻度  

   drawPointer(7, “purple”, hour, 30, 0, 12, 0, -210);  //畫時針  

   drawPointer(5, “yellow”, min, 6, 0, 15, 0, -240);    //畫分針  

   drawPointer(4, “red”, sec, 6, 0, 17, 0, -250);       //畫秒針  

   //細化秒針,為秒針加箭頭  

   drawPointer(3, “red”, sec, 6, -7, -235, 0, -255);  

   drawPointer(3, “red”, sec, 6, 7, -235, 0, -255);  

   drawFill();  

}  

drawClock();  

setInterval(drawClock, 1000);   //setInterval()方法中表示每隔1000ms，就執行drawClock一次  1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071

前端js中設置一個會轉動的時鐘，關於時鐘轉動角度

因為30*h是一個數，然後兩個加號是把這個數變成字符串連接起來

Bar.style.transform接受的是如”retate(30deg)”的字符串，所以不能有空格