学习前端没一周，用简单的HTML 和css js 做的

clock

* {

margin: 0;

padding: 0;

}

#wrap {

position: relative;

width: 300px;

height: 300px;

background: #09F;

text-align: center;

margin: 0 auto;

border-radius: 150px;

}

.a1 {

display: block;

width: 300px;

height: 5px;

transform: rotate(0deg);

position: absolute;

top: 147px;

left: 0px;

}

.left {

display: block;

float: left;

width: 20px;

height: 5px;

background: #9F3;

}

.right {

display: block;

float: right;

width: 20px;

height: 5px;

background: #9F3;

}

.po {

width: 20px;

height: 20px;

background: #000;

border-radius: 10px;

position: absolute;

top: 50%;

left: 50%;

margin: -10px 0 0 -10px;

z-index:99;

}

#mz {

height: 300px;

width: 5px;

transform: rotate(0deg);

position: absolute;

top: 0px;

left: 149px;

z-index:80;

}

.mz {

width: 5px;

height:155px;

margin: 45px 0 100px 0;

background: #60F;

}

#fz {

width: 7px;

height: 300px;

transform: rotate(0deg);

position: absolute;

top: 0px;

left: 148px;

z-index:10;

}

.fz {

width: 7px;

height: 135px;

margin: 55px 0 110px 0;

background:#00F;

}

#sz {

width: 10px;

height: 300px;

transform: rotate(0deg);

position: absolute;

top: 0px;

left: 145px;

z-index:5;

}

.sz {

width: 10px;

height: 110px;

margin: 70px 0 120px 0;

background:#9F9;

}

function add(){//添加刻度

for( var i=0;i<30;i++)

{

var a1=document.createElement('a');

a1.className='a1';

var p1=document.createElement("p");

p1.className='left';

var p2=document.createElement("p");

p2.className='right';

if(i%5==0){

a1.style.height='8px';

p1.style.height='8px';

p1.style.width='30px';

p2.style.height='8px';

p2.style.width='30px';

}

a1.appendChild(p1);

a1.appendChild(p2);

a1.style.transform='rotate('+6*i+'deg)';

oldh.appendChild(a1);

}

//oldh.innerHTML= navigator.appCodeName;

}

var mz=document.getElementById('mz');

var oldh= document.getElementById("wrap");

var fz=document.getElementById('fz');

var sz=document.getElementById('sz');

function c(){

var d= new Date();

var h=d.getHours();

var h12=h<12?h:h-12;//转换成12小时制

mz.style.transform='rotate('+ (d.getSeconds())*6+'deg)';//旋转角度设置

fz.style.transform='rotate('+ (d.getMinutes())*6+'deg)';

sz.style.transform='rotate('+ ((h12)*30 +d.getMinutes()*0.5)+'deg)';

}

setInterval("c()",1000);//循环 总比系统时间慢一秒！！不管了！