html电子时钟自动更新,电子时钟.html

Document

main{

width: 800px;

height: 800px;

margin: 0 auto;

background-image: url('./clock.jpg');

background-size: 100%;

background-repeat: no-repeat;

/* background-color: lemonchiffon; */

position: relative;

}

.hour{

position: absolute;

top: 0;

left: calc(50% - 5px);

}

.hour span{

width: 10px;

height: 200px;

background-color: salmon;

position: absolute;

top: 200px;

border-radius: 5px;

animation: dx 43200s linear infinite;

transform-origin: bottom;

}

.second{

position: absolute;

top: 0;

left: 1px;

left: calc(50% - 5px);

}

.second span{

width: 6px;

height: 260px;

background-color: tomato;

position: absolute;

left: 2px;

top: 140px;

border-radius: 5px;

animation: dx 60s linear infinite;

transform-origin: bottom;

}

.minute{

position: absolute;

top: 0;

left: calc(50% - 5px);

}

.minute span{

width: 10px;

height: 230px;

background-color: skyblue;

position: absolute;

left: 1px;

top: 170px;

border-radius: 5px;

animation: dx 3600s linear infinite;

transform-origin: bottom;

}

@keyframes dx{

form{transform: rotate(0);}

to{transform: rotate(360deg);}

}

.dian{

width: 25px;

height: 25px;

background-color: red;

border-radius: 50%;

position: absolute;

top: calc(50% - 12.5px);

left: calc(50% - 12.5px);

}

var shour = document.querySelector('.hour span');

console.log(shour)

var sminute = document.querySelector('.minute span');

console.log(sminute)

var ssecond = document.querySelector('.second span');

console.log(ssecond)

var time = new Date();

var hour = time.getHours();

console.log(hour)

var minute = time.getMinutes();

console.log(minute)

var second = time.getSeconds();

console.log(second)

shour.style.animationDelay = '-'+(hour*3600+minute*60+second)+'s';

sminute.style.animationDelay = '-'+(minute*60+second)+'s';

ssecond.style.animationDelay = '-'+second+'s';

一键复制

编辑

Web IDE

原始数据

按行查看

历史