<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body {
height: 100%;
background: #9c9;
}
/* #warp {
width: 230px;
height: 230px;
border:black 1px solid;
} */
#clock {
margin: 50px auto;
width: 200px;
height: 200px;
border-radius: 115px;
/* border: 15px solid #f96; */
background: white;
position: relative;
}
/* 每个数字的大框旋转大框时数字铺满表面 */
#number div {
width: 200px;
height: 20px;
position: absolute;
left: 5px;
top: 90px;
/* border: 1px solid black; */
}
/* 设置每个数字位置 */
#number span {
display: block;
width: 20px;
height: 20px;
/* border: 1px solid black; */
}
/* 给表针设置公共属性:定位 旋转基点 */
.pointer {
position: absolute;
bottom: 90px;
transform-origin: 50% 90%;
-webkit-transform-origin: 50% 90%;
}
#houre {
width: 5px;
height: 60px;
left: 98px;
background: black;
/* transform: rotate(90deg); */
}
#minute {
width: 3px;
height: 70px;
left: 99px;
background: gray;
/* transform: rotate(-90deg); */
}
#second {
width: 1px;
height: 80px;
left: 100px;
background: red;
}
</style>
</head>
<body>
<div id="warp">
<div id="clock">
<div id="number">
<div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div>
<div><span>1</span></div>
<div><span>2</span></div>
<div><span>3</span></div>
<div><span>4</span></div>
<div><span>5</span></div>
<div><span>6</span></div>
<div><span>7</span></div>
<div><span>8</span></div>
<!-- <div><span>9</span></div>
<div><span>10</span></div>
<div><span>11</span></div>
<div><span>12</span></div> -->
</div>
<div id="houre" class="pointer"></div>
<div id="minute" class="pointer"></div>
<div id="second" class="pointer"></div>
</div>
</div>
</body>
<script>
var oNumber = document.getElementById("number"); // 钟表
var oDiv = oNumber.querySelectorAll('div'); //数字大框
var oSpan = oNumber.querySelectorAll('span');//数字小框
var oHoure = document.getElementById("houre");//时针
var oMinute = document.getElementById("minute");//分针
var oSecond = document.getElementById("second");//秒针
// 遍历 div 并赋值旋转 数字到钟表指定位置
for (var i = 0; i < oDiv.length; i++) {
oDiv[i].style.transform = "rotate(" + i * 30 + "deg)";
//style.transform=rotate( x + deg )
}
//遍历 span 并赋值旋转 使数字摆正
for (var j = 0; j < oSpan.length; j++) {
oSpan[j].style.WebkitTransform = "rotate(" + j * -30 + "deg)";
}
var s = 0;
var m = 0;
var h = 0;
setInterval(function () {
s++
if (s == 60) {
s = 0
m += 1
}
if (m == 60) {
m = 0
h += 1
}
console.log(s, 's');
console.log(m, 'm');
console.log(h, 'h');
oSecond.style.transform = 'rotate(' + (s * 6) + 'deg)'
oMinute.style.transform = 'rotate(' + (m * 6) + 'deg)'
oHoure.style.transform = 'rotate(' + (m / 60 * 30) + 'deg)'
}, 1000);
</script>
</html>
js和html制作的时钟
最新推荐文章于 2022-03-09 21:19:52 发布