JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘

更新時(shí)間：2022年06月21日 12:19:03 作者：Cairo960918

這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下

設(shè)計(jì)思路：

1先建立一個(gè)數(shù)組保存帶有0?9數(shù)字的10張圖片;

2.通過(guò)GETDATE（）獲得本地時(shí)間保存在變量數(shù)值指明MyTime中;

3. getHours（）返回的是24進(jìn)制即0~23的整數(shù)，getMinutes（）方法返回一個(gè)處于0到59之間的整數(shù)，getSeconds（）方法返回一個(gè)處于0到59之間的整數(shù);

4.通過(guò)的setTimeout（）每隔1秒調(diào)用一次顯示（）函數(shù)改變圖像對(duì)象的SRC屬性。

串對(duì)象的的charAt（ID）方法：返回指定位置處的字符，標(biāo)識(shí)為要尋找的字符的位置的索引整數(shù)，0對(duì)應(yīng)左邊第1個(gè)字符，1對(duì)應(yīng)左邊第2個(gè)字符，如喂的的charAt（1 ）則是è;

代碼如下：

<html>
<head>
<title>時(shí)鐘</title>
<meta charset="utf-8">
<style>
*{
?? ?padding:0;
?? ?margin:0;
?? ?}
</style>
<script>
function show(){
?? ?var images=new Array("./images/s0.png","./images/s1.png","./images/s2.png","./images/s3.png","./images/s4.png","./images/s5.png","./images/s6.png","./images/s7.png","./images/s8.png","./images/s9.png");
?? ?var myTime=new Date();
?? ?var hours=myTime.getHours();
?? ?var minutes=myTime.getMinutes();
?? ?var seconds=myTime.getSeconds();
?? ?if(hours<=9){hours="0"+hours;}//補(bǔ)足兩位
?? ?if(minutes<=9){minutes="0"+minutes;}
?? ?if(seconds<=9){seconds="0"+seconds}
?? ?var theString=""+hours+minutes+seconds;//轉(zhuǎn)換為字符串
?? ?document.getElementById("img0").src=images[theString.charAt(0)];
?? ?document.getElementById("img1").src=images[theString.charAt(1)];
?? ?document.getElementById("img2").src=images[theString.charAt(2)];
?? ?document.getElementById("img3").src=images[theString.charAt(3)];
?? ?document.getElementById("img4").src=images[theString.charAt(4)];
?? ?document.getElementById("img5").src=images[theString.charAt(5)];
?? ?setTimeout("show()",1000);
?? ?}
</script>
</head>
<body onLoad="show()">
<img id="img0" /><img id="img1" />時(shí)<img id="img2" /><img id="img3" />分<img id="img4" /><img id="img5" />
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實(shí)例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
JavaScript中數(shù)組遍歷方法合集大全
在JavaScript中數(shù)組遍歷是常見(jiàn)的操作,有多種方法可以實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組遍歷方法合集的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)
這篇文章主要介紹了js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
JS實(shí)現(xiàn)向iframe中表單傳值的方法
這篇文章主要介紹了JS實(shí)現(xiàn)向iframe中表單傳值的方法,涉及js針對(duì)頁(yè)面元素及表單屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
JavaScript 中Date對(duì)象的格式化代碼方法匯總
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用，所以需要進(jìn)行格式化，下面小編給大家?guī)?lái)了三種js date對(duì)象格式化實(shí)例代碼，需要的朋友參考下吧
2017-09-09
JS實(shí)現(xiàn)圖片高斯模糊切換效果的焦點(diǎn)圖實(shí)例
這篇文章主要給大家介紹了利用原生JS如何實(shí)現(xiàn)圖片高斯模糊切換效果的焦點(diǎn)圖，文中給出了完整的實(shí)例代碼，相信對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，下面來(lái)一起看看吧。
2017-01-01
JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法分析
這篇文章主要介紹了JS匿名函數(shù)和匿名自執(zhí)行函數(shù)概念與用法,結(jié)合實(shí)例形式分析了匿名函數(shù)和匿名自執(zhí)行函數(shù)的概念、功能、應(yīng)用場(chǎng)景及相關(guān)使用技巧,需要的朋友可以參考下
2018-03-03
js中的for如何實(shí)現(xiàn)foreach中的遍歷
js中沒(méi)有foreach這個(gè)關(guān)鍵字，但是可以用var v in array來(lái)實(shí)現(xiàn)遍歷，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-05-05
js 表格拖拽效果實(shí)例代碼 (IE only)
拖拽交換Table的列（I.E. ONLY）
2010-02-02
Javascript 靜態(tài)頁(yè)面實(shí)現(xiàn)隨機(jī)顯示廣告的辦法
最近在做私服發(fā)布站時(shí)，客戶要求實(shí)現(xiàn)廣告隨機(jī)排序，而且要求在html頁(yè)面實(shí)現(xiàn)，也就是說(shuō)必須使用javascript來(lái)完成了。
2010-11-11