今天，给大家分享一个用JS做的时钟。
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <style media="screen"> #wrap { width: 500px; height: 500px; border: 5px solid black; border-radius: 500px; margin: auto; position: relative; }</style>
<title></title> </head> <body> <div id="wrap"></div>
</body> <script type="text/javascript"> for (var i = 1; i < 61; i++) { //制作刻度 var positer =document.createElement('div'); // 设置一个新的div 命名为positer 也可以在css 样式中写 这里我写在 js里 positer.style.width = '10px'; positer.style.height = '500px'; positer.style.position = 'absolute'; positer.style.left = '245px'; // positer.style.background = 'blue'; wrap.appendChild(positer); // 把positer 放入 wrap 中var scale = document.createElement('div'); //设置一个新的div 命名为scale （也可以写在css中）
scale.style.width = '5px'; scale.style.height = '10px'; scale.style.background = 'gray'; scale.style.margin = 'auto'; positer.appendChild(scale); // 把scale 放入 positer 中var number = document.createElement('span');
number.style.display = "inline-block"; positer.appendChild(number); number.innerHTML = i ; // 把 i 插入 number中 number.style.color = 'gray'; number.style.fontSize = '0.5em'; var warp = document.getElementById('wrap');positer.style.transform = "rotate("+i * 6+"deg)"; // positer 随着 i的变化旋转的角度也变化
number.style.transform = "rotate(-"+i * 6+"deg)"; if (i % 5 ==0 ) { // 当 i能被5整除时 scale.style.width = '8px'; scale.style.height = '20px'; scale.style.background = 'black'; number.innerHTML =(i / 5); // 把（i／5）的值插入到number 中 number.style.color = 'black'; // 改变颜色 number.style.fontSize = '2em'; // 改变字体大小 } } dot =document.createElement('div'); // 定义中间的中心轴 dot.style.width = '20px'; dot.style.height = '20px'; dot.style.background ='red'; dot.style.position = 'absolute'; dot.style.borderRadius = '20px'; dot.style.top = '240px'; dot.style.left = '240px'; dot.style.zIndex = 100; wrap.appendChild(dot); //把dot 放入 wrap中 // 定义时针 hour = document.createElement('div'); hour.style.width = '0'; hour.style.height = '120px'; hour.style.border = '4px solid black'; hour.style.position = 'absolute'; hour.style.borderRadius = '20px'; hour.style.transformOrigin = 'bottom'; // 定义它的起始转动的位置 hour.style.left = '246px'; hour.style.top = '126px'; wrap.appendChild(hour); // 把 hour 放入 wrap中 //定义分针 minute = document.createElement('div'); minute.style.width = '0'; minute.style.height = '160px'; minute.style.border = '3px solid black'; minute.style.borderRadius = '20px'; minute.style.position = 'absolute'; minute.style.transformOrigin = 'bottom'; minute.style.left = '247px'; minute.style.top = '87px'; wrap.appendChild(minute); //定义秒针 second = document.createElement('div'); second.style.width = '0'; second.style.height = '300px'; second.style.border = '2px solid red'; second.style.position = 'absolute'; second.style.left = '248px'; second.style.transformOrigin = '1px 250px'; // 定义秒针起始转动的位置 1px指 它宽度的一半 250px指正个 wrap 的一半 wrap.appendChild(second); function timeCounter(){ //定义函数 命名为 timeCounter var currentDate = new Date(); //取现在的时间赋值于变量 currentDate var Hhour = currentDate.getHours(); // 取现在的小时 var Mminute = currentDate.getMinutes(); // 取现在的分钟 var Ssecond = currentDate.getSeconds(); // 取现在的秒 var seconds = Hhour * 3600 + Mminute * 60 + Ssecond ; // 把今天所有的秒数赋值给变量 seconds hour.style.transform = 'rotate('+seconds / 120+'deg)'; // 时针每秒转的度数 minute.style.transform = 'rotate('+seconds * 0.1+'deg)'; // 分针每秒转的度数 second.style.transform = 'rotate('+seconds * 6+'deg)'; // 秒针 每秒转的度数 }
setInterval('timeCounter()', 1000); // 重复函数timeCounter 每1000毫秒执行一次 也就是1秒 </script>
</html>这里的图片即使做好的图片，做好的秒针，分针，时针都是动的。