html如何添加时钟效果,基于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实现简单的时钟效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！