html语言中钟表怎么做,使用HTML5和CSS3制作简单的钟表

li{

list-style:none;

}

#box{

width:400px;

height:400px;

position:absolute;

top:calc(50%-200px);

left:calc(50%-200px);

border:2pxsolidpalegoldenrod;

}

#dial{

width:200px;

height:200px;

position:absolute;

top:calc(50%-100px);

left:calc(50%-100px);

border:2pxsolidcyan;

border-radius:50%;

}

.scaleIndex{

width:4px;

height:12px;

position:absolute;

top:0;

left: calc(50%-2px);

background-color:gray;

transform-origin:2px100px;

}

.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;

}

< type ='text/java'src ='js/jquery-3.2.1.js'>>

< type ="text/java">

window. = 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);

}

>