原生JS實現(xiàn)實時鐘表
更新時間：2021年08月23日 14:07:55 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)實時鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
分享一個用原生JS實現(xiàn)的實時鐘表特效，效果如下（PS：實際指針是按360度走的，截圖時只截了一部分）
上面的效果一共需要4張圖片，分別是表盤、時針、分針、秒針，根據(jù)需要可以自己做圖片，實現(xiàn)的代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生JS實現(xiàn)實時鐘表</title>
<style>
.clock {
width: 600px;
height: 600px;
margin: 100px auto;
/* 表盤背景 */
background: url(images/0.jpg) no-repeat;
position: relative;
}
.clock div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 時針圖片 */
background: url(images/1.png) no-repeat center center;
}
#m {
/* 分針圖片 */
background-image: url(images/2.png);
}
#s {
/* 秒針圖片 */
background-image: url(images/3.png);
}
</style>
</head>
<body>
<div class="clock">
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
<script>
// 獲取元素
var h = document.getElementById("h");//時
var m = document.getElementById("m");//分
var s = document.getElementById("s");//秒
var timer = null;
// 根據(jù)當(dāng)前的時間實時的修改每個盒子的旋轉(zhuǎn)角度
timer = setInterval(function () {
var date = new Date();
// 根據(jù)當(dāng)前date的每個時間部分,計算盒子運動的角度
// 每小時 360/12 30度/小時
h.style.transform = "rotate(" + date.getHours() * 30 + "deg)";
// 每分鐘 360/60 6度/分鐘
m.style.transform = "rotate(" + date.getMinutes() * 6 + "deg)";
// 每秒 360/60 6度/秒
s.style.transform = "rotate(" + date.getSeconds() * 6 + "deg)";
}, 1000);
</script>
</body>
</html>
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
說到拖拽，應(yīng)用場景不可謂不多。無論是打開電腦還是手機，第一眼望去的界面都是可拖拽的，靠拖拽實現(xiàn)APP或者應(yīng)用的重新布局，或者拖拽文件進(jìn)行操作文件。本文就將利用JS實現(xiàn)拖拽排序，需要的可以參考一下2022-12-12
TypeScript最大的一個特點就是變量是強類型的,也就是說在聲明變量的時候我們必須給他一個類型,下面這篇文章主要給大家介紹了關(guān)于TypeScript語法詳解之類型操作的補充,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了js開發(fā)插件實現(xiàn)tab選項卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了通過sails和阿里大于實現(xiàn)短信驗證的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
js給對象動態(tài)添加、設(shè)置、刪除屬性名與屬性值實例代碼
由于項目需要常常會遇到為某一個對象動態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關(guān)于js給對象動態(tài)添加、設(shè)置、刪除屬性名與屬性值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Bootstrap3 模態(tài)框的使用實例,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)列表頁的點贊和取消點贊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
javascript css紅色經(jīng)典選項卡效果實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了javascript css紅色經(jīng)典選項卡效果的實現(xiàn)代碼,需要的朋友可以參考下2016-05-05
淺談javascript 函數(shù)表達(dá)式和函數(shù)聲明的區(qū)別
javascript中聲明函數(shù)的方法有兩種:函數(shù)聲明式和函數(shù)表達(dá)式.究竟他們用起來有什么區(qū)別呢，今天就本著打破砂鍋問到底的精神，好好來說說這個讓人神魂顛倒的--函數(shù)聲明。2016-01-01
本文主要介紹了微信小程序之五種頁面跳轉(zhuǎn)方法小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06