JavaScript是一個功能十分強大的工具.
今天我們就要用JavaScript做一個簡單的旋轉時鍾.代碼小白制作,有不簡潔或者有更好的方法的話,還請各路大神在評論區指點.
這里我們需要用到的一個標簽是
setInterval--定時器,雖說在js中使用定時器就要記得刪除定時器,但鑒於我們這個項目是一個鍾表,所以並沒有刪除的必要.
setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
先來看一段簡單的函數簡介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>定時器</title>
</head>
<body>
</body>
</html>
<script>
setInterval
(function(){console.log(new Date())},1000)
// 定時器,每1000毫秒輸出當前時間
</script>
這里是使用匿名函數通過定時器在后台實現每1000毫秒輸出一次時間
如圖所示,獲取時間的標簽我整理在了下面.
//獲取當前時間(所有) console.log(new Date()) //獲取當前月份(從0開始計算,比當前少一個月) console.log(new Date().getMonth()) //獲取當前(完整)年份 console.log(new Date().getFullYear()) //獲取當前星期() console.log(new Date().getDay()) //獲取當前分鍾 console.log(new Date().getMinutes()) //獲取當前秒數 console.log(new Date().getSeconds())
我們先寫html和css,將時鍾的大體框架做出來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>旋轉時鍾</title> <style> #h{ margin: 0 auto; width: 260px; height: 260px; background: url('img/biaopan.jpg'); } #h>#miao{ width: 2px;height: 90px;background: red; position: relative; left: 145px; top: 30px; transform-origin: 50% 90%;/*改變旋轉中心(左右,上下)*/ } #h>#min{ width: 4px;height: 80px;background: black; position: relative; left: 145px; top: -50px; transform-origin: 50% 90%; } #h>#shi{ width: 4px;height: 50px;background: black; position: relative; left: 145px; top: -100px; transform-origin: 50% 90%; } #h>#dian{ width: 8px;height: 8px;background: red;position: relative;top: -113px;left: 143px;border-radius: 4px; } </style> </head> <body> <div id="h"> <div id="miao"></div> <div id="min"></div> <div id="shi"></div> <div id="dian"></div> </div> </body> </html>
表盤圖片給放到下面了
下面是html和css的實現效果
時針,分針,秒針重疊在一起了.
下面我們在JavaScript寫入獲取時間戳函數,並將其與各針鏈接
function shizhong() { var date = new Date();//給date賦值為new Date(),創建了一個日期對象date,返回值為當前的日期 var h = date.getHours();//返回當前小時 var m = date.getMinutes();//返回當前分鍾 var s = date.getSeconds();//返回當前秒數 var roateh,roatem; //兩個變量儲存時針和分針的變化 roateh=h*30+m*(30/60)+s*(30/3600);//時針旋轉角度 ,時針旋轉角度與分針秒針旋轉有關 roatem=(m*6)+(s/10);//分針旋轉角度 ,分針旋轉角度與秒針旋轉有關 min.style.transform="rotate("+roatem+"deg)"; shi.style.transform="rotate("+roateh+"deg)"; miao.style.transform="rotate("+s*6+"deg)"; } shizhong(); setInterval(shizhong, 1000);//定時器一秒調用一次函數
刷新頁面即可實現表針指向對應時間
好了,一個簡單的時鍾就做好了,謝謝各位看到這里.