js+css3实现简单时钟特效
本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下1.实现了时钟的特效，可以转动，时间准确，画面美观大气；
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等
效果如图：
http://www.cbvy.com//data/attachment/forum/202009/15/103158qr8a2dqz8h2j8ulp.jpg
代码如下： CSS3时钟特效 /*表盘边框*/.clock {/* 设置大小 */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;/*旋转*/transform: rotate(0deg);/*设置基点为右下角*/transform-origin: bottom right;background: rgba(255, 0, 0, 0.5);}/*数字*/.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;/*定位旋转位置*/}/*圆心样式*/.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;}/*时针样式*/.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;} var box = document.getElementsByClassName("box");var ssObj = document.getElementsByClassName("second");var mmObj = document.getElementsByClassName("minute");var hhObj = document.getElementsByClassName("hour");/*获取当前时间*/var date = new Date();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();/*计算页面指针加载时的角度*/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)"; // 定义初始刻度的度数var Deg = 0;/*画刻度*/for (var i = 0; i < 60; i++) {var div1 = document.createElement("div"); //创建一个divvar hourNum = i / 5;//当为5时if (hourNum == 0) hourNum = 12;if (i % 5 == 0) { //大刻度 div1.className = "five"; div1.innerHTML = "" + hourNum + ""}div1.style.transform = "rotate(" + Deg + "deg)";box.appendChild(div1);Deg += 6;// 每两个刻度之间是6度}/*指针转动的函数*/function drawSS() {// 秒针的度数ssDeg = 360 * ss / 60;// 分针的度数mmDeg1 = 360 * mm / 60;// 时针的度数hhDeg1 = 360 * (hh % 12) / 12;// 分针每秒走的位置mmDeg = mmDeg1 + (6 * ss / 60);// 时针每分钟走的位置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();精简版： CSS3时钟特效 /*表盘边框*/.clock {/* 设置大小 */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;/*旋转*/transform: rotate(0deg);/*设置基点为右下角*/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;/*定位旋转位置*/}/*圆心样式*/.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);}/*时针样式*/.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;} var box = document.getElementsByClassName("box");var ssObj = document.getElementsByClassName("second");var mmObj = document.getElementsByClassName("minute");var hhObj = document.getElementsByClassName("hour");/*获取当前时间*/var date = new Date();var hh = date.getHours();var mm = date.getMinutes();var ss = date.getSeconds();/*计算页面指针加载时的角度*/drawSS(); // 定义初始刻度的度数var Deg = 0;/*画刻度*/for (var i = 0; i < 60; i++) {var div1 = document.createElement("div"); //创建一个div//当为5时if (i % 5 == 0) { //大刻度 div1.className = "five";}div1.style.transform = "rotate(" + Deg + "deg)";box.appendChild(div1);Deg += 6;// 每两个刻度之间是6度}/*指针转动的函数*/function drawSS() {// 秒针的度数ssDeg = 360 * ss / 60;// 分针的度数mmDeg = 360 * mm / 60 + (6 * ss / 60);// 时针的度数hhDeg = 360 * (hh % 12) / 12 + (30 * mm / 60);// 旋转hhObj.style.transform = "rotate(" + hhDeg + "deg)";mmObj.style.transform = "rotate(" + mmDeg + "deg)";ssObj.style.transform = "rotate(" + ssDeg + "deg)";ss += 1;// 每秒钟调用一次setTimeout(function() { drawSS();}, 1000);}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持咔叽论坛。
原文地址：https://www.jb51.net/article/195510.htm
页:
[1]