小编给大家分享一下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如何实现动态数字时钟”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。