新百胜娱乐公司_17665445111
程序员文章站
2022-05-20 15:26:08
...
www.xbs1567.com这篇文章主要为大家详细介绍了JavaScript实现钟表案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现钟表效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.clock {width: 600px;height: 600px;margin: 100px auto;background: url(/image/shizhong.jpg) 600px/600px;position: relative;}.clock .h {width: 100%;height: 100%;background: url(/image/时针.jpg) no-repeat center center;background-size: 35px;z-index: 1;position: absolute;left: -3px;top: -60px;}.clock .m {width: 100%;height: 100%;background: url(/image/分针.jpg) no-repeat center center;background-size: 35px;z-index: 2;position: absolute;left: -3px;top: -95px;}.clock .s {width: 100%;height: 100%;background: url(/image/秒针.jpg) no-repeat center center;background-size: 25px;z-index: 3;position: absolute;left: -3px;top: -95px;}</style></head><body><div class="clock"><div class="h" id="hour"></div><div class="m" id="min"></div><div class="s" id="second"></div></div></body><script>var h = document.querySelector(".h")var m = document.querySelector(".m")var s = document.querySelector(".s")var s = m = h = ms = 0;setInterval(function () {var date = new Date()ms = date.getMilliseconds()/* 现在的毫秒 */s = date.getSeconds() + ms / 1000;m = date.getMinutes() + s / 60;h = date.getHours() % 12 + m / 60;/*秒针一圈360度 一共60秒 每秒6度 */second.style.transform = "rotate(" + s * 6 + "deg)"second.style.transformOrigin = ' center 67% '/*分针一圈360度 一圈走60次 每分钟6度 */min.style.transform = "rotate(" + m * 6 + "deg)"min.style.transformOrigin = ' center 67% '/*时针一圈360度 12小时制 一共走12次 d 每小时30度 */hour.style.transform = "rotate(" + h * 30 + "deg)"hour.style.transformOrigin = ' center 60% '},30)</script></html>
效果：
以上就是本文的全部内容，希望对大家的学习有所帮助