时钟-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时，在前面补0	
				setInterval(function(){		
						++j;						
						j<array.length || (j = 0);
						Img.src = array[j];
						console.log(array[j])
				},3000)		//变换背景图	
		</script>