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畫布實例制作時鐘

& 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);

//設置環境

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

//制作一個時鐘函數

函數DrawClock() {

//清除畫布

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

//獲取當前時間的小時、分鐘和秒

var now = new Date()；

var hour = now . get hours()；

var min = now . get minutes()；

var sec = now . get seconds()；

//必須獲取小時的浮點類型(小時

小數->)。成小時)

小時=小時

分鐘/60；

//將24小時轉換為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；

//設置0，0點

cxt.translate(250，250)；

//再次設置旋轉角度。

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)繼續；

cxt . save()；

//設置刻度粗細

cxt . line width = 5；

cxt.strokeStyle = & quot紫色& quot；

//設置畫布的0，0點

cxt.translate(250，250)；

//設置旋轉角度

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()；

//設置時針樣式

cxt . line width = 7；

cxt.strokeStyle = & quot粉色& quot；

//設置不同尺寸之間的0，0點空

cxt.translate(250，250)；

//設置旋轉角度

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

cxt . begin path()；

cxt.moveTo(0，-140)；

cxt.lineTo(0，10)；

cxt . close path()；

cxt . stroke()；

cxt . restore()；

//分針

cxt . save()；

//設置分針樣式

cxt . line width = 5；

cxt.strokeStyle = & quot橙色& quot；

//設置不同尺寸之間的0，0點空

cxt.translate(250，250)；

//設置旋轉角度

cxt.rotate(最小* 6 *數學。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點

cxt.translate(250，250)；

//設置旋轉角度

cxt.rotate(秒* 6 *數學。PI/180)；

//畫一幅畫

cxt . begin path()；

cxt.moveTo(0，-170)；

cxt.lineTo(0，20)；

cxt . stroke()；

//畫時針、分針、秒針的交點。

cxt . begin path()；

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

cxt . close path()；

//設置填充樣式

cxt.fillStyle = & quot藍色& quot；

cxt . fill()；

//設置筆畫樣式->；秒針已經擺好了。

cxt . stroke()；

//將點設置在秒針的前面

cxt . begin path()；

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

cxt . close path()；

//設置填充樣式

cxt.fillStyle = & quot藍色& quot；

cxt . fill()；

//設置筆畫樣式

cxt . stroke()；

cxt . close path()；

cxt . restore()；

}

//調用函數

draw clock()；

//設置時鐘轉動。

setInterval(DrawClock，1000)；

& lt/script & gt；

& lt/body & gt；

& lt/html & gt；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。