JS时钟

来源：互联网发布：mysql,书编辑：程序博客网时间：2024/05/24 01:37

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

#wrap{

width:300px;

height:300px;

border-radius:50%;

background:gray;

margin:100pxauto;

position:relative;

}

#clock{

width:250px;

height:250px;

border-radius:50%;

background: white ;

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

}

#number{

width:100%;

height:100%;

position:relative;

}

#numberdiv{

width:240px;

height:30px;

/*background:red;*/

position:absolute;

top:0;

bottom:0;

left:0;

right:0;

margin:auto;

font-size:25px;

line-height:30px;

}

#hour{

width:5px;

height:65px;

background:purple;

}

#minute{

width:3px;

height:80px;

background:greenyellow;

}

#second{

width:1px;

height:95px;

background:red;

}

.num{

position:absolute;

bottom:50%;

left:50%;

/*修改变换点*/

transform-origin:50%bottom;

}

span{

display:inline-block;

}

</style>

</head>

<body>

<divid="wrap">

<divid="clock">

<divid="number">

</div>

<divid="hour" class="num"></div>

<divid="minute" class="num"></div>

<divid="second" class="num"></div>

</div>

<scripttype="text/javascript">

//分别获取时针,分针,秒针

varhour = document.getElementById("hour");

var minute = document.getElementById("minute");

var second = document.getElementById("second");

// var numberDiv = document.getElementById("number");

// var divs = numberDiv.getElementsByTagName("div")

vardivs = document.querySelectorAll("#number div");

var spans = document.getElementsByTagName("span");

//修正刻度的位置

for(vari = 0; i < divs.length; i++){

divs[i].style.transform= "rotate(" + i * 30 + "deg)";

spans[i].style.transform= "rotate(" + i * -30 + "deg)";

}

functiontimes(){

varnow = new Date();

varh = now.getHours();

varm = now.getMinutes();

vars = now.getSeconds();

//时针旋转的角度由小时和分钟共同决定.

varhDeg = m / 60* 30;

hour.style.transform= "rotate(" + (h * 30 + hDeg) + "deg)";

//分针旋转的角度由分针和秒针共同决定

varmDeg = s / 60* 6;

minute.style.transform= "rotate(" + (m * 6 + mDeg) + "deg)";

//秒针的旋转由秒针决定

varsDeg = s * 6;

second.style.transform= "rotate(" + (sDeg) + "deg)";

}

times();

setInterval(times, 1000);

</script>

</body>

</html>

0 0