JavaScript實現(xiàn)網(wǎng)頁電子時鐘_第1頁
JavaScript實現(xiàn)網(wǎng)頁電子時鐘_第2頁
JavaScript實現(xiàn)網(wǎng)頁電子時鐘_第3頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第JavaScript實現(xiàn)網(wǎng)頁電子時鐘本文實例為大家分享了JavaScript實現(xiàn)網(wǎng)頁電子時鐘的具體代碼，供大家參考，具體內(nèi)容如下

如圖就是一個簡易的網(wǎng)頁電子時鐘，利用Javascript和html和css就可以制作

div

div

div/div

div/div

/div

div

div/div

div/div

/div

/div

這是html的簡單結構，結構相對簡單，css樣式的話可以根據(jù)自己的喜好去設置，我這里就不把代碼發(fā)出來了

varhour=document.querySelector('.hour');

varsec=document.querySelector('.sec');

varweek=document.querySelector('.week');

vardateBox=document.querySelector('.date-box');

//因為定時器第一次會延時一秒，所以第一次會有一秒延遲，提前調(diào)用一次

time();

//設置定時器，每秒一次

setInterval(time,1000)

//獲取當?shù)貢r間，封裝成函數(shù)

functiontime(){

vardate=newDate();

vary=date.getFullYear();

varm=date.getMonth()+1;

vard=date.getDate();

varh=date.getHours();

varmin=date.getMinutes();

vars=date.getSeconds();

varw=date.getDay();

//補0

m=m10'0'+m:m;

d=d10'0'+d:d;

h=h10'0'+h:h;

min=min10'0'+min:min;

s=s10'0'+s:s;

hour.innerHTML=h+':'+m;

sec.innerHTML=s;

week.innerHTML='星期'+['一','二','三','四','五','六','日'][w-1];

dateBox.innerHTML=y+'年'+m+'月'+d+'日';

}

這是主要的Javascript代碼塊，主要是獲取當前日期，年月日和時間，然后再把獲取的時間日期通過innerHTML這個方法修改到html中，因為需要每秒顯示，所以還需要創(chuàng)建一個定時器，時間為一秒，因為需要每秒顯示不一樣的內(nèi)容，所以需要把顯示的代碼以及獲取時間日期的部分也一起放到定時器當中。因為定時器第一次是有時間延遲的，所以需要在定時器之前調(diào)用一次這個封裝的函數(shù)。還有一個點就是星期的這一部分，因為獲取到的星期是數(shù)字，要把數(shù)字轉為大寫的星期，所以可以

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論