本文主要為大家詳細介紹了五步驟輕鬆實現JavaScript HTML時鐘效果的程式碼,具有一定的參考價值,有興趣的小夥伴們可以參考一下,希望能幫助到大家。
學了一段時間的HTML、CSS和JS後,為大家做一款漂亮的不像實力派的HTML時鐘,先看圖:
涉及的知識點有: CSS3動畫、DOM操作、定時器、圓點座標的計算(好多人是否已經還給自己的老師了~)
接下來,我們用5步來製作它
step1、準備HTML
首先,我們需要準備HTML結構,背景、錶盤、指標(時針、分針、秒針)、數字。
<p id="clock"> <p class="bg"> <p class="point"> <p id="hour"></p> <p id="minute"></p> <p id="second"></p> <p class="circle"></p> </p> </p> < /p>
step2、準備CSS
定義好指標的顏色和大小,需要說明的是transform: rotate(-90deg ); 用來旋轉指針,transform-origin:0 6px; 用來設定旋轉中心點。
<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取得秒。時針轉動一週是12格,每格角度就是360°/12,分鐘和秒都是60格,每格角度360°/60。
function clock(){ var date = new Date();//获取当前时间 //时(0-23) 分(0-59)秒(0-59) //计算转动角度 var hourDeg = date.getHours()*360/12; var minuteDeg = date.getMinutes()*360/60; var secondDeg = date.getSeconds()*360/60; //console.log(hourDeg, minuteDeg, secondDeg); //设置指针 hour.style.transform = 'rotate('+hourDeg+'deg)'; minute.style.transform = 'rotate('+minuteDeg+'deg)'; second.style.transform = 'rotate('+secondDeg+'deg)'; }
step4、時鐘轉動
透過setInterval設定計時器,每秒刷新一次。注意,需要初始化執行一次,否則會在1s後才能看到效果。
//初始化执行一次 clock(); setInterval(clock,1000);
step5、繪製數字時間
數字時間也是在一個圓週上,我們只用確定好半徑,然後得到半徑上的座標。透過左邊來定位每個數字就好了。看一下圓座標系的計算規則:
* 圓半徑座標計算:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意,我們計算的座標是圓弧上點的座標,當定位每個數字時,都是以元素的左上角點進行定位,這樣我們的數字就會存在偏移。也就是說數字的中心點不在圓弧上,解決方法就是把座標點(x,y)平移自身的一半(x-w/2, y-h/2)
,這樣數字的中心點就在圓弧上了。
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); //创建p,写入数字 var number = document.createElement('p'); number.className = 'number'; number.innerHTML = i; //减去自身的一半, 让p的中心点在圆弧上 number.style.left = x - 25 + 'px'; number.style.top = y - 25 + 'px'; //添加到页面 myClock.appendChild(number); } }
完整JS程式碼:
<script> /*** * 时钟: * 1> 旋转: rotate(90deg) * 2> 旋转中心点: 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) //计算转动角度 var hourDeg = date.getHours()*360/12; var minuteDeg = date.getMinutes()*360/60; var secondDeg = date.getSeconds()*360/60; //console.log(hourDeg, minuteDeg, secondDeg); //设置指针 hour.style.transform = 'rotate('+hourDeg+'deg)'; minute.style.transform = 'rotate('+minuteDeg+'deg)'; second.style.transform = 'rotate('+secondDeg+'deg)'; } //初始化执行一次 clock(); //TODO step3: 设置定时器 setInterval(clock,1000); /*** * 圆半径坐标计算: * x = pointX + r*cos(angle); * y = pointY + r*sin(angle); * */ var pointX = 200; var pointY = 200; var r = 150; //TODO step4: 画时钟数字 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); //创建p,写入数字 var number = document.createElement('p'); number.className = 'number'; number.innerHTML = i; //减去自身的一半, 让p的中心点在圆弧上 number.style.left = x - 25 + 'px'; number.style.top = y - 25 + 'px'; //添加到页面 myClock.appendChild(number); } } drawNumber(); < /script>
怎麼樣,會了嗎?
相關推薦:
以上是JavaScript HTML時鐘效果簡單實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!