【项目】仿IOS时钟

1.图片展示

（表针是转的，哭唧唧）
2.HTML

3.CSS

@CHARSET "UTF-8";
body,ul{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
.clock{
	width: 230px;
	height: 230px;
	background: black;
	margin: 100px auto;
	border-radius: 40px;
	position:relative;
	overflow:hidden;/* 写在dial的父级解决margin塌陷的问题 */
}
.dial{
	
	width: 200px;
	height: 200px;
	/* 
	实现水平垂直居中，父级元素要写position:relative; */
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px;
	border-radius: 50%;
	background: white;
	/* margin: 15px auto; */
}
li{
	position: absolute;	
	top:0;
	left: 50%;
	width:30px;
	margin-left: -15px;
	text-align: center;
	transform-origin:15px 100px;
	font-weight: 600;
}
/* 由于span不是块元素 */
li span{
	display: inline-block;
}
.point{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	position: absolute;
	left:50%;
	top:50%;
	margin-left: -5px;
	margin-top: -5px;
	background-color: black;
}

.hour{
	width: 4px;
	height: 70px;
	background-color:black;
	position:absolute;
	left:50%;
	top:45px;
	margin-left: -2px;
	transform-origin:center bottom;
	transform:rotate(30deg);
}
.min{
	width: 4px;
	height: 90px;
	background-color:black;
	position: absolute;
	left: 50%;
	top:25px;
	margin-left: -2px;
	transform-origin:center bottom;
	transform:rotate(60deg);
}
.sec{
	width: 2px;
	height: 100px;
	background-color:red;
	position: absolute;
	left: 50%;
	top:25px;
	margin-left: -1px;
	transform-origin:center 90px;
	transform:rotate(90deg);
}

/* 
1.水平居中两种方式
margin position
2.
transform:rotate
3.对于自身而言
transform-origin
4.
inth-child:nth-of-type区别
 */
/* li:NTH-CHILD(1) span{
	transform:rotate(-30deg);
}
li:NTH-CHILD(1) {
	transform:rotate(30deg);	
}
li:NTH-CHILD(2) span{
	transform:rotate(-60deg);
}
li:NTH-CHILD(2) {
	transform:rotate(60deg);	
}
li:NTH-CHILD(3) {
	transform:rotate(90deg);	
}
li:NTH-CHILD(4) {
	transform:rotate(120deg);	
}
li:NTH-CHILD(5) {
	transform:rotate(150deg);	
}
li:NTH-CHILD(6) {
	transform:rotate(180deg);	
}
li:NTH-CHILD(7) {
	transform:rotate(210deg);	
}
li:NTH-CHILD(8) {
	transform:rotate(240deg);	
}
li:NTH-CHILD(9) {
	transform:rotate(270deg);	
}
li:NTH-CHILD(10) {
	transform:rotate(300deg);	
}
li:NTH-CHILD(11) {
	transform:rotate(330deg);	
}
li:NTH-CHILD(12) {
	transform:rotate(360deg);	
}
 */
 

4.JS

var total=12;
var str="";
var oDail=document.getElementsByClassName("dial")[0];
var oHour=document.getElementsByClassName("hour")[0];
var oMin=document.getElementsByClassName("min")[0];
var oSec=document.getElementsByClassName("sec")[0];


function init(){
	for(var i=1;i<=total;i++){

		str+='
\
			' + i + '\
			
';
		
	}
	oDail.innerHTML=str;
	time();
}
init();
function time(){
	var date=new Date();
	
	var sec=date.getSeconds();
	var msec=date.getMilliseconds();
	var fullSecond=sec+msec/1000;
	oSec.style.transform='rotate('+fullSecond*6+'deg)';
	
	var min=date.getMinutes();
	var fillMin=min+fullSecond/60;
	oMin.style.transform='rotate('+fillMin*6+'deg)';
	
	var hour=date.getHours();
	var fillHour=hour+fillMin/60;
	oHour.style.transform='rotate('+fillHour*30+'deg)';
	
	setTimeout(time,1000/60);
}
//1.new Date()
//2.字符串拼接