快捷導航

使用Javascript在HTML中顯示實時時間

更新時間：2022年06月19日 06:50:46 作者：lihuiGG520

這篇文章主要為大家詳細介紹了使用Javascript在HTML中顯示實時時間，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了用Javascript在HTML中顯示實時時間的具體代碼，供大家參考，具體內(nèi)容如下

方法如下：

1. 在script中建立方法time；
2. 創(chuàng)建新的Date對象date，并通過使用Date的內(nèi)置方法給year、month等賦值；
3. 通過連接符號將各個時間連接起來；
4. 使用document.getElementById(“time”).innerHTML將其顯示到HTML主頁中；
5. 使用setInterval設(shè)置動態(tài)更新時間，即實時時間；

注意：

（1）獲取年份的方法前面有full；
（2）月份的表示從零開始；
（3）周的獲取值表示為數(shù)字，可以通過switch的方法轉(zhuǎn)換，也可以通過下面代碼中的方法將其轉(zhuǎn)化為星期幾；
（4）對于時分秒的兩位表示，可以在前面加上符號0；

參考代碼見下：

<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>日期和時間</title>
? ? ? ? <script>
? ? ? ? ? ? function time(){
? ? ? ? ? ? ? ? var date = new Date();
? ? ? ? ? ? ? ? var year = date.getFullYear();
? ? ? ? ? ? ? ? var month = date.getMonth()+1;
? ? ? ? ? ? ? ? var day = date.getDate();
? ? ? ? ? ? ? ? var week = date.getDay();
? ? ? ? ? ? ? ? week="星期"+"日一二三四五六".charAt(week);
? ? ? ? ? ? ? ? /*switch(week){
? ? ? ? ? ? ? ? ? ? case 1:
? ? ? ? ? ? ? ? ? ? ? ? week="星期一";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? ? ? ? ? week="星期二";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 3:
? ? ? ? ? ? ? ? ? ? ? ? week="星期三";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 4:
? ? ? ? ? ? ? ? ? ? ? ? week="星期四";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 5:
? ? ? ? ? ? ? ? ? ? ? ? week="星期五";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 6:
? ? ? ? ? ? ? ? ? ? ? ? week="星期六";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case 0:
? ? ? ? ? ? ? ? ? ? ? ? week="星期日";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }*/
? ? ? ? ? ? ? ? var hour =date.getHours();
? ? ? ? ? ? ? ? hour=hour<10?"0"+hour:hour;
? ? ? ? ? ? ? ? var minute =date.getMinutes();
? ? ? ? ? ? ? ? minute=minute<10?"0"+minute:minute;
? ? ? ? ? ? ? ? var second = date.getSeconds();
? ? ? ? ? ? ? ? second=second<10?"0"+second:second;
? ? ? ? ? ? ? ? var currentTime = year+"-"+month+"-"+day+" ?"+week+" ? "+hour+":"+minute+":"+second;
? ? ? ? ? ? ? ? document.getElementById("time").innerHTML=currentTime;
? ? ? ? ? ? }
? ? ? ? ? ? setInterval("time()",1000);
? ? ? ? </script>
? ? </head>
? ? <body onload="time()">
? ? ? ? <span id="time"></span>
? ? </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: