Java Script制作网页实时时钟，与实时时间一致（提供源码和资源下载），点赞加关注更多案例持续更新~

十七同志

已于 2024-05-08 11:34:43 修改

阅读量252

点赞数 6

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

于 2023-11-14 14:49:35 首次发布

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

版权

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

7 篇文章 0 订阅

订阅专栏

下载链接：

http://链接：https://pan.baidu.com/s/1c-4NSvi0uwA9_KU5g5bpNQ?pwd=r02t 提取码：r02t

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

思路

1. 创建日期对象获取当前时间
2. 多次定时器，重复获取时间，让指针动起来

3.计算好时针分针秒针每走一次的角度变化

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">
<!-- 文档类型声明声明为 HTML5，语言为英语 -->
<head>
  <meta charset="UTF-8">
  <title>网页实时时钟（图形版）</title>
  <!-- 设置字符编码和页面标题 -->
  <style>
    /* CSS 样式 */
    * {
      box-sizing: border-box;
    }
    /* 重置样式表 */
    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 50px auto 0;
      position: relative;
    }
    /* 时钟盘的样式定义 */
    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }
    /* 时针的样式定义 */
    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(0deg);
    }
    /* 分针的样式定义 */
    .ss {
      background-image: url(./images/second.png);
      transform: rotate(0deg);
    }
  </style>
</head>
<!-- HTML 页面主体部分 -->
<body>
  <div class="clock">
    <!-- 时钟盘的 html 结构 -->
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <!-- JavaScript 代码 -->
  <script>
    /*
      知识点：
        1. 创建日期对象 获取当前时间
        2. 多次定时器，重复获取时间，让指针动起来
    */

    const hour = document.querySelector('.hh') // 获取时针 div 元素
    const minute = document.querySelector('.mm') // 获取分针 div 元素
    const second = document.querySelector('.ss') // 获取秒针 div 元素
    const nowTime = setInterval(function () {
      let nowDate = new Date() // 创建日期对象，获取当前时间
      const nowHour = nowDate.getHours() // 获取当前小时数
      const nowMinute = nowDate.getMinutes() // 获取当前分钟数
      const nowSecond = nowDate.getSeconds() // 获取当前秒数
      hour.style.transform = `rotate(${nowHour * 30}deg)` // 按照小时数计算旋转角度
      minute.style.transform = `rotate(${nowMinute * 6}deg)` // 按照分钟数计算旋转角度
      second.style.transform = `rotate(${nowSecond * 6}deg)` // 按照秒数计算旋转角度
    }, 1000) // 每隔 1 秒执行一次定时器
  </script>
</body>
<!-- HTML 页面结束 -->
</html>

十七同志

关注

6
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
Java Script制作网页实时时钟，与实时时间一致（提供源码和资源下载），点赞加关注更多案例持续更新~

2. 多次定时器，重复获取时间，让指针动起来。效果动图，此效果图的时间仅仅是当时录制的时间。3.计算好时针分针秒针每走一次的角度变化。详细注释都在代码中，直接放上完整代码。1. 创建日期对象获取当前时间。
复制链接

扫一扫