用html、css制作时钟,基于HTML5+CSS3实现简单的时钟效果

目的：

利用html5，css实现钟摆效果

知识点：

1) 利用position/left/top和calc()实现元素的水平和垂直居中；

2) 利用css3的animation/transform/transform-origin属性定义动画；

3) 利用transform-origin实现旋转原点的圆心调整

废话不多说了，直接看代码吧，具体代码如下所示：

li{

list-style:none;

}

#box{

width: 400px;

height: 400px;

position: absolute;

top:calc(50% - 200px);

left:calc(50% - 200px);

border: 2px solid palegoldenrod;

}

#dial{

width: 200px;

height: 200px;

position: absolute;

top:calc(50% - 100px);

left:calc(50% - 100px);

border: 2px solid cyan;

border-radius: 50%;

}

.scaleindex{

width: 4px;

height: 12px;

position: absolute;

top: 0;

left: calc(50% - 2px);

background-color: gray;

transform-origin: 2px 100px;

}

.angle30{transform : rotate(30deg);}

.angle60{transform : rotate(60deg);}

.angle90{transform : rotate(90deg);}

.angle120{transform : rotate(120deg);}

.angle150{transform : rotate(150deg);}

.angle180{transform : rotate(180deg);}

.angle210{transform : rotate(210deg);}

.angle240{transform : rotate(240deg);}

.angle270{transform : rotate(270deg);}

.angle300{transform : rotate(300deg);}

.angle330{transform : rotate(330deg);}

#fixpoint{

width: 10px;

height: 10px;

position: absolute;

top:calc(50% - 5px);

left:calc(50% - 5px);

background-color: cadetblue;

border-radius: 50%;

}

#hourhand{

width: 6px;

height: 70px;

position:absolute;

top: 40px;

left: calc(50% - 3px);

background-color: darkblue;

transform-origin: 50% 60px;

}

#minutehand{

width: 4px;

height: 75px;

position:absolute;

top: 35px;

left: calc(50% - 2px);

background-color: yellow;

transform-origin: 50% 65px;

}

#secondhand{

width: 2px;

height: 90px;

position:absolute;

top: 20px;

left: calc(50% - 1px);

background-color: red;

transform-origin: 50% 80px;

}

window.onload = function(){

var hourhand = document.getelementbyid('hourhand');

var minutehand = document.getelementbyid('minutehand');

var secondhand = document.getelementbyid('secondhand');

setinterval(function(){

var currenttime = new date();

var hourvalue = currenttime.gethours();

var hourangle = hourvalue / 24 * 360 + 'deg';

var minutevalue = currenttime.getminutes();

var minuteangle = minutevalue / 60 * 360 + 'deg';

var secondvalue = currenttime.getseconds();

var secondangle = secondvalue / 60 * 360 + 'deg';

console.log(hourangle);

// 方法一：利用jquery的css()增加属性

var cmdhour = 'rotate('+ hourangle +')';

$('#hourhand').css({transform:'rotate('+ hourangle +')'});

var cmdminute = 'rotate('+ minuteangle +')';

$('#minutehand').css({transform:cmdminute});

var cmdsecond = 'rotate('+ secondangle +')';

$('#secondhand').css({transform:cmdsecond});

// 方法二：利用dom元素的style属性设置

// hourhand.style.transform = 'rotate('+ hourangle + ')';

// minutehand.style.transform = 'rotate('+ minuteangle + ')';

// secondhand.style.transform = 'rotate('+ secondangle + ')';

},1000);

}

总结

以上所述是小编给大家介绍的基于html5+css3实现简单的时钟效果，希望对大家有所帮助