JS日期对象实现动态时钟

可乐不撒

已于 2022-11-17 20:03:35 修改

阅读量2.4k

点赞数 15

文章标签： javascript css3

于 2022-11-17 20:03:13 首次发布

本文链接：https://blog.csdn.net/qq_41858795/article/details/127909917

版权

一、Date对象使用方法

1.普通函数用法：Date 对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。

2.构造函数用法：Date 还可以当作构造函数使用。对它使用 new 命令，会返回一个 Date 对象的实例。如果不加参数，则显示当前时间.

例:

let data1 = Date()
console.log(data1)
let data2 = new Date()
console.log(data2)

得到结果相同

但第一种方法只能得到当前时间,使用第二种方法可以得到指定时间,返回一个对应指定时间的实例

如new Date('2022-11-17') ；new Date('2022/11/17')；等

Data对象返回的时间戳实际上是指当前时间和格林尼治时间 1970年1月1日,0点0分0秒,相差的毫秒数。简单理解,就是从格林尼治时间 1970年1月1日,0点0分0秒,到现在,过了多少毫秒，在前面添加‘+’号可以将其转换为毫秒数，可以通过计算指定日期的时间戳减去现在的时间戳，就可以得到未来一个时间到现在的时间差，用来实现时间倒数功能

将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数，再通过将剩余时间转换成年月日时分秒等，就可以得到具体倒数时间

二、Date对象的实例方法

get类方法

to类方法

Date.prototype.toUTCString()方法返回对应的 UTC 时间。

Date.prototype.toDateString()方法返回日期字符串，不包含年月日。

Date.prototype.toLocaleDateString() 方法返回一个字符串，代表日期的当地写法，不含时分秒

三、实际案例：日期对象实现动态时钟

HTML

    <!-- 用来显示当前具体时间 -->
    <p></p>
    <!-- 时钟容器 -->
    <div class="clock">
        <!-- 时针 -->
        <div class="h"></div>
        <!-- 分针 -->
        <div class="m"></div>
        <!-- 秒针 -->
        <div class="s"></div>
    </div>

CSS

       * {
            margin: 0;
            padding: 0;
        }
        /* 定位到时钟下方显示当前时间 */
        p {
            position: absolute;
            width: 350px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: skyblue;
            top: 500px;
            left: 50%;
            transform: translateX(-50%);
        }
        /* 时钟容器 */
        .clock {
            position: relative;
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background: url(./images/clock.jpeg) no-repeat;
            background-size: contain;
        }

        .clock div {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        /* 时针 */
        .h {
            background: url(./images/hours.png) no-repeat center;
            background-size: contain;
        }
        /* 分针 */
        .m {
            background: url(./images/minute.png) no-repeat center;
            background-size: contain;
        }
        /* 秒针 */
        .s {
            background: url(./images/second.png) no-repeat center;
            background-size: contain;
        }

        // 获取时针图片
        let hour = document.querySelector('.h')
        // 获取分针图片
        let minute = document.querySelector('.m')
        // 获取秒针图片
        let second = document.querySelector('.s')
        // 定义一个当前时间函数
        let nowTime = function () {
            // 获取当前时间戳
            let data = new Date()
            // 获取年份
            let y = data.getFullYear()
            // 获取月份(注意月份要+1才是现实月份,data.getMonth()返回的值是0~11)
            let mm = data.getMonth() + 1
            // 获取日期
            let d = data.getDate()
            // 获取小时
            let h = data.getHours()
            // 获取分钟
            let m = data.getMinutes()
            // 获取秒数
            let s = data.getSeconds()
            // 获取毫秒数(为了给秒针添加旋转更精细)
            let ms = data.getMilliseconds()
            // 获取页面中p标签
            let p = document.querySelector('p')
            // 给p标签里添加内容,显示当前具体时间
            p.innerHTML = `现在时间是${y}年${mm}月${d}月${h}时${m}分${s}秒`

            // 设置秒针旋转度数
            second.style.transform = "rotate(" + (s + ms / 1000) * 6 + "deg)"
            // 设置分针旋转度数
            minute.style.transform = "rotate(" + (m + s / 60) * 6 + "deg)"
            // 设置时针旋转度数
            hour.style.transform = "rotate(" + (h % 12 + m / 60) * 30 + "deg)"
        }
        // 先执行一次,可以让页面打开是就会有显示时间
        nowTime()
        // 设置定时器,每10ms执行一次nowTime()函数
        // 设定的时间可以改变函数执行的间隔,数字越小,页面秒针旋转越流畅
        setInterval(nowTime, 10);

四、最终效果及素材

效果示意

素材

五、源码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 定位到时钟下方显示当前时间 */
        p {
            position: absolute;
            width: 350px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: skyblue;
            top: 500px;
            left: 50%;
            transform: translateX(-50%);
        }

        /* 时钟容器 */
        .clock {
            position: relative;
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background: url(./images/clock.jpeg) no-repeat;
            background-size: contain;
        }

        .clock div {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        /* 时针 */
        .h {
            background: url(./images/hours.png) no-repeat center;
            background-size: contain;
        }

        /* 分针 */
        .m {
            background: url(./images/minute.png) no-repeat center;
            background-size: contain;
        }

        /* 秒针 */
        .s {
            background: url(./images/second.png) no-repeat center;
            background-size: contain;
        }
    </style>
</head>

<body>
    <!-- 用来显示当前具体时间 -->
    <p></p>
    <!-- 时钟容器 -->
    <div class="clock">
        <!-- 时针 -->
        <div class="h"></div>
        <!-- 分针 -->
        <div class="m"></div>
        <!-- 秒针 -->
        <div class="s"></div>
    </div>

    <script>
        // 获取时针图片
        let hour = document.querySelector('.h')
        // 获取分针图片
        let minute = document.querySelector('.m')
        // 获取秒针图片
        let second = document.querySelector('.s')
        // 定义一个当前时间函数
        let nowTime = function () {
            // 获取当前时间戳
            let data = new Date()
            // 获取年份
            let y = data.getFullYear()
            // 获取月份(注意月份要+1才是现实月份,data.getMonth()返回的值是0~11)
            let mm = data.getMonth() + 1
            // 获取日期
            let d = data.getDate()
            // 获取小时
            let h = data.getHours()
            // 获取分钟
            let m = data.getMinutes()
            // 获取秒数
            let s = data.getSeconds()
            // 获取毫秒数(为了给秒针添加旋转更精细)
            let ms = data.getMilliseconds()
            // 获取页面中p标签
            let p = document.querySelector('p')
            // 给p标签里添加内容,显示当前具体时间
            p.innerHTML = `现在时间是${y}年${mm}月${d}月${h}时${m}分${s}秒`

            // 设置秒针旋转度数
            second.style.transform = "rotate(" + (s + ms / 1000) * 6 + "deg)"
            // 设置分针旋转度数
            minute.style.transform = "rotate(" + (m + s / 60) * 6 + "deg)"
            // 设置时针旋转度数
            hour.style.transform = "rotate(" + (h % 12 + m / 60) * 30 + "deg)"
        }
        // 先执行一次,可以让页面打开是就会有显示时间
        nowTime()
        // 设置定时器,每10ms执行一次nowTime()函数
        // 设定的时间可以改变函数执行的间隔,数字越小,页面秒针旋转越流畅
        setInterval(nowTime, 10);
    </script>
</body>

</html>