包含javascript时钟代码的词条

本篇文章给大家谈谈javascript时钟代码，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、基于javascript实现动态显示当前系统时间
• 2、如何用javascript实现一个时钟？
• 3、js Canvas实现的日历时钟案例有哪些
• 4、JAVASCRIPT怎么样制作动态时间显示，给我代码也可以，谢谢啦
• 5、如何使用JavaScript实现制作动态时钟

基于javascript实现动态显示当前系统时间

本文实例讲解了javascript实现动态显示当前系统时间的详细代码，具体内容如下

（1）时间日期信息，应该在一个div中来显示

（2）定时器：每隔一秒再次访问系统时间，window对象的setTimeout()

（3）时钟显示的时机(事件)：当网页加载完成后才显示，事件onload

（4）如何将

时间日期信息

写入到指定的div中，DOM对象中的innerHTML属性

效果图：

具体代码：

html

head

meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

/

title无标题文档/title

script

type="text/javascript"

//定义函数：构建要显示的时间日期字符串

function

showTime()

{

//创建Date对象

var

today

=

new

Date();

//分别取出年、月、日、时、分、秒

var

year

=

today.getFullYear();

var

month

=

today.getMonth()+1;

var

day

=

today.getDate();

var

hours

=

today.getHours();

var

minutes

=

today.getMinutes();

var

seconds

=

today.getSeconds();

//如果是单个数，则前面补0

month

=

month10

?

"0"+month

:

month;

day

=

day

10

?

"0"+day

:

day;

hours

=

hours10

?

"0"+hours

:

hours;

minutes

=

minutes10

?

"0"+minutes

:

minutes;

seconds

=

seconds10

?

"0"+seconds

:

seconds;

//构建要输出的字符串

var

str

=

year+"年"+month+"月"+day+"日

"+hours+":"+minutes+":"+seconds;

//获取id=result的对象

var

obj

=

document.getElementById("result");

//将str的内容写入到id=result的div中去

obj.innerHTML

=

str;

//延时器

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

}

/script

style

type="text/css"

#result{

width:500px;

border:1px

solid

#CCCCCC;

background:#FFFFCC;

margin:50px

auto;

font-size:24px;

color:#FF0000;

padding:20px;

}

/style

/head

body

onload="showTime()"

div

id="result"/div

/body

/html

希望本文所述对大家的javascript程序设计有所帮助。

如何用javascript实现一个时钟？

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 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

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

如何使用JavaScript实现制作动态时钟

!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标签/canvas

    /body

/html

javascript时钟代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、javascript时钟代码的信息别忘了在本站进行查找喔。