生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】编写一个炫彩的网页时钟
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
利用了Canvas制作的，可以轉呀。
示意圖如下：
<!DOCTYPE html>
<html>
<head><meta http-equiv = "Content-Type" content = "text/html"; charsert = "utf-8" />
<title> 網頁時鐘
</title>
</head>
<body><h2> Web時鐘
</h2><canvas id = "hello" width = "400" height = "400"style = "border:1px solid black">
</canvas><script languagetype = "text/javascript">
var myCavas = document.getElementById('hello');var c = myCavas.getContext('2d');function clock() {c.clearRect(0, 0, 400, 400);var data = new Date();var sec = data.getSeconds();var min = data.getMinutes();var hour = data.getHours();c.save();c.translate(200, 200);c.rotate(-Math.PI/2);for (var i = 0; i < 60; i++) { c.beginPath();c.strokeStyle = "yellowgreen";c.lineWidth = 5;c.moveTo(117, 0);c.lineTo(120, 0);c.stroke();c.rotate(Math.PI/30);c.closePath();}for (var i = 0; i < 12; i++) { c.beginPath();c.strokeStyle = "green";c.lineWidth = 8;c.moveTo(100, 0);c.lineTo(120, 0);c.stroke();c.rotate(Math.PI/6);c.closePath();}c.beginPath();c.strokeStyle = "pink";c.arc(0, 0, 145, 0, Math.PI*2);c.lineWidth = 12;c.stroke();c.closePath();hour = hour > 12 ? hour-12 : hour;c.beginPath();c.save();c.rotate(Math.PI/6*hour + Math.PI/6*min/60 + Math.PI/6*sec/3600);c.strokeStyle = "yellowgreen";c.lineWidth = 4;c.moveTo(-20, 0);c.lineTo(50, 0);c.stroke();c.restore();c.closePath();c.beginPath();c.save();c.rotate(Math.PI/30*min + Math.PI/30*sec/60);c.strokeStyle = "springgreen";c.lineWidth = 3;c.moveTo(-30, 0);c.lineTo(70, 0);c.stroke();c.restore();c.closePath();c.beginPath();c.save();c.rotate(Math.PI/30*sec);c.strokeStyle = "red";c.lineWidth = 2;c.moveTo(-40, 0);c.lineTo(120, 0);c.stroke();c.restore();c.closePath();c.restore();}clock();setInterval(clock, 1000);</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的【JavaScript】编写一个炫彩的网页时钟的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
