第JS實現電子時鐘入門操作本文實例為大家分享了JS實現電子時鐘入門操作的具體代碼，供大家參考，具體內容如下

代碼呈上：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

h1{

text-align:center;

}

/style

/head

body

h1/h1

/body

script

varh1=document.getElementsByTagName("h1")[0]

functionsetH1(){

//獲取時間戳

vardate=newDate();

varyear=date.getFullYear();

varmonth=date.getMonth()+1;

varriqi=date.getDate();

varhour=date.getHours();

varminute=date.getMinutes();

varsecond=date.getSeconds();

//拼接成指定格式

//varstr=year+"/"+month+"/"+riqi+"/"+""+hour+":"+minute+":"+second

varstr=`${year}/${month}/${riqi}${hour}:${minute}:${second}`

//通過innerHTML對標簽的內容進行獲取或修改

h1.innerHTML=str;

}

//函數的執行

setH1();

vartimer=setInterval(function(){

setH1();

},1000)//每間隔1000毫秒（即1秒鐘），執行一次函數function

/script

/html

講解要點：

1.getElementsByTagName返回的是類數組的集合

所以要用[0]來讀取元素的值。

varh1=document.getElementsByTagName("h1")[0]

2.date.getMonth()得到的是一個介于0到11之間的整數。

所以要執行+1操作才能顯示正確的月份。

varmonth=date.getMonth()+1;

效果展示：

js不僅可以實現電子時鐘，也可以實現帶有表盤的時鐘。

代碼呈上：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

style

*{

margin:0;padding:0;

}

.clock{

width:200px;

height:200px;

border:10pxsolidlightskyblue;

border-radius:50%;

margin:0auto;

box-shadow:5px5px5pxlightgray;

background-color:#fff;

position:relative;

}

.clockp{

width:200px;

height:20px;

/*background-color:aquamarine;*/

line-height:20px;

position:absolute;

top:90px;

}

.clockpspan{

display:block;/*不改成塊標簽不支持旋轉*/

width:20px;

height:20px;

line-height:20px;

text-align:center;

/*background-color:brown;*/

}

#hour{

position:absolute;

transform-origin:centerbottom;

width:6px;

height:50px;

background-color:tomato;

left:97px;

top:50px;

}

#minute{

position:absolute;

transform-origin:centerbottom;

width:4px;

height:70px;

background-color:deepskyblue;

left:98px;

top:30px;

}

#second{

position:absolute;

transform-origin:centerbottom;

width:2px;

height:90px;

background-color:hotpink;

left:99px;

top:10px;

}

/style

/head

body

div

pspan1/span/p

pspan2/span/p

pspan3/span/p

pspan4/span/p

pspan5/span/p

pspan6/span/p

pspan7/span/p

pspan8/span/p

pspan9/span/p

pspan10/span/p

pspan11/span/p

pspan12/span/p

divid="hour"/div

divid="minute"/div

divid="second"/div

/div

/body

script

//獲取數字

varps=document.getElementsByTagName("p");

//獲取三個表針

vardHour=document.getElementById("hour");

vardMinute=document.getElementById("minute");

vardSecond=document.getElementById("second");

//設置定時器

vartimer=null;

//設置數字的位置

functionsetNums(){

for(vari=0;ips.length;i++){

ps[i].style.transform=`rotate(${120+i*30}deg)`;

//獲取p下邊的span標簽}

varspan=ps[i].getElementsByTagName("span")[0];

span.style.transform=`rotate(${((120+i*30)*-1)}deg`;

}

}

setNums();

//開啟定時器

//timer=setInterval(function(){},1000)

每1000毫秒執行一次function（）

timer=setInterval(function(){

changeZhen();

},1000)

//獲取時間戳

functionchangeZhen(){

vardate=newDate();

vars=date.getSeconds();

varm=date.getMinutes()+s/60;

varh=date.getHours()+m/60;

dSecond.style.transform=`rotate(${s*6}deg)`;

dMinute.style.transform=`rotate(${m*6}deg)`;

dHour.style.transform=`rotate(${h*30}deg)`;

}

/script

/html

講解要點：

1.實現思路

表盤：首先用border-radius構造一個圓框，接著用12個p標簽承載12個span標簽并旋轉p標簽，由于旋轉后，數字方向不正確，所以將span標簽的類型改為塊標簽后，通過旋轉改正各數字的方向。

表針：用三個矩形分別代表時針、分針和秒針，通過js函數實現他們在規定時間內旋轉的角度。

2.行標簽不支持旋轉

所以要將span標簽改為塊標簽后再使用旋轉。

.clockpspan{

display:block;/*不改成塊標簽不支持旋轉*/

width:20px;

height:20px;

line-height:20px;

text-align:center;