js+html+css實(shí)現(xiàn)簡單電子時(shí)鐘
更新時(shí)間：2022年06月20日 08:40:53 作者：好多bug
這篇文章主要為大家詳細(xì)介紹了js+html+css實(shí)現(xiàn)簡單電子時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js+html+css實(shí)現(xiàn)簡單電子時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
最終結(jié)果：
HTML部分
<!DOCTYPE html> <html> ?? ?<head> ?? ??? ?<meta charset="utf-8"> ?? ??? ?<title>2.1簡單電子時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)</title> ?? ??? ?<link rel="stylesheet" type="text/css" href="css/clock.css"/> ?? ?</head> ?? ?<body onload="getCurrentTime()"> ?? ??? ?<h3>簡單電子時(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> ?? ?</body> </html>
css部分
/* 電子時(shí)鐘的總體樣式設(shè)置 */
#clock{
?? ?width:800px;
?? ?font-size: 80px;
?? ?font-weight: bold;
?? ?color: #008B8B;
?? ?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;
}js部分
——使用外鏈時(shí)不需加<script>標(biāo)簽，不使用外鏈則直接寫在<body>標(biāo)簽內(nèi)
<script>
?? ??? ??? ?//獲取顯示小時(shí)的區(qū)域框?qū)ο?
?? ??? ??? ?var hour=document.getElementById('h');
?? ??? ??? ?//獲取顯示分鐘的區(qū)域框?qū)ο?
?? ??? ??? ?var minute=document.getElementById('m');
?? ??? ??? ?//獲取顯示秒的區(qū)域框?qū)ο?
?? ??? ??? ?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>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
- 使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
- JS+HTML實(shí)現(xiàn)經(jīng)典游戲吃豆人
- JavaScript markdown 編輯器實(shí)現(xiàn)雙屏同步滾動(dòng)
- JavaScript+Node.js寫一款markdown解析器
- js正則匹配markdown里的圖片標(biāo)簽的實(shí)現(xiàn)
- JS加載解析Markdown文檔過程詳解
- Vuejs中使用markdown服務(wù)器端渲染的示例
- 一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown
相關(guān)文章
TypeScript中的互斥類型實(shí)現(xiàn)方法示例
用了一年時(shí)間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
淺談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽)
下面小編就為大家?guī)硪黄獪\談bootstrap源碼分析之scrollspy(滾動(dòng)偵聽)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
require.js是一個(gè)js腳本加載器，它遵循AMD(Asynchronous Module Definition)規(guī)范，實(shí)現(xiàn)js腳本的異步加載，不阻塞頁面的渲染和其后的腳本的執(zhí)行，并提供了在加載完成之后的執(zhí)行相應(yīng)回調(diào)函數(shù)的功能2017-07-07
這篇文章主要介紹了JS獲取Table中td值的方法,實(shí)例分析了javascript操作table中td的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)Java中StringBuffer的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中StringBuffer的方法,實(shí)例分析了StringBuffer類的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了很棒的js Tab選項(xiàng)卡切換效果，簡單的選項(xiàng)卡切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
深入理解javascript嚴(yán)格模式(Strict Mode)
Strict mode是JavaScript1.8.5引進(jìn)的技術(shù)，但還沒有瀏覽器確實(shí)可靠的實(shí)現(xiàn)了嚴(yán)格模式，所以使用時(shí)要小心并且多測試。Strict mode可以應(yīng)用于整個(gè)腳本，也可以適合于單個(gè)函數(shù)。2014-11-11
JavaScript?中的類（Class）是一種新的語言特性，它讓我們可以使用面向?qū)ο缶幊痰乃枷雭砀臃奖愕亟M織和管理代碼。在本文中，我們將詳細(xì)介紹?JavaScript?中的類特性，感興趣的同學(xué)可以借鑒閱讀2023-05-05
BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了推薦閱讀的js快速判斷IE瀏覽器(兼容IE10與IE11),因?yàn)閕e11取消了很多低版本的判斷，很多js都需要修改了，這里簡單介紹下需要的朋友可以參考下2015-12-12