如何使用JavaScript代码实现动态数字时钟
这篇文章主要介绍“如何使用JavaScript代码实现动态数字时钟”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用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代码实现动态数字时钟”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注蜗牛博客行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。版权声明:如无特殊标注,文章均为本站原创,转载时请以链接形式注明文章出处。
评论