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

發(fā)布時(shí)間：2022-06-21 15:59:45 來(lái)源：億速云閱讀：122 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要講解了“JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘”吧！

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

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

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

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

4.通過的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>

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

感謝各位的閱讀，以上就是“JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)JavaScript如何實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)時(shí)鐘這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

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

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽