JavaScript 制作实时电子时钟，点赞加关注经典案例持续更新~

十七同志

已于 2023-12-07 09:37:15 修改

阅读量2.3k

点赞数 9

分类专栏： Javascript项目和经典案例专栏文章标签： javascript 开发语言前端 css html

于 2023-11-16 10:35:40 首次发布

本文链接：https://blog.csdn.net/weixin_54049256/article/details/134435938

版权

Javascript项目和经典案例专栏专栏收录该内容

7 篇文章 1 订阅

订阅专栏

效果动图，此动图时间仅为当时录制的时间，实际运行时间为实时时间

思路

最主要是要通过 new Date()时间对象，获取各类实时时间，下面是一些常用的Date对象的一些常用属性和方法：

获取:

getFullYear(): 返回四位数的年份。

getMonth(): 返回月份，范围是0-11。

getDate(): 返回月份中的日期，范围是1-31。

getHours(): 返回小时，范围是0-23。

getMinutes(): 返回分钟，范围是0-59。

getSeconds(): 返回秒数，范围是0-59。

getTime(): 返回自1970年1月1日00:00:00 UTC至该日期对象的毫秒数。

getDay(): 返回一周中的第几天，范围是0-6，其中0代表星期日。

getHours(): 返回本地的小时，范围是0-23。

getUTCHours(): 返回UTC（协调世界时）的小时数，范围是0-23。

设置:

setFullYear(year): 设置四位数的年份。

setMonth(month): 设置月份，范围是0-11。

setDate(date): 设置月份中的日期，范围是1-31。

setHours(hours): 设置小时，范围是0-23。

setMinutes(minutes): 设置分钟，范围是0-59。

setSeconds(seconds): 设置秒数，范围是0-59。

setMilliseconds(milliseconds): 设置毫秒数，范围是0-999。

getTime(): 返回自1970年1月1日00:00:00 UTC至该日期对象的毫秒数。

getDay(): 返回一周中的第几天，范围是0-6，其中0代表星期日。

getHours(): 返回本地的小时，范围是0-23。

getUTCHours(): 返回UTC（协调世界时）的小时数，范围是0-23。

补充：

toString()：将日期转换为字符串。

toLocaleDateString()：将日期转换为本地格式的字符串。

toTimeString()：将时间转换为字符串。

toLocaleTimeString()：将时间转换为本地格式的字符串。

附上全部代码，代码内有详细注释

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时电子时钟</title>
  <!-- 定义样式 -->
  <style>
    .box {
      width: 300px;
      height: 150px;
      background-color: rgb(42, 48, 64);
      margin: 50px auto;
    }

    .oneDay {
      height: 100px;
      width: 100%;
      color: white;
      font-size: 60px;
      font-weight: 600;
      text-align: center;
      line-height: 100px;
    }

    .month {
      height: 50px;
      width: 100%;
      color: white;
      text-align: center;
      letter-spacing: 2px
    }
  </style>
</head>

<body>
  <div class="box"> <!-- 创建一个div容器，设置样式为.box -->
    <div class="oneDay"></div> <!-- 在盒子中创建一个div，设置样式为.oneDay -->
    <div class="month"></div> <!-- 在盒子中创建一个div，设置样式为.month -->
  </div>
  <script>
    const day = [ '一', '二', '三', '四', '五', '六','日'] // 定义一个数组day，包含了一周中每一天的汉字表示
    setInterval(function () { // 创建一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      let nowHours = date.getHours() // 获取当前时间的小时数
      const nowMinutes = date.getMinutes() // 获取当前时间的分钟数
      let nowSecond = date.getSeconds() // 获取当前时间的秒数
      nowHours = nowHours < 10 ? '0' + nowHours : nowHours // 如果当前小时数小于10，则在前面添加0
      nowSecond = nowSecond < 10 ? '0' + nowSecond : nowSecond // 如果当前秒数小于10，则在前面添加0
      // 将当前时间显示在.oneDay的div容器中
      document.querySelector('.oneDay').innerHTML = `${nowHours}:${nowMinutes}:${nowSecond}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒

    setInterval(function () { // 创建另一个定时器
      const date = new Date() // 获取当前时间并存储在变量date中
      const nowMonth = date.getMonth() // 获取当前月份
      const nowDate = date.getDate() // 获取当前日期
      const nowDay = date.getDay() // 获取当前星期几对应的数字
      // 将当前日期和星期几以及月份显示在.month的div容器中
      document.querySelector('.month').innerHTML = `${nowMonth + 1}月${nowDate}日&nbsp星期${day[nowDay-1]}`
    }, 1000) // 设置定时器的时间间隔为1000毫秒
  </script>


</body>

</html>