电子时钟代码
/*電子時(shí)鐘總體樣式設(shè)置*/
#clock {
? ? width: 800px;
? ? font-size: 80px;
? ? font-weight: bold;
? ? color: red;
? ? text-align: center;
? ? margin: 20px;
}
/*時(shí)分秒數(shù)字區(qū)域的樣式設(shè)置*/
.box1 {
? ? margin-right: 10px;
? ? width: 100px;
? ? height: 100px;
? ? line-height: 100px;
? ? float: left;
? ? border: gray 1px solid;
}
/*冒號(hào)區(qū)域的樣式設(shè)置*/
.box2 {
? ? width: 30px;
? ? float: left;
? ? margin-right: 10px;
}
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <title>簡(jiǎn)單電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)</title>
?? ?<link rel="stylesheet" href="css/clock.css">
? </head>
? <body οnlοad="getCurrentTime()">
? ? <!--標(biāo)題-->
? ? <h3>簡(jiǎn)單電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)</h3>
?? ?<!--水平線-->
?? ?<hr />
?? ?<!--電子時(shí)鐘區(qū)域-->
?? ?<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>
?? ?//獲取顯示小時(shí)的區(qū)域框?qū)ο?br /> ?? ?var hour = document.getElementById("h");
?? ?//獲取顯示分鐘的區(qū)域框?qū)ο?br /> ?? ?var minute = document.getElementById("m");
?? ?//獲取顯示秒的區(qū)域框?qū)ο?br /> ?? ?var second = document.getElementById("s");
?? ?
?? ?//獲取當(dāng)前時(shí)間
?? ?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時(shí)也顯示成兩位數(shù)
?? ??? ?if(m<10) m = "0"+m; //以確保0-9分鐘也顯示成兩位數(shù)
?? ??? ?if(s<10) s = "0"+s; //以確保0-9秒也顯示成兩位數(shù)
?? ??? ?
?? ??? ?hour.innerHTML= h;
?? ??? ?minute.innerHTML = m;
?? ??? ?second.innerHTML = s;
?? ?}
?? ?//每秒更新一次時(shí)間
?? ?setInterval("getCurrentTime()", 1000);
?? ?</script>
? </body>
</html>
總結(jié)
- 上一篇： 解决Error:All flavors
- 下一篇： vs2005 sp1 补丁的安装问题