JS日期对象实现动态时钟

一、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

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;}

JS

        // 获取时针图片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);

四、最终效果及素材

 效果示意

素材

 五、源码

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！