JavaScript電子時(shí)鐘倒計(jì)時(shí)
本文實(shí)例講解了JavaScript電子時(shí)鐘倒計(jì)時(shí)的詳細(xì)代碼,分享給大家供大家參考,具體內(nèi)容如下
JavaScript時(shí)間類
1、獲取時(shí)分秒:
getHours()
getMinutes();
getSeconds();
2、獲取年月日:
getFullYear();
getMonth() + 1;//獲取的月份需要+1;
getDate(); //日期
getDay(); //獲取的是星期,0--》星期天
效果圖:
實(shí)例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>電子時(shí)鐘</title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 200px; height: 100px; background-color: black; } #time{ color: #fff; display: block; font-size: 24px; margin: 0 auto; padding-top: 20px; /*border: 1px solid red;*/ text-align: center; width: 100px; } #timer{ color: green; display: block; font-size: 18px; margin: 0 auto; padding-top: 10px; /*border: 1px solid red;*/ text-align: center; /*width: 100px;*/ } </style> </head> <body> <div id="wrap"> <span id="time"></span> <span id="timer"></span> </div> <script type="text/javascript"> var time =document.getElementById("time"); var timer =document.getElementById("timer"); setInterval(function() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var years = date.getYear(); var dates = date.getDate(); var monts = date.getMonth()+1; var day = date.getDay(); var parses = date.getMilliseconds()%60; switch(day){ case 0: day="日"; case 1: day="一"; case 2: day="二"; case 3: day="三"; case 4: day="四"; case 5: day="五"; case 6: day="六"; } //如果秒數(shù)小于十,在秒數(shù)面前連接一個(gè)0 if(seconds < 10) { seconds = "0" + seconds; } //如果分鐘數(shù)小于十,在分鐘數(shù)面前連接一個(gè)0 if(minutes < 10) { minutes = "0" + minutes; } //如果小時(shí)數(shù)小于十,在小說(shuō)數(shù)面前連接一個(gè)0 if(hours < 10) { hours = "0" + hours; } if(years<1900) { years = years+1900; } if(dates<10) { dates = "0" + dates; } if(monts<10) { monts = "0" + monts; } if(parses<10) { // parses = "0" + parses; } timer.innerHTML = years +"年" +monts+ "月" +dates +"號(hào)"+"星期"+day; time.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + parses; // date.getTime()//返回的是一個(gè)從1970年到當(dāng)前的毫秒數(shù)(時(shí)間戳)(ms) // date.getMonth()//返回的是月份,從0開(kāi)始算 // date.getFullYear(); },10) </script> </body> </html>
以上就是本文的詳細(xì)內(nèi)容,希望對(duì)大家的學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS基于Location實(shí)現(xiàn)訪問(wèn)Url、重定向及刷新頁(yè)面的方法分析
這篇文章主要介紹了JS基于Location實(shí)現(xiàn)訪問(wèn)Url、重定向及刷新頁(yè)面的方法,結(jié)合實(shí)例形式分析了javascript使用Location進(jìn)行URL訪問(wèn)、重定向、頁(yè)面刷新等操作相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)
這篇文章主要介紹了全面解析JavaScript中“&&”和“||”操作符(總結(jié)篇)的相關(guān)資料,需要的朋友可以參考下2016-07-07一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能
一個(gè)不錯(cuò)的可以檢測(cè)多中瀏覽器的函數(shù)和其它功能...2007-04-04js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)
下面小編就為大家?guī)?lái)一篇js遍歷獲取表格內(nèi)數(shù)據(jù)的方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04javascript省市級(jí)聯(lián)功能實(shí)現(xiàn)方法實(shí)例詳解
這篇文章主要介紹了javascript省市級(jí)聯(lián)功能實(shí)現(xiàn)方法,以不同實(shí)例形式分析了JavaScript實(shí)現(xiàn)省市級(jí)聯(lián)菜單的具體技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript中常用的數(shù)組過(guò)濾方法例子
這篇文章主要給大家介紹了關(guān)于JavaScript中常用的數(shù)組過(guò)濾方法的相關(guān)資料,數(shù)組過(guò)濾器方法是JavaScript中使用最廣泛的方法之一,它允許我們快速過(guò)濾出具有特定條件的數(shù)組中的元素,需要的朋友可以參考下2023-11-11JavaScript轉(zhuǎn)換二進(jìn)制編碼為ASCII碼的方法
這篇文章主要介紹了JavaScript轉(zhuǎn)換二進(jìn)制編碼為ASCII碼的方法,涉及javascript編碼轉(zhuǎn)換的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法
iframe的高度需要根據(jù)子頁(yè)面的實(shí)際高度來(lái)進(jìn)行調(diào)整,但是如果子頁(yè)面不在同一域中怎么辦?這時(shí)候腳本沒(méi)有辦法獲取到子頁(yè)面的高度,存在JavaScript跨域的問(wèn)題2013-09-09