js實(shí)現(xiàn)特別簡(jiǎn)單的鐘表效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)鐘表效果的具體代碼,供大家參考,具體內(nèi)容如下
<div class="clock"> <div class="circle"></div> <div class="hour"></div> <div class="minutes"></div> <div class="seconds"></div> <!-- 添加數(shù)字1-12 --> <div class="nums"> </div> </div>
* { margin: 0; padding: 0; } .clock { position: relative; width: 200px; height: 200px; border: solid 14px rgb(247, 129, 149); border-radius: 50%; margin: 100px auto; background: linear-gradient( rgb(190, 155, 223),pink); } .circle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; background-color: black; border-radius: 50%; /* 優(yōu)先顯示它 */ z-index: 5; } .hour { position: absolute; left: 49.5%; top: 48px; width: 4px; height: 50px; background-color: blue; /* steps(60)--分60步走*/ animation: run 21600s steps(60) infinite; /* 繞著底部旋轉(zhuǎn) */ transform-origin: bottom; z-index: 3; } .minutes { position: absolute; left: 49.5%; top: 28px; width: 3px; height: 70px; background-color: rgb(240, 83, 83); animation: run 3600s steps(60) infinite; transform-origin: bottom; z-index: 2; } .seconds { position: absolute; left: 50%; top: 2px; width: 2px; height: 96px; background-color: pink; animation: run 60s steps(60) infinite; transform-origin: bottom; } .ps { width: 100%; height: 100%; } .number { position: absolute; left: 50%; width: 10px; height: 98px; transform-origin: bottom; color: rgb(230, 53, 156); font-weight: bold; font-size: 20px; } .number:last-child { left: 47%; } @keyframes run { 0% { transform: rotate(0); } 100% { transform: rotate(360deg) } }
<script> var nums = document.querySelector('.nums') var dd = 30; for (var i = 1; i < 13; i++) { // 創(chuàng)建一個(gè)div保存數(shù)字 var number = document.createElement('div'); number.className = 'number'; // 下標(biāo)就是對(duì)應(yīng)的數(shù)字1-12 number.innerText = i; // 追加到頁(yè)面中 nums.appendChild(number); // 數(shù)字分別旋轉(zhuǎn)對(duì)應(yīng)的角度 number.style.transform = "rotate(" + dd + "deg)"; // 確定要旋轉(zhuǎn)的度數(shù)----30deg/60deg/90deg..... if (dd < 360) { dd += 30; } } </script>
更多JavaScript時(shí)鐘特效點(diǎn)擊查看:JavaScript時(shí)鐘特效專題
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決WebStorm?2022.3.x?無(wú)法識(shí)別?Element?UI?2.15.11?新版本中的?el-
這篇文章主要介紹了解決?WebStorm?2022.3.x?無(wú)法識(shí)別?Element?UI?2.15.11?新版本中的?el-xxx?標(biāo)簽問(wèn)題,本文給大家分享兩種解決方案,需要的朋友可以參考下2023-01-01原生JavaScript實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效
這篇文章主要為大家詳細(xì)介紹了原生JavaScript設(shè)計(jì)和實(shí)現(xiàn)Tooltip浮動(dòng)提示框特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03JS實(shí)現(xiàn)倒計(jì)時(shí)(天數(shù)、時(shí)、分、秒)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)倒計(jì)時(shí),精確到天數(shù)、時(shí)、分、秒,還為大家分享了parseInt() 函數(shù)的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript三大重點(diǎn)同步異步與作用域和閉包及原型和原型鏈詳解
這篇文章主要介紹了JavaScript同步異步與作用域和閉包及原型和原型鏈,每個(gè)對(duì)象都連接到一個(gè)原型對(duì)象,并且它可以從中繼承屬性。所有通過(guò)對(duì)象字面量創(chuàng)建的對(duì)象都連接到object.prototype,它是JavaScript中的標(biāo)配對(duì)象<BR>2022-07-07一文帶你掌握掌握J(rèn)avaScript中不同屬性類型的細(xì)節(jié)
JavaScript是一種功能強(qiáng)大的編程語(yǔ)言,支持面向?qū)ο蟮木幊谭妒剑疚膶⒔榻BJavaScript中面向?qū)ο缶幊痰幕靖拍?,包括?duì)象、屬性類型、定義多個(gè)屬性和讀取屬性的特性2023-06-06微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
最近改了一個(gè)公司項(xiàng)目,新增加了一個(gè)獲取用戶手機(jī)號(hào)功能,里面用到了關(guān)于獲取用戶信息和用戶手機(jī)號(hào)的功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下2022-07-07