电子时钟代码

电子时钟代码

全栈程序员-用户IM • 2022年6月28日上午9:16 • 未分类

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

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