js+html+css實現(xiàn)簡單電子時鐘

更新時間：2022年06月20日 08:40:53 作者：好多bug

這篇文章主要為大家詳細(xì)介紹了js+html+css實現(xiàn)簡單電子時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js+html+css實現(xiàn)簡單電子時鐘的具體代碼，供大家參考，具體內(nèi)容如下

最終結(jié)果：

HTML部分

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>2.1簡單電子時鐘的設(shè)計與實現(xiàn)</title>
?? ??? ?<link rel="stylesheet" type="text/css" href="css/clock.css"/>
?? ?</head>
?? ?<body onload="getCurrentTime()">
?? ??? ?<h3>簡單電子時鐘的設(shè)計與實現(xiàn)</h3>
?? ??? ?<hr >
?? ??? ?<!-- 電子時鐘區(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>
?? ?</body>
</html>

css部分

/* 電子時鐘的總體樣式設(shè)置 */
#clock{
?? ?width:800px;
?? ?font-size: 80px;
?? ?font-weight: bold;
?? ?color: #008B8B;
?? ?text-align: center;
?? ?margin: 20px;
}
/* 時分秒數(shù)字區(qū)域的樣式設(shè)置 */
.box1{
?? ?margin-right: 10px;
?? ?width: 100px;
?? ?height: 100px;
?? ?line-height: 100px;
?? ?float: left;
?? ?border: gray 1px solid;
}
/* 冒號區(qū)域的樣式設(shè)置 */
.box2{
?? ?width: 30px;
?? ?float: left;
?? ?margin-right: 10px;
}

js部分

——使用外鏈時不需加<script>標(biāo)簽，不使用外鏈則直接寫在<body>標(biāo)簽內(nèi)

<script>
?? ??? ??? ?//獲取顯示小時的區(qū)域框?qū)ο?
?? ??? ??? ?var hour=document.getElementById('h');
?? ??? ??? ?//獲取顯示分鐘的區(qū)域框?qū)ο?
?? ??? ??? ?var minute=document.getElementById('m');
?? ??? ??? ?//獲取顯示秒的區(qū)域框?qū)ο?
?? ??? ??? ?var second=document.getElementById('s');
?? ??? ??? ?
?? ??? ??? ?//獲取當(dāng)前時間
?? ??? ??? ?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ù)
?? ??? ??? ??? ?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;
?? ??? ??? ?}
?? ??? ??? ?//每秒更新一次時間
?? ??? ??? ?setInterval('getCurrentTime()',1000);
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: