用JavaScript实现简单网页时钟

用JavaScript实现简单网页时钟,博智网带你了解详细信息。
利用JavaScript实现网页时钟，效果如下图所示：
【用JavaScript实现简单网页时钟】

首先在body中完成表盘、指针的资源载入：
<p><img src="http://img1.wwwbaike.com/220916/0U5216063-2.jpg" ></p><hr id="hour" ><hr id="min"><hr id="second">
设置CSS样式：
<style>body{margin: 0;}p{margin: 0 auto;width: 600px;height: 600px;}#hour{background-color: black;width: 130px;height: 10px;position: fixed;top: 295px;left: 50%;margin-left: -65px;}#min{background-color: red;width: 200px;height: 8px;position: fixed;top: 296px;left: 50%;margin-left: -100px;}#second{background-color: yellow;width: 270px;height: 5px;position: fixed;top: 297.5px;left: 50%;margin-left: -135px;}</style>
最后是JS代码部分，使用循环定时器setInterval()每秒调用一次主函数，主函数内使用new Date()创建时间对象，分别使用 .getHours()；.getMinutes()；.getSeconds()获得当前的时分秒，然后利用CSS自带动画-旋转改变指针的角度：
setInterval(watch,1000);var anjleSeconds=0,anjleMin=0,anjleHours=0;function watch() {var Time= new Date();anjleSeconds=Time.getSeconds()/60*360+90;anjleMin=Time.getMinutes()/60*360+90;anjleHours=nowHours/12*360+90;document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";}
目前存在的问题是，时分秒指针由于使用的是hr标签表示，所以存在两端一样长的问题。
完整代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{margin: 0;}p{margin: 0 auto;width: 600px;height: 600px;}#hour{background-color: black;width: 130px;height: 10px;position: fixed;top: 295px;left: 50%;margin-left: -65px;}#min{background-color: red;width: 200px;height: 8px;position: fixed;top: 296px;left: 50%;margin-left: -100px;}#second{background-color: yellow;width: 270px;height: 5px;position: fixed;top: 297.5px;left: 50%;margin-left: -135px;}</style></head><body><p><img src="http://img1.wwwbaike.com/220916/0U5216063-2.jpg" ></p><hr id="hour" ><hr id="min"><hr id="second"><script>setInterval(watch,1000);var anjleSeconds=0,anjleMin=0,anjleHours=0;function watch() {var Time= new Date();anjleSeconds=Time.getSeconds()/60*360+90;anjleMin=Time.getMinutes()/60*360+90;anjleHours=Time.getHours()/12*360+90;document.getElementById("second").style.transform="rotate("+anjleSeconds+"deg)";document.getElementById("min").style.transform="rotate("+anjleMin+"deg)";document.getElementById("hour").style.transform="rotate("+anjleHours+"deg)";}</script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持趣讯吧。

用JavaScript实现简单网页时钟

推荐阅读

毛衣如何搭配贝雷帽毛衣怎么搭配贝雷帽

松花蛋可以和鸡蛋一起吃吗

倩碧无油黄油是什么功效倩碧无油黄油有哪些功效

关于赞美真诚的句子

探歌四驱是全时四驱吗

女人梦见自己衣服脏了

气动避震品牌有哪些，一套气动避震多少钱

ssh是什么

羊毛衫pbt是什么面料

秋冬长款连衣裙如何搭配秋冬长款连衣裙怎么搭配