css如何制作時鐘？

代碼如下:

& lt！DOCTYPE html & gt

& lthtml lang = & quot恩& quotxmlns = & quothttp://www.w3.org/1999/xhtml" & gt；

& lthead & gt

& ltmeta charset = & quotutf-8 & quot；/& gt；

& lttitle & gt畫布實(shí)例制作時鐘

& lt/head & gt；

& ltbody & gt

& lt畫布id = & quot畫布& quotwidth = & quot500 & quotheight = & quot500 & quot& gt

你的瀏覽器版本太低了！可以改！

& lt/canvas & gt；

& lt腳本& gt

//獲取畫布

var canvas = document . getelementbyid(& quot；畫布& quot);

//設(shè)置環(huán)境

var cxt = canvas . get context(& quot；2d & quot);

//制作一個時鐘函數(shù)

函數(shù)DrawClock() {

//清除畫布

cxt.clearRect(0，0，500，500)；

//獲取當(dāng)前時間的小時、分鐘和秒

var now = new Date()；

var hour = now . get hours()；

var min = now . get minutes()；

var sec = now . get seconds()；

//必須獲取小時的浮點(diǎn)類型(小時

小數(shù)->)。成小時)

小時=小時

分鐘/60；

//將24小時轉(zhuǎn)換為12小時

hour = hour & gt12 ?小時- 12:小時；

//撥打電話

cxt . begin path()；

cxt.lineWidth = 10

cxt.strokeStyle = & quot# ABCDEF & quot；

cxt.arc(250，250，200，0，360，false)；

cxt . stroke()；

cxt . close path()；

//縮放

//時針

for(var I = 0；我& lt12;i

) {

cxt . save()；

cxt . line width = 7；

cxt.strokeStyle = & quot紅色& quot；

//設(shè)置0，0點(diǎn)

cxt.translate(250，250)；

//再次設(shè)置旋轉(zhuǎn)角度。

cxt.rotate(i * 30 * Math。PI/180)；

cxt . begin path()；

cxt.moveTo(0，-170)；

cxt.lineTo(0，-190)；

cxt . close path()；

cxt . stroke()；

cxt . restore()；

}

//分針

for(var I = 0；我& lt60;i

) {

//為了避免不同顏色的重疊，

//不要在時針刻度與分針刻度重疊的位置畫分針。

if (i % 5 == 0)繼續(xù)；

cxt . save()；

//設(shè)置刻度粗細(xì)

cxt . line width = 5；

cxt.strokeStyle = & quot紫色& quot；

//設(shè)置畫布的0，0點(diǎn)

cxt.translate(250，250)；

//設(shè)置旋轉(zhuǎn)角度

cxt.rotate(i * 6 * Math。PI/180)；

//繪制分針刻度

cxt . begin path()；

cxt.moveTo(0，-180)；

cxt.lineTo(0，-190)；

cxt . close path()；

cxt . stroke()；

cxt . restore()；

}

//時針

cxt . save()；

//設(shè)置時針樣式

cxt . line width = 7；

cxt.strokeStyle = & quot粉色& quot；

//設(shè)置不同尺寸之間的0，0點(diǎn)空

cxt.translate(250，250)；

//設(shè)置旋轉(zhuǎn)角度

cxt.rotate(小時* 30 *數(shù)學(xué)。PI/180)；

cxt . begin path()；

cxt.moveTo(0，-140)；

cxt.lineTo(0，10)；

cxt . close path()；

cxt . stroke()；

cxt . restore()；

//分針

cxt . save()；

//設(shè)置分針樣式

cxt . line width = 5；

cxt.strokeStyle = & quot橙色& quot；

//設(shè)置不同尺寸之間的0，0點(diǎn)空

cxt.translate(250，250)；

//設(shè)置旋轉(zhuǎn)角度

cxt.rotate(最小* 6 *數(shù)學(xué)。PI/180)；

cxt . begin path()；

cxt.moveTo(0，-160)；

cxt.lineTo(0，15)；

cxt . close path()；

cxt . stroke()；

cxt . restore()；

//秒針

cxt . save()；

//樣式

cxt.strokeStyle = & quot黃色& quot；

cxt . line width = 3；

//重置0，0點(diǎn)

cxt.translate(250，250)；

//設(shè)置旋轉(zhuǎn)角度

cxt.rotate(秒* 6 *數(shù)學(xué)。PI/180)；

//畫一幅畫

cxt . begin path()；

cxt.moveTo(0，-170)；

cxt.lineTo(0，20)；

cxt . stroke()；

//畫時針、分針、秒針的交點(diǎn)。

cxt . begin path()；

cxt.arc(0，0，5，0，360，false)；

cxt . close path()；

//設(shè)置填充樣式

cxt.fillStyle = & quot藍(lán)色& quot；

cxt . fill()；

//設(shè)置筆畫樣式->；秒針已經(jīng)擺好了。

cxt . stroke()；

//將點(diǎn)設(shè)置在秒針的前面

cxt . begin path()；

cxt.arc(0，-150，5，0，360，false)；

cxt . close path()；

//設(shè)置填充樣式

cxt.fillStyle = & quot藍(lán)色& quot；

cxt . fill()；

//設(shè)置筆畫樣式

cxt . stroke()；

cxt . close path()；

cxt . restore()；

}

//調(diào)用函數(shù)

draw clock()；

//設(shè)置時鐘轉(zhuǎn)動。

setInterval(DrawClock，1000)；

& lt/script & gt；

& lt/body & gt；

& lt/html & gt；

總結(jié)

以上是生活随笔為你收集整理的css怎么制作时钟（css做时钟）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。