js实现电子时钟功能

2023年5月27日下午2:03 • JavaScript

下面我将为您详细讲解实现“js实现电子时钟功能”的完整攻略。在这个过程中，我们将会用到HTML、CSS和JavaScript三种语言。

HTML部分

首先，我们先编写一个基本的HTML页面，然后在页面中添加一个用于显示时间的DIV容器。HTML代码可以如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>电子时钟</title>
        <style>
            #clock {
              font-size: 48px;
              font-weight: bold;
              text-align: center;  
            }
        </style>
    </head>
    <body>
        <div id="clock"></div>
        <script src="clock.js"></script>
    </body>
</html>

可以看到，我们在页面中添加了一个id为“clock”的DIV，用于显示时间。同时，我们将JavaScript代码放在了页面底部，以保证页面加载完成后再去执行JavaScript代码。

CSS部分

接下来，我们需要对页面样式进行一些基本的设置，以保证页面显示正常。在CSS代码中，我们将设置页面字体大小、粗细以及居中显示等。CSS代码如下：

#clock {
  font-size: 48px;
  font-weight: bold;
  text-align: center;  
}

JavaScript部分

最后，让我们来到重头戏 - JavaScript代码的编写。为了实现电子时钟的功能，我们需要在JavaScript代码中通过setInterval函数定时更新时间，并将时间显示在DIV容器中。

代码示例如下：

function showTime() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var timeString = hours + ':' + minutes + ':' + seconds;
  document.getElementById('clock').innerHTML = timeString;
}

setInterval(showTime, 1000);

在上面的代码中，我们定义了一个名为“showTime”的函数，用于获取当前时间并将其显示在DIV容器中。我们通过内置的Date对象获取当前时间，并将小时数、分钟数和秒数存储到相应的变量中。接下来，我们将这些变量转换为字符串，并将它们组合成时间字符串。最后，我们将时间字符串显示在DIV容器中。

为了保证时间的更新，我们将showTime函数加入到一个名为“setInterval”的周期性回调函数中，并将周期设置为1000ms(一秒)。这样就可以每秒更新一次时间了。

示例说明

我们可以通过两个基本的示例来说明电子时钟的实现过程。

示例1：将时钟显示为12小时制

function showTime() {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    //将小时数转化为12小时制
    var meridian='AM';
    if(hours > 12){
        hours=hours-12;
        meridian='PM';
    }
    //如果小时数小于10则在前面加0
    hours = hours < 10 ? "0" + hours : hours;

    //如果分钟数小于10则在前面加0
    minutes = minutes < 10 ? "0" + minutes : minutes;

    //如果秒数小于10则在前面加0
    seconds = seconds < 10 ? "0" + seconds : seconds;

    var timeString = hours + ':' + minutes + ':' + seconds +' '+meridian;
    document.getElementById('clock').innerHTML = timeString;
}

setInterval(showTime, 1000);

上述代码中，在获取时间后，我们将小时数转化为12小时制，并将上下午标识符“AM”或“PM”加入到时间字符串中。

示例2：将时钟设置为倒计时模式

const DATE = new Date('Jun 01 2022 00:00:00 UTC+0200');
function showTime() {
    var now = new Date();
    var difference = DATE.getTime() - now.getTime();
    if (difference <= 0) {
       clearInterval(interval);
       document.getElementById('clock').innerHTML = '时间到';
    }
    else {
      var days = Math.floor(difference/(1000*60*60*24));
      var hours = Math.floor((difference/(1000*60*60))%24);
      var minutes = Math.floor((difference/(1000*60))%60);
      var seconds = Math.floor((difference/1000)%60);

      //如果小时数小于10则在前面加0
      hours = hours < 10 ? "0" + hours : hours;

      //如果分钟数小于10则在前面加0
      minutes = minutes < 10 ? "0" + minutes : minutes;

      //如果秒数小于10则在前面加0
      seconds = seconds < 10 ? "0" + seconds : seconds;

      var timeString = days+' 天 '+hours + ':' + minutes + ':' + seconds;
      document.getElementById('clock').innerHTML = timeString;
    }
}
var interval = setInterval(showTime, 1000);

在上述代码中，我们将一个指定的日期(在本例中为2022年06月01日)定义为常量DATE，并在showTime函数中将其与当前时间进行比较，计算倒计时天数、小时数、分钟数和秒数。如果倒计时结束，即difference小于等于0，则清除周期性回调函数并显示“时间到”字符串。