當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现时钟效果
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>js時(shí)鐘效果</title><style>.clock{width: 600px;height: 600px;margin: 50px auto;background:url(images/clock.jpg) no-repeat;position: relative;}.clock div{width: 600px;height: 600px;position: absolute;top: 0;left: 0;}.h{background: url(images/hour.png)no-repeat center center;}.m{background: url(images/minute.png)no-repeat center center;}.s{background: url(images/second.png)no-repeat center center;}</style></head><body><div class="clock" id="clo"><div class="h"></div><div class="m"></div><div class="s"></div></div></body>
</html>
<script type="text/javascript">var clock = document.getElementById("clo");var h = 0, m = 0 , s =0, 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;
clock.children[0].style.WebkitTransform = "rotate("+h*30+"deg)";clock.children[1].style.WebkitTransform = "rotate("+m*6+"deg)";clock.children[2].style.WebkitTransform = "rotate("+s*6+"deg)";},50);
</script>
這里隨便附的幾張圖，代碼中用到的也可以自行調(diào)換哦~
clock.jpg? ? ? ? ??hour.png? ? ? ? ??minute.png? ? ? ??second.png? ? ??
?
轉(zhuǎn)載于:https://www.cnblogs.com/Scar007/p/7911102.html
總結(jié)
- 上一篇： nginx 获取真实ip
- 下一篇： 004-Spring boot 快速入门