如何用javascript实现一个时钟？

Posted 2023-03-20

怎么用javascript实现一个时钟，要求每500毫秒刷新一下。请详细讲下代码，刚刚学习javascript，我一直没实现，时间显示出来了，就是不走动，时间显示的是死的，不停地刷新，时间会发生变化。怎么办？
用setTimeout函数实现，谢谢！

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;i<12;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;i<60;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();

参考技术A js中可以使用setInterval()函数实现简单的时钟功能。
setInterval（function,millisecond）;第一个参数是要调用的函数名，第二个参数是间隔毫秒数。
例如：实现倒计时功能。先定义一个倒计时函数countDown，然后使用setInterval使其每秒执行一次。
function countDown()
//每秒显示的时间减去一秒的代码



setInterval（countDown,1000）; 参考技术B <script type="text/javascript">
document.write('<div id="time"></div>');
function showTime()
var time = new Date();
document.getElementById("time").innerhtml=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();

setInterval(showTime,500);
</script>
拷贝上面代码，放在time.html文件里面，用浏览器打开就可以了。本回答被提问者采纳 参考技术C <div id="time"></div>

function clock()
var time = new Date();
document.getElementById("time").innerHTML=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
setTimeout(clock, 500);


clock(); 参考技术D http://www.17sucai.com/pins/tag/3778.html