js+css3实现简单时钟特效

本文实例为大家分享了js+css3实现简单时钟的具体代码，供大家参考，具体内容如下

1.实现了时钟的特效，可以转动，时间准确，画面美观大气；
2.用到了css3的transform: rotate，transform-origin:,伪元素，border-radius，定位，z-index等等

效果如图：

代码如下：

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>CSS3时钟特效</title><link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"img/an.ico\" /><style>/*表盘边框*/.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;}</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];/*获取当前时间*/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 = \"<i>\" + hourNum + \"</i>\"}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();</script></body></html>

精简版：

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>CSS3时钟特效</title><link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"img/an.ico\" /><style>/*表盘边框*/.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;}</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];/*获取当前时间*/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);}</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章: