JavaScript如何实现页面电子时钟
JavaScript如何实现页面电子时钟
发布时间：2022-06-21 15:58:58 来源：高防服务器网 阅读：98 作者：iii 栏目：开发技术
这篇文章主要介绍了JavaScript如何实现页面电子时钟的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript如何实现页面电子时钟文章都会有所收获，下面我们一起来看看吧。
题目：页面上有一个电子时钟，显示当前的年月日，时分秒，要求自动变化，双位显示，例如：九点九分九秒，显示为09:09:09
代码：
<!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> .box { width: 550px; height: 70px; background-color: seagreen; border: 5px solid #ccc; text-align: center; border-radius: 10px; font-size: 30px; margin: 200px auto; color: #fff; } .box span { line-height: 70px; } </style> </head> <body> <div class="box"> <span class="one"></span> <span class="two"></span> </div> <script> //刷新页面不出错 var timer = setTimeout(function() { var one = document.querySelector('.one'); var two = document.querySelector('.two'); var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]; var day = arr[date.getDay()]; one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day); two.innerHTML = (getTime()); clearInterval(timer); }); //设置定时器 setInterval(function() { //格式化日期 年月日 var one = document.querySelector('.one'); var two = document.querySelector('.two'); var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', ]; var day = arr[date.getDay()]; one.innerHTML = (year + '年' + month + '月' + dates + '日 ' + day); two.innerHTML = (getTime()); }, 1000); //要求封装一个函数返回当前的时分秒 格式：08：08：08 function getTime() { var time = new Date(); var h = time.getHours(); h = h < 10 ? '0' + h : h; var m = time.getMinutes(); m = m < 10 ? '0' + m : m; var s = time.getSeconds(); s = s < 10 ? '0' + s : s; return h + ':' + m + ':' + s; } </script> </body> </html>
关于“JavaScript如何实现页面电子时钟”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript如何实现页面电子时钟”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[