正文
javascript钟表,javascript钟表效果讨论心得
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
javascript这个数字时钟总是延时一秒钟显示怎么办？？
setInterval(function aa(){}）；
这里的aa不是全局的。因此下面直接调用的那个没执行。方法是将aa的定义，挪到setInterval外面，setInterval(aa,1000)，下面也在onload里调用aa()，应该就可以了。
另外，javascript的计时不是很准，所以你会发现秒数有可能会跳，比如，当前秒是1，毫秒数是999，下次执行是1000毫秒后，但有可能是1001毫秒才执行，所以直接跳到3秒了，解决的办法是将刷新频率调高，比如间隔为500毫秒，这样就不会有跳秒的现象。但还会有秒的变化与实际不符的感觉，调整到200-250左右，人就基本感觉不出来了。
相关问答
Q1: 如何用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();
}
Q2: 如何使用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();
}
Q3: 用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
