制作动态时钟的令人惊艳HTML代码

在JavaScript文件中，编写一段代码，用来更新时钟：

function updateClock() {
  // 获取当前时间
  var currentTime = new Date();
  
  // 获取小时、分钟、秒
  var currentHours = currentTime.getHours();
  var currentMinutes = currentTime.getMinutes();
  var currentSeconds = currentTime.getSeconds();
  
  // 格式化时间
  currentMinutes = ( currentMinutes < 10 ? "0" : "" ) + currentMinutes;
  currentSeconds = ( currentSeconds < 10 ? "0" : "" ) + currentSeconds;
  
  // 更新时钟
  var timeOfDay = ( currentHours < 12 ) ? "AM" : "PM";
  currentHours = ( currentHours > 12 ) ? currentHours - 12 : currentHours;
  currentHours = ( currentHours == 0 ) ? 12 : currentHours;
  var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;
  
  // 更新时钟div
  document.getElementById("clock").innerHTML = currentTimeString;
}

在JavaScript文件中，添加一个计时器，每隔一秒钟就更新一次时钟：

setInterval(updateClock, 1000);

使用以上代码，就可以制作一个动态时钟，它可以实时显示当前的时间。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。