您好,登錄后才能下訂單哦!
小編給大家分享一下如何實現(xiàn)JavaScript+HTML時鐘效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
javascript是一種動態(tài)類型、弱類型的語言,基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言,同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能,現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器,如Node.js。
效果圖:
涉及到的知識點有: CSS3動畫、DOM操作、定時器、圓點坐標的計算
接下來,我們用5步來制作它
step1、準備HTML
首先,我們需要準備HTML結(jié)構(gòu),背景、表盤、指針(時針、分針、秒針)、數(shù)字。
<div id="clock"> <div class="bg"> <div class="point"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> <div class="circle"></div> </div> </div> < /div>
step2、準備CSS
定義好指針的顏色和大小,需要說明的是transform: rotate(-90deg); 用來旋轉(zhuǎn)指針,transform-origin:0 6px; 用來設(shè)置旋轉(zhuǎn)中心點。
<style> *{ margin: 0; padding: 0; } #clock{ margin: 5% auto; width: 400px; height: 400px; border-radius: 10px; background: #aaa; position: relative; transform: rotate(-90deg); } #clock .bg{ width: 360px; height: 360px; border-radius: 50%; background: #fff; position: absolute; left: 50%; top: 50%; margin-left: -180px; margin-top: -180px; } #clock .point{ position: absolute; left: 50%; top: 50%; margin-left: -14px; margin-top: -14px; } #clock #hour{ width: 80px; height: 16px; background: #000; margin: 6px 0 0 14px; /*transform: rotate(30deg);*/ transform-origin:0 8px; /*animation: hour 3s linear 100!* alternate*!;*/ border-radius: 16px; } #clock #minute{ width: 120px; height: 12px; background: #000; margin: -14px 0 0 14px; transform-origin:0 6px; border-radius: 12px; } #clock #second{ width: 160px; height: 6px; background: #f00; margin: -9px 0 0 14px; transform-origin:0 3px; border-radius: 6px; } #clock .point .circle{ width: 28px; height: 28px; border-radius: 50%; background: #000; position: absolute; left: 0; top: 0; } @keyframes hour { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #clock .number{ position: absolute; font-size: 34px; width: 50px; height: 50px; line-height: 50px; text-align: center; transform: rotate(90deg); } < /style>
step3、計算時針位置
JS通過Date對象獲取當前時間,getHours獲取小時、getMinutes獲取分鐘、getSeconds獲取秒。時針轉(zhuǎn)動一周是12格,每格角度就是360°/12,分鐘和秒都是60格,每格角度360°/60。
function clock(){ var date = new Date();//獲取當前時間 //時(0-23) 分(0-59)秒(0-59) //計算轉(zhuǎn)動角度 var hourDeg = date.getHours()*360/12; var minuteDeg = date.getMinutes()*360/60; var secondDeg = date.getSeconds()*360/60; //console.log(hourDeg, minuteDeg, secondDeg); //設(shè)置指針 hour.style.transform = 'rotate('+hourDeg+'deg)'; minute.style.transform = 'rotate('+minuteDeg+'deg)'; second.style.transform = 'rotate('+secondDeg+'deg)'; }
step4、時鐘轉(zhuǎn)動
通過setInterval設(shè)置定時器,每秒刷新一次。注意,需要初始化執(zhí)行一次,否則會在1s后才能看到效果。
//初始化執(zhí)行一次 clock(); setInterval(clock,1000);
step5、繪制數(shù)字時間
數(shù)字時間也是在一個圓周上,我們只用確定好半徑,然后得到半徑上的坐標。通過左邊來定位每個數(shù)字就好了。看一下圓坐標系的計算規(guī)則:
* 圓半徑坐標計算:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意,我們計算的坐標是圓弧上點的坐標,當定位每個數(shù)字時,都是以元素的左上角點進行定位,這樣我們的數(shù)字就會存在偏移。也就是說數(shù)字的中心點不在圓弧上,解決辦法就是把坐標點(x,y)平移自身的一半(x-w/2, y-h/2)
,這樣數(shù)字的中心點就在圓弧上了。
var pointX = 200; var pointY = 200; var r = 150; function drawNumber(){ var deg = Math.PI*2/12;//360° for (var i = 1; i <= 12; i++) { //計算每格的角度 var angle = deg*i; //計算圓上的坐標 var x = pointX + r*Math.cos(angle); var y = pointY + r*Math.sin(angle); //創(chuàng)建div,寫入數(shù)字 var number = document.createElement('div'); number.className = 'number'; number.innerHTML = i; //減去自身的一半, 讓div的中心點在圓弧上 number.style.left = x - 25 + 'px'; number.style.top = y - 25 + 'px'; //添加到頁面 myClock.appendChild(number); } }
完整JS代碼:
<script> /*** * 時鐘: * 1> 旋轉(zhuǎn): rotate(90deg) * 2> 旋轉(zhuǎn)中心點: transform-origin * */ //TODO step1: 獲取時鐘的指針 var hour = document.getElementById('hour');//時針 var minute = document.getElementById('minute');//分針 var second = document.getElementById('second');//秒針 var myClock = document.getElementById('clock');//時鐘 //TODO step2: 獲取當前時間,把指針放在正確的位置 function clock(){ var date = new Date();//獲取當前時間 //時(0-23) 分(0-59)秒(0-59) //計算轉(zhuǎn)動角度 var hourDeg = date.getHours()*360/12; var minuteDeg = date.getMinutes()*360/60; var secondDeg = date.getSeconds()*360/60; //console.log(hourDeg, minuteDeg, secondDeg); //設(shè)置指針 hour.style.transform = 'rotate('+hourDeg+'deg)'; minute.style.transform = 'rotate('+minuteDeg+'deg)'; second.style.transform = 'rotate('+secondDeg+'deg)'; } //初始化執(zhí)行一次 clock(); //TODO step3: 設(shè)置定時器 setInterval(clock,1000); /*** * 圓半徑坐標計算: * x = pointX + r*cos(angle); * y = pointY + r*sin(angle); * */ var pointX = 200; var pointY = 200; var r = 150; //TODO step4: 畫時鐘數(shù)字 function drawNumber(){ var deg = Math.PI*2/12;//360° for (var i = 1; i <= 12; i++) { //計算每格的角度 var angle = deg*i; //計算圓上的坐標 var x = pointX + r*Math.cos(angle); var y = pointY + r*Math.sin(angle); //創(chuàng)建div,寫入數(shù)字 var number = document.createElement('div'); number.className = 'number'; number.innerHTML = i; //減去自身的一半, 讓div的中心點在圓弧上 number.style.left = x - 25 + 'px'; number.style.top = y - 25 + 'px'; //添加到頁面 myClock.appendChild(number); } } drawNumber(); < /script>
以上是“如何實現(xiàn)JavaScript+HTML時鐘效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。