html如何添加时钟效果,transform实现的时钟效果

transform实现的时钟效果

又来一个时钟效果了，这个的实现不需要canvas，都是p、ul、li画出的，好玩有真实。

哈哈~

需要的js才能实现到走动这个效果，但js的内容不多，也不难。

主要是一个css里transform的使用的思路，transform里有很多变幻属性，而普通的时钟在我心中就是个圆圆的东西，那么是不是可以旋转这个属性(rotate)实现了，它的刻度使用旋转且把旋转点设置在圆心，那不就可以绕着圆心转了吗，而时针它们的底部不是和圆心接触的吗，那么设置时针的底部为旋转点不就ok了，大概的说了说思路。

代码：

transform

#clock{

width: 200px;

height: 200px;

border: 2px solid #000;

border-radius: 50%;

margin: 100px auto 0;

position: relative;

}

#clock ul{

width: 200px;

height: 200px;

position: relative;

list-style: none;

padding:0;

margin: 0;

}

#clock ul li{

width: 2px;

height: 10px;

background: #000;

transform-origin: center 100px;

position: absolute;

top: 0;

left: 50%;

}

#clock ul li:nth-of-type(5n+1){

height: 20px;

}

#hour{

height: 40px;

width: 4px;

background: #00fefe;

position: absolute;

top: 60px;

left: 99px;

transform-origin:center bottom;

}

#min{

height: 60px;

width: 3px;

background: #001afe;

position: absolute;

top: 40px;

left: 99px;

transform-origin: center bottom;

transform: rotate(15deg);

}

#sec{

height: 70px;

width: 2px;

background: #000;

position: absolute;

top: 30px;

left: 99px;

transform-origin:center bottom;

}

#dot{

width: 10px;

height: 10px;

position: absolute;

left: 95px;

top: 95px;

background: #aaa;

border-radius: 50%;

}

var ocss=document.getelementbyid("css");

var oclock=document.getelementbyid("clock");

var oul=oclock.getelementsbytagname("ul")[0];

var ohour=document.getelementbyid("hour");

var omin=document.getelementbyid("min");

var osec=document.getelementbyid("sec");

var strli="";

var strcss="";

for(var i=0;i<60;i++){

strli+="

";

}

oul.innerhtml=strli;

for(var i=0;i<60;i++){

strcss+=‘#clock ul li:nth-of-type(‘+(i+1)+‘){transform:rotate(‘+i*6+‘deg);}‘;

}

ocss.innerhtml+=strcss;

time();

setinterval(time,1000);

function time(){

var date=new date();

var h=date.gethours();

var m=date.getminutes();

var s=date.getseconds();

ohour.style.transform="rotate("+(h+m/60)*30+"deg)";

omin.style.transform="rotate("+(m+s/60)*6+"deg)";

osec.style.transform="rotate("+s*6+"deg)";

}

使用标签画图最主要的是定位，因为这样我们就可以把弄到形状的盒子放到你所想要的位置，内部css样式表是可以使用获取元素的方式获取的，这样就可以

使用innerhtml为其添加样式，且可以循环添加，还有因为刻度太多所以使用循环添加，这样省时省力，至于剩下的就是定时器了，给定好1秒的时间，每1

秒执行一次函数，这样它就是动起来了。