电子时钟代码
/*電子時鐘總體樣式設置*/
#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>
總結
- 上一篇： 解决Error:All flavors
- 下一篇： 学python多大年龄可以学车_考驾照的