使用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設置動態(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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
uniapp中實現(xiàn)App自動檢測版本升級的示例代碼
本文主要介紹了uniapp中實現(xiàn)App自動檢測版本升級的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
FireFox下XML對象轉(zhuǎn)化成字符串的解決方法
近,在客戶端解吸xml時候,需要將XML轉(zhuǎn)化成字符串,看了很多文章,介紹的最多的是將XML字符串轉(zhuǎn)化成對象2011-12-12
JavaScript使用lodash實現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝
Lodash?是一個?JavaScript?的工具庫,它提供了一系列的函數(shù)來簡化代碼編寫,本文主要為大家介紹了如何使用lodash實現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝,感興趣的小伙伴可以了解下2023-11-11
JS實現(xiàn)的定時器展示簡單秒表、頁面彈框及跳轉(zhuǎn)操作完整示例
這篇文章主要介紹了JS實現(xiàn)的定時器展示簡單秒表、頁面彈框及跳轉(zhuǎn)操作,結(jié)合實例形式分析了JavaScript時間函數(shù)及頁面元素動態(tài)操作相關使用技巧,需要的朋友可以參考下2020-01-01
JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼
這篇文章主要介紹了JavaScript實現(xiàn)封閉區(qū)域布爾運算的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
JS實現(xiàn)側(cè)邊欄鼠標經(jīng)過彈出框+緩沖效果
本文主要介紹了JS實現(xiàn)側(cè)邊欄鼠標經(jīng)過彈出框+緩沖效果的實現(xiàn)原理與方法步驟。具有很好的參考價值,下面跟著小編一起來看下吧2017-03-03

