我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线：400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

javascript钟表,javascript钟表效果讨论心得

javascript这个数字时钟总是延时一秒钟显示怎么办？？

setInterval(function aa(){}）；

创新互联建站作为成都网站建设公司，专注网站建设、网站设计，有关成都企业网站建设方案、改版、费用等问题，行业涉及卫生间隔断等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

这里的aa不是全局的。因此下面直接调用的那个没执行。方法是将aa的定义，挪到setInterval外面，setInterval(aa,1000)，下面也在onload里调用aa()，应该就可以了。

另外，javascript的计时不是很准，所以你会发现秒数有可能会跳，比如，当前秒是1，毫秒数是999，下次执行是1000毫秒后，但有可能是1001毫秒才执行，所以直接跳到3秒了，解决的办法是将刷新频率调高，比如间隔为500毫秒，这样就不会有跳秒的现象。但还会有秒的变化与实际不符的感觉，调整到200-250左右，人就基本感觉不出来了。

如何用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实现一个简易数码时钟

设计思路：

数码时钟即通过图片数字来显示当前时间，需要显示的图片的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写一个钟表

!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钟表效果讨论心得
地址分享：http://mswzjz.cn/article/dsigidi.html

其他资讯