css时钟

css时钟

css代码：

    *{
	  margin:0;
	  padding:0;
	  list-style:none
	}
	html,body{
	  height:100%;
	  overflow:hidden
	}
	#box{
	  width:400px;
	  height:400px;
	  border:1px solid;
	  border-radius:50%;
	  position:absolute;
	  left:0;
	  top:0;
	  bottom:0;
	  right:0;
	  margin:auto;
	  box-shadow:2px 2px 10px blue;
	  transform:scale(2)
	}
	#box > ul > li{
	  height:12px;
	  width:2px;
	  background:black;
	  position:absolute;
	  left:200px;
	  transform-origin:0px 200px;
	  box-shadow:2px 2px 10px blue
	}
	#box > ul > li:nth-child(5n + 1){
	  height:20px;
	  width:4px
	}
	#hour{
	  width:6px;
	  height:60px;
	  background:black;
	  position:absolute;
	  left:197px;
	  top:140px;
	  transform-origin:center bottom;
	  box-shadow:2px 2px 10px black
	}
	#minute{
	  width:4px;
	  height:100px;
	  background:grey;
	  position:absolute;
	  left:198px;
	  top:100px;
	  transform-origin:center bottom;
	  box-shadow:2px 2px 10px grey
	}
	#second{
	  width:2px;
	  height:140px;
	  background:red;
	  position:absolute;
	  left:199px;
	  top:60px;
	  transform-origin:center bottom;
	  box-shadow:2px 2px 5px red
	}
	#icon{
	  width:20px;
	  height:20px;
	  background:pink;
	  position:absolute;
	  border-radius:50%;
	  left:190px;
	  top:190px;
	  box-shadow:2px 2px 5px pink
	}

HTML代码：

  <div id="box">
	<ul>
	</ul>
	<div id="hour"></div>
	<div id="minute"></div>
	<div id="second"></div>
	<div id="icon"></div>
  </div>

JS代码：

	window.onload = function () {
		var ul = document.querySelector('#box > ul');
		var hour = document.getElementById('hour');
		var minute = document.getElementById('minute');
		var second = document.getElementById('second');
		var style = document.createElement('style');
		document.head.appendChild(style);
		var li = '';
		var liCss = '';
		for(var i = 0; i < 60; i++){
			li += '<li></li>';
			liCss += '#box > ul > li:nth-child('+(i + 1)+'){transform:rotate('+(i * 6)+'deg)}';
		}
		style.innerHTML = liCss;
		ul.innerHTML = li;
		setInterval(move,1000);
		move();
		function move () {
			var date = new Date();
			var s = date.getSeconds();
			var m = date.getMinutes() + s/60;
			var h = date.getHours() + m/60;
			second.style.transform = 'rotate('+(s * 6)+'deg)';
			minute.style.transform = 'rotate('+(m * 6)+'deg)';
			hour.style.transform = 'rotate('+(h * 30)+'deg)';
		}
	}

页面效果：