js+html+css實(shí)現(xiàn)簡單電子時(shí)鐘
本文實(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-06JavaScript實(shí)現(xiàn)Java中StringBuffer的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Java中StringBuffer的方法,實(shí)例分析了StringBuffer類的實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2015-02-02深入理解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-11BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02