本文主要是介绍用js制作一个简易时钟 时针,分针可随着秒针动.，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图:
HTML部分:
<body> <div class="box"> <span id="a1"></span> <img src="11.jpg" alt="" id="pic1"> <img src="22.jpg" alt="" id="pic2"> <img src="33.jpg" alt="" id="pic3"></div>
</body>CSS部分:
下面展示一些 内联代码片。
<style>.box {width: 400px;height: 400px;position: relative;margin: 100px auto;text-align: center;background: url(12.jpg) no-repeat center;}.box img {position: absolute;}.box img:nth-of-type(1) {right: 195px;bottom: 196px;height: 70px;transform-origin: center 65px;}.box img:nth-of-type(2) {right: 196px;bottom: 196px;height: 85px;transform-origin: center 80px;}.box img:nth-of-type(3) {right: 197px;bottom: 167px;height: 130px;transform-origin: center 95px;/* transform: rotate(30deg); */}span {width: 60px;text-align: center;height: 30px;display: block;position: absolute;line-height: 30px;font-size: 12px;top: 80px;right: 170px;background: rgb(250, 246, 246);}
</style>JS部分:
<script>var imgs = document.querySelectorAll('img');//获取所有的img标签function run() {var date = new Date();var h = date.getHours();var m = date.getMinutes();var s = date.getSeconds();var roateh, roatem; //整两个变量储存时针和分针的变化roateh = h * 30 + m * 0.5 + s * (30 / 3600);//时针旋转角度 [时针旋转角度与分针秒针旋转有关]roatem = (m * 6) + (s / 10); //分针旋转角度 [分针旋转角度与秒针旋转有关]imgs[0].style.transform = "rotate(" + roateh + "deg)";imgs[1].style.transform = "rotate(" + roatem + "deg)";imgs[2].style.transform = "rotate(" + s * 6 + "deg)";}run();setInterval(run, 1000);//定时器一秒调用一次函数var date = new Date();var week = date.getDay();switch (week) {case 1:week = "星期一";break;case 2:week = "星期二";break;case 3:week = "星期三";break;case 4:week = "星期四";break;case 5:week = "星期五";break;case 6:week = "星期六";break;default:week = "星期天";break;}var sp1 = document.getElementById("a1")sp1.innerHTML = (week)
</script>所用的图片:
这篇关于用js制作一个简易时钟 时针,分针可随着秒针动.的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
