时钟-DOM

html文本：

<div class="bigbox"><div class="box0" id="box0"><!--表盘背景图片--><img src="longmao.gif"/ id="Img"></div><div class="box"></div><!--覆盖变盘背景色--><!--为了使秒钟的圆圈绕着表盘外围旋转，首先需要一个旋转的盒子box1--><div class="box1" id="box1"><div class="box2 font" id="box2"></div><!--秒钟的圆--></div><div class="box3" id="box3"><!--同秒钟的原理--><div class="box4 font" id="box4"></div><!--分钟的圆圈--></div><div class="box5 font" id="box5"></div><!--显示时钟的圆--><div id="box6" class="box6"></div><!--年月日--><div id="box7" class="box7"></div><!--星期--></div>

css样式：

<style type="text/css">* {margin: 0;padding: 0;}body {font-family: font-family: 'Raleway', 'Arial', sans-serif;}.bigbox {width: 380px;height: 380px;position: relative;top: 100px;left:200px;}.box ,.box0{width: 300px;height: 300px;background: rgba(0, 0, 0, 0.2);border-radius: 50%;position: absolute;top:50% ;left: 50%;margin-top: -150px;margin-left: -150px;}.box0{background: none;}.box0 img{width: 300px;height: 300px;border-radius: 50%;position: absolute;top:50% ;left: 50%;margin-top: -150px;margin-left: -150px;}.box1 {width: 40px;height: 380px;position: absolute;top: 50%;left: 50%;margin-top: -190px;margin-left: -20px;}.font{color: white;text-align: center;border-radius: 50%;}.box1 .box2 {width: 40px;height: 40px;background: rgba(0, 0, 0, 0.4);line-height: 40px;}.box3 {width: 50px;height: 300px;position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -25px;}.box3 .box4 {width: 50px;height: 50px;background: rgba(0, 0, 0, 0.2);line-height: 50px;}.box5 {width: 200px;height: 200px;position: absolute;top: 50%;left: 50%;margin-top: -100px;margin-left: -100px;background: rgba(0,0,0,0.2);font-size: 60px;line-height: 100px;}.box6,.box7{height: 50px;width: 150px;color: white;position: absolute;top: 50%;left: 50%;margin-left: -75px;line-height: 50px;text-align: center;font-size: 18px;}.box6{margin-top: -15px;}.box7{margin-top: 15px;}</style>

js

<script type="text/javascript">function $(id){return document.getElementById(id);}var timer = setInterval(fn, 0.1);var ms = 0,s = 0,m=0;var j = 0; var array = [ "longmao.gif", "longmao1.gif", "longmao2.gif", "longmao3.gif", "longmao4.gif", "longmao5.gif", "longmao6.gif", "longmao7.gif", "longmao8.gif", "longmao9.gif", ]; var weekarr = ["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];function fn() {var date = new Date();//获取当前时间ms = date.getMilliseconds();//获取当前时间毫秒数//当前秒数s = date.getSeconds() + ms / 1000;//当前分钟数m = date.getMinutes() + s / 60;var ss = date.getSeconds();var mm = date.getMinutes();var hh = date.getHours();var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var week = weekarr[date.getDay()];var time = year+"年"+month+"月"+day+"日";$("box1").style.transform = "rotate(" + s * 6 + "deg)";$("box3").style.transform = "rotate(" + m * 6 + "deg)";$("box2").innerHTML = check(ss);$("box4").innerHTML = check(mm);$("box5").innerHTML = check(hh);$("box6").innerHTML = check(time);$("box7").innerHTML = week;}function check(i){if(i<10){i = "0" + i;}return i;}//当秒钟分钟时钟数字小于10时，在前面补0setInterval(function(){++j;j<array.length || (j = 0);Img.src = array[j];console.log(array[j])},3000)//变换背景图</script>