js+css3實(shí)現(xiàn)簡單時(shí)鐘特效
本文實(shí)例為大家分享了js+css3實(shí)現(xiàn)簡單時(shí)鐘的具體代碼，供大家參考，具體內(nèi)容如下
1.實(shí)現(xiàn)了時(shí)鐘的特效，可以轉(zhuǎn)動(dòng)，時(shí)間準(zhǔn)確，畫面美觀大氣；2.用到了css3的transform: rotate，transform-origin:,偽元素，border-radius，定位，z-index等等
效果如圖：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時(shí)鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://www.aoyou183.cn/bcjs/img/an.ico' /> <style> /*表盤邊框*/ .clock { /* 設(shè)置大小 */ width: 400px; height: 400px; position: relative; margin: 40px auto; /*上邊距*/ border-radius: 50%; /*圓形*/ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); /*表盤陰影*/ background: #F5DEB3; border: 10px solid #FFFF00; } /*畫刻度的面板*/ .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*用來裝刻度和數(shù)字的div*/ .box div { width: 0px; height: 200px; position: absolute; left: 200px; /*旋轉(zhuǎn)*/ transform: rotate(0deg); /*設(shè)置基點(diǎn)為右下角*/ transform-origin: bottom right; background: rgba(255, 0, 0, 0.5); } /*數(shù)字*/ .box div i { float: left; margin-top: 20px; margin-left: -10px; font-style: normal; width: 20px; text-align: center; font-style: 18px; } /*小刻度*/ .box div::after { content: ''; position: absolute; background: #484848; width: 2px; height: 10px; left: -1px; } /*大刻度*/ .box div.five::after { position: absolute; content: ''; width: 4px; height: 20px; left: -2px; top: 0; background: #484848; border-radius: 0 0 2px 2px; } /*秒針樣式*/ .second { width: 1px; height: 200px; background: red; position: absolute; left: 200px; /*距離表盤寬度一半*/ margin-top: 30px; z-index: 10; transform: rotate(0deg); transform-origin: center 170px; /*定位旋轉(zhuǎn)位置*/ } /*圓心樣式*/ .second::after { content: ''; position: absolute; width: 20px; height: 20px; background: red; border-radius: 50%; bottom: 20px; left: -10px; } /*分針樣式*/ .minute { width: 2px; height: 140px; background: #8b8b8d; position: absolute; left: 199px; margin-top: 60px; z-index: 9; transform-origin: center bottom; transform: rotate(12deg); animation: minute 60s linear infinite; } /*時(shí)針樣式*/ .hour { width: 6px; height: 100px; background: #333; position: absolute; left: 197px; margin-top: 100px; z-index: 8; border-radius: 3px; transform: rotate(2deg); transform-origin: center bottom; animation: minute 60s linear infinite; } </style> </head> <body> <div class='clock'> <div class='box'></div> <div class='second'></div> <div class='minute'></div> <div class='hour'></div> </div> <script> var box = document.getElementsByClassName('box')[0]; var ssObj = document.getElementsByClassName('second')[0]; var mmObj = document.getElementsByClassName('minute')[0]; var hhObj = document.getElementsByClassName('hour')[0]; /*獲取當(dāng)前時(shí)間*/ var date = new Date(); var hh = date.getHours(); var mm = date.getMinutes(); var ss = date.getSeconds(); /*計(jì)算頁面指針加載時(shí)的角度*/ hhDeg = 360 * (hh % 12) / 12; mmDeg = 360 * mm / 60; ssDeg = 360 * ss / 60; hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; // 定義初始刻度的度數(shù) var Deg = 0; /*畫刻度*/ for (var i = 0; i < 60; i++) { var div1 = document.createElement('div'); //創(chuàng)建一個(gè)div var hourNum = i / 5; //當(dāng)為5時(shí) if (hourNum == 0) hourNum = 12; if (i % 5 == 0) { //大刻度 div1.className = 'five'; div1.innerHTML = '<i>' + hourNum + '</i>' } div1.style.transform = 'rotate(' + Deg + 'deg)'; box.appendChild(div1); Deg += 6;// 每兩個(gè)刻度之間是6度 } /*指針轉(zhuǎn)動(dòng)的函數(shù)*/ function drawSS() { // 秒針的度數(shù) ssDeg = 360 * ss / 60; // 分針的度數(shù) mmDeg1 = 360 * mm / 60; // 時(shí)針的度數(shù) hhDeg1 = 360 * (hh % 12) / 12; // 分針每秒走的位置 mmDeg = mmDeg1 + (6 * ss / 60); // 時(shí)針每分鐘走的位置 hhDeg = hhDeg1 + (30 * mm / 60); hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; ss += 1; if (ss > 60) { ss = 1; mm += 1; } if (mm == 60) { mm = 0; hh += 1; } setTimeout(function() { drawSS(); }, 1000); } drawSS(); </script> </body></html>
精簡版：
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時(shí)鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://www.aoyou183.cn/bcjs/img/an.ico' /> <style> /*表盤邊框*/ .clock { /* 設(shè)置大小 */ width: 400px; height: 400px; position: relative; margin: 40px auto; /*上邊距*/ border-radius: 50%; /*圓形*/ box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5); /*表盤陰影*/ background: #F5DEB3; border: 10px solid #FFFF00; } /*畫刻度的面板*/ .box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /*用來裝刻度的div*/ .box div { width: 0px; height: 200px; position: absolute; left: 200px; /*旋轉(zhuǎn)*/ transform: rotate(0deg); /*設(shè)置基點(diǎn)為右下角*/ transform-origin: bottom right; background: rgba(255, 0, 0, 0.5); } /*小刻度*/ .box div:after { content: ''; position: absolute; background: #484848; width: 2px; height: 10px; left: -1px; } /*大刻度*/ .box div.five:after { position: absolute; content: ''; width: 4px; height: 20px; left: -2px; top: 0; background: #484848; border-radius: 0 0 2px 2px; } /*秒針樣式*/ .second { width: 1px; height: 200px; background: red; position: absolute; left: 200px; /*距離表盤寬度一半*/ margin-top: 30px; z-index: 10; transform: rotate(0deg); transform-origin: center 170px; /*定位旋轉(zhuǎn)位置*/ } /*圓心樣式*/ .second:after { content: ''; position: absolute; width: 20px; height: 20px; background: red; border-radius: 50%; bottom: 20px; left: -10px; } /*分針樣式*/ .minute { width: 2px; height: 140px; background: #8b8b8d; position: absolute; left: 199px; margin-top: 60px; z-index: 9; transform-origin: center bottom; transform: rotate(12deg); } /*時(shí)針樣式*/ .hour { width: 6px; height: 100px; background: #333; position: absolute; left: 197px; margin-top: 100px; z-index: 8; border-radius: 3px; transform: rotate(2deg); transform-origin: center bottom; } </style> </head> <body> <div class='clock'> <div class='box'></div> <div class='second'></div> <div class='minute'></div> <div class='hour'></div> </div> <script> var box = document.getElementsByClassName('box')[0]; var ssObj = document.getElementsByClassName('second')[0]; var mmObj = document.getElementsByClassName('minute')[0]; var hhObj = document.getElementsByClassName('hour')[0]; /*獲取當(dāng)前時(shí)間*/ var date = new Date(); var hh = date.getHours(); var mm = date.getMinutes(); var ss = date.getSeconds(); /*計(jì)算頁面指針加載時(shí)的角度*/ drawSS(); // 定義初始刻度的度數(shù) var Deg = 0; /*畫刻度*/ for (var i = 0; i < 60; i++) { var div1 = document.createElement('div'); //創(chuàng)建一個(gè)div //當(dāng)為5時(shí) if (i % 5 == 0) { //大刻度 div1.className = 'five'; } div1.style.transform = 'rotate(' + Deg + 'deg)'; box.appendChild(div1); Deg += 6;// 每兩個(gè)刻度之間是6度 } /*指針轉(zhuǎn)動(dòng)的函數(shù)*/ function drawSS() { // 秒針的度數(shù) ssDeg = 360 * ss / 60; // 分針的度數(shù) mmDeg = 360 * mm / 60 + (6 * ss / 60); // 時(shí)針的度數(shù) hhDeg = 360 * (hh % 12) / 12 + (30 * mm / 60); // 旋轉(zhuǎn) hhObj.style.transform = 'rotate(' + hhDeg + 'deg)'; mmObj.style.transform = 'rotate(' + mmDeg + 'deg)'; ssObj.style.transform = 'rotate(' + ssDeg + 'deg)'; ss += 1; // 每秒鐘調(diào)用一次 setTimeout(function() { drawSS(); }, 1000); } </script> </body></html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 利用ajax+php實(shí)現(xiàn)商品價(jià)格計(jì)算2. Python matplotlib 繪制雙Y軸曲線圖的示例代碼3. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫的方法4. JSP頁面實(shí)現(xiàn)驗(yàn)證碼校驗(yàn)功能5. asp知識(shí)整理筆記4（問答模式）6. java 優(yōu)雅關(guān)閉線程池的方案7. 詳解idea中web.xml默認(rèn)版本問題解決8. python selenium 獲取接口數(shù)據(jù)的實(shí)現(xiàn)9. ASP實(shí)現(xiàn)加法驗(yàn)證碼10. jsp EL表達(dá)式詳解
網(wǎng)公網(wǎng)安備