电子时钟代码

全栈程序员站长

发布于 2022-09-14 17:55:48

8240

大家好，又见面了，我是你们的朋友全栈君。

/*电子时钟总体样式设置*/ #clock { width: 800px; font-size: 80px; font-weight: bold; color: red; text-align: center; margin: 20px; } /*时分秒数字区域的样式设置*/ .box1 { margin-right: 10px; width: 100px; height: 100px; line-height: 100px; float: left; border: gray 1px solid; } /*冒号区域的样式设置*/ .box2 { width: 30px; float: left; margin-right: 10px; }

<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>简单电子时钟的设计与实现</title> <link rel=”stylesheet” href=”css/clock.css”> </head> <body οnlοad=”getCurrentTime()”> <!–标题–> <h3>简单电子时钟的设计与实现</h3> <!–水平线–> <hr /> <!–电子时钟区域–> <div id=”clock”> <div class=”box1″ id=”h”></div> <div class=”box2″>:</div> <div class=”box1″ id=”m”></div> <div class=”box2″>:</div> <div class=”box1″ id=”s”></div> </div> <script> //获取显示小时的区域框对象 var hour = document.getElementById(“h”); //获取显示分钟的区域框对象 var minute = document.getElementById(“m”); //获取显示秒的区域框对象 var second = document.getElementById(“s”); //获取当前时间 function getCurrentTime(){ var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); if(h<10) h = “0”+h; //以确保0-9时也显示成两位数 if(m<10) m = “0”+m; //以确保0-9分钟也显示成两位数 if(s<10) s = “0”+s; //以确保0-9秒也显示成两位数 hour.innerHTML= h; minute.innerHTML = m; second.innerHTML = s; } //每秒更新一次时间 setInterval(“getCurrentTime()”, 1000); </script> </body> </html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154099.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html