本文實例為大家分享了js時鐘特效 的具體代碼，供大家參考，具體內容如下

創新互聯成立與2013年，先為齊河等服務建站，齊河等地企業，進行企業商務咨詢服務。為齊河企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

js代碼

var canvas = document.getElementById("clock");
var clock = canvas.getContext("2d");
 
function zhong() {
 clock.save();
 //開始畫外層圓
 clock.translate(200, 200);
 clock.strokeStyle = 'black';
 clock.lineWidth = 3;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();

 //時鐘上的數字
 var shuzi = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 clock.font = "30px Arial";
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 shuzi.forEach(function(number, i) {
 var rad = 2 * Math.PI / 12 * i;
 var x = Math.cos(rad) * 180;
 var y = Math.sin(rad) * 180;
 clock.fillText(number, x, y);
 });

 // 小圓點

 for(j = 0; j < 60; j++) {
 var h = 2 * Math.PI / 60 * j;
 var m = Math.cos(h) * 180;
 var n = Math.sin(h) * 180;
 clock.fillStyle = 'black';
 clock.beginPath();
 if(j % 5 === 0) {
 continue;
 }
 clock.arc(m, n, 3, 0, 2 * Math.PI);
 clock.fill();
 }
}
function drawHour(hour,min) {
 clock.save();
 var rad = 2 * Math.PI / 12 * hour;
 var red = 2 *Math.PI/12/60*min;
 clock.rotate(rad+red);
 clock.lineWidth = 10;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 5);
 clock.lineTo(0, -100);
 clock.stroke();
 clock.restore();
}

function drawmin(min) {
 clock.save();
 var rad = 2 * Math.PI / 60 * min;
 clock.rotate(rad);
 clock.lineWidth = 5;
 clock.lineCap = "round";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -150);
 clock.stroke();
 clock.restore();
}

function drawsec(sec) {
 clock.save();
 var rad = 2 * Math.PI / 60 * sec;
 clock.rotate(rad);
 clock.lineWidth = 2;
 clock.lineCap = "round";
 clock.strokeStyle = "red";
 clock.beginPath();
 clock.moveTo(0, 10);
 clock.lineTo(0, -180);
 clock.stroke();
 clock.restore();
}

function dian() {
 clock.fillStyle = "white";
 clock.beginPath();
 clock.arc(0, 0, 2, 0, 2 * Math.PI);
 clock.fill();
}

function xuanzhuan() {
 clock.clearRect(0,0,400,400);
 zhong();
 var now = new Date();
 var hour = now.getHours();
 var min = now.getMinutes();
 var sec = now.getSeconds();
 drawHour(hour,min);
 drawmin(min);
 drawsec(sec);
 dian();
 clock.restore();
}
xuanzhuan();

setInterval(xuanzhuan, 1000);

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站名稱：一個簡易時鐘效果js實現代碼-創新互聯
文章來源：http://vcdvsql.cn/article48/cdgghp.html

成都網站建設公司_創新互聯，為您提供網站制作、企業建站、動態網站、網站建設、網站營銷、響應式網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯