电子时钟代码

最新推荐文章于 2024-04-24 15:45:50 发布

原创最新推荐文章于 2024-04-24 15:45:50 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

这个博客展示了如何使用HTML和CSS创建一个简单的电子时钟，包括时钟的总体样式设置、时分秒数字区域及冒号区域的样式。通过JavaScript获取当前时间并实时更新小时、分钟和秒数，确保显示为两位数。

/*电子时钟总体样式设置*/
#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 onload="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>