JS时钟

最新推荐文章于 2022-04-12 23:14:24 发布

紫颖梦忆

最新推荐文章于 2022-04-12 23:14:24 发布

阅读量530

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/jiaqingge/article/details/52848061

版权

随笔专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

* {

margin: 0;

padding: 0;

}

#wrap {

width: 300px;

height: 300px;

border-radius:50%;

background:gray;

margin:100px auto;

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;

}

#number div{

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>

</div>

</div>

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

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

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

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

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

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

var divs = document.querySelectorAll("#number div");

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

//修正刻度的位置

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

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

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

}

function times(){

var now = new Date();

var h = now.getHours();

var m = now.getMinutes();

var s = now.getSeconds();

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

var hDeg = m / 60 * 30;

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

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

var mDeg = s / 60 * 6;

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

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

var sDeg = s * 6;

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

}

times();

setInterval(times, 1000);

</script>

</body>

</html>

紫颖梦忆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS时钟

DOCTYPE html>html>head>metacharset="UTF-8">title>JS时钟title>styletype="text/css">*{margin:0;padding:0;}#wrap{width:300px;height:300px;border-radius:50%;backg
复制链接

扫一扫

专栏目录