小编给大家分享一下javascript如何实现动态数字时钟，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！实现效果代码实现<!DOCTYPE htm
小编给大家分享一下javascript如何实现动态数字时钟，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
实现效果
代码实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; } #box { width: 1000px; height: 300px; background-image:url(1.jpg); line-height: 300px; text-align: center; font-size: 50px; font-weight: 500; margin: 100px auto; } </style></head><body> <div id="box"></div> <script> let box = document.getElementById('box') //不足十位补零 let addZero = val => val < 10 ? '0' + val : val //把阿拉伯数字的星期转化为中国汉字的星期 // 星期映射表 let trans = val => { let obj = { 0: '日', 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六' } return obj[val] } setTime () //获取时间的方法 function setTime() { let time = new Date(); let year = time.getFullYear(); // 获取年 let month = time.getMonth() + 1; // 获取月（是从0到11，所以我们要给他加1） let date = time.getDate(); // 获取日 let day = time.getDay(); // 获取星期几(0是星期日) let hour = time.getHours(); // 获取小时 let min = time.getMinutes(); // 获取分钟 let sec = time.getSeconds(); // 获取秒 let value = year + '年' + addZero(month) + '月' + addZero(date) + '日 星期' + trans(day) + ' '+addZero(hour) + '时' + addZero(min) + '分' + addZero(sec) + '秒' // 把所有的时间拼接到一起 box.innerText = value // console.log(value) // 把拼接好的时间插入到页面 } // 让定时器每间隔一秒就执行一次setTime这个方法（这是实现时钟的核心） setInterval(setTime, 1000) </script></body></html>素材
以上是“JavaScript如何实现动态数字时钟”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: JavaScript如何实现动态数字时钟
本文链接: https://lsjlt.com/news/278442.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0