av一区二区在线观看_亚洲男人的天堂网站_日韩亚洲视频_在线成人免费_欧美日韩精品免费观看视频_久草视

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效

瀏覽:113日期:2024-04-20 15:32:52

本文實(shí)例為大家分享了js+css3實(shí)現(xiàn)簡(jiǎ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等等

效果如圖:

js+css3實(shí)現(xiàn)簡(jiǎn)單時(shí)鐘特效

代碼如下:

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時(shí)鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://m.4tl426be.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; } /*用來(lái)裝刻度和數(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ì)算頁(yè)面指針加載時(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;// 每?jī)蓚€(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>

精簡(jiǎn)版:

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>CSS3時(shí)鐘特效</title> <link rel='shortcut icon' type='image/x-icon' href='http://m.4tl426be.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; } /*用來(lái)裝刻度的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ì)算頁(yè)面指針加載時(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;// 每?jī)蓚€(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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 97国产精品视频人人做人人爱 | 欧美精品一区三区 | 欧美区日韩区 | 一级大片网站 | 精品无码久久久久久国产 | 亚洲www啪成人一区二区麻豆 | 北条麻妃一区二区三区在线观看 | 在线观看国产网站 | 日韩毛片中文字幕 | 日韩不卡在线 | 男女av| 欧美日本一区 | 人人爱干| 亚洲a网 | 99视频免费看 | www.性色| 精品一区二区三区在线播放 | 国产精品亚洲一区 | 国产日韩久久 | 久久精品综合 | 国产精品亚洲一区二区三区在线观看 | 青青草在线视频免费观看 | 一区二区三区视频在线 | 精品影视| 欧美亚洲国产一区二区三区 | 成人在线观看免费 | 精品www| 欧美精品一区二区三区在线 | 精品欧美一区免费观看α√ | 国内精品久久久久久 | 亚洲第一在线 | 黄色一级电影在线观看 | 99re视频在线观看 | 天天干b | 91久久久久 | 成人免费网站www网站高清 | 一级黄色片免费在线观看 | 四虎影音 | 欧美日韩在线观看视频 | 99精品国产一区二区三区 | 欧美一区二区三区视频在线播放 |