js+css3实现简单时钟特效
更新时间:2020年09月13日 09:41:01 作者:暗锁读客
这篇文章主要为大家详细介绍了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"); //创建一个div var 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结
在不是js打开的页面上按window.close(),会有提示框,很烦,现在可以不用了,没有提示框直接关闭窗口。下面脚本之家编辑特为大家整理了一些。2009-09-09一文详解JavaScript中的事件循环(event loop)机制
JavaScript中的事件循环(Event Loop)是一种重要的机制,用于管理异步代码的执行,它确保 JavaScript 单线程环境中的任务按照正确的顺序执行,同时允许异步操作如定时器、网络请求和事件处理,本将给大家详细的介绍一下JavaScript事件循环机制,感兴趣的朋友可以参考下2023-12-12微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
这篇文章主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09关于innerHTML后丢失动态绑定的EVENT问题解决方法
用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,下面与大家分享下解决方法,感兴趣的朋友可以参考下哈2013-05-05JavaScript作用域、闭包、对象与原型链概念及用法实例总结
这篇文章主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下2018-08-08
最新评论