How to use JavaScript to realize the effect of watch and clock
Editor to share with you how to use JavaScript to achieve watch effect, I hope you have something to gain after reading this article, let's discuss it together!
The details are as follows
Document .clock {width: 600px; height: 600px; margin: 100px auto; background: url (/ image/shizhong.jpg) 600pxamp 600px; position: relative;} .clock .h {width: 100%; height: 100%; background: url (/ image/ clockwise .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/ minute hand .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/ second hand .jpg) no-repeat center center; background-size: 25px Z-index: 3; position: absolute; left:-3px; top:-95px;} 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 () / * milliseconds * / s = date.getSeconds () + ms / 1000; m = date.getMinutes () + s / 60; h = date.getHours ()% 12 + m / 60) / * the second hand has a circle of 360 degrees in 60 seconds, 6 degrees per second * / second.style.transform = "rotate (" + s * 6 + "deg)" second.style.transformOrigin = 'center 67%' / * 60 degrees per minute with a minute hand, 6 degrees per minute * / min.style.transform = "rotate (" + m * 6 + "deg)" Min.style.transformOrigin = 'center 67%' / * walk 12 times a day at 30 degrees per hour * / hour.style.transform = "rotate (" + h * 30 + "deg)" hour.style.transformOrigin = 'center 60'} 30)
Effect:
After reading this article, I believe you have a certain understanding of "how to use JavaScript to achieve watch effect". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!
