JS小案例--简单时钟
JS小案例--简单时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background: #fff;
position: relative;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
/* perspective: 99px;
transform-style: preserve-3d; */
}
#box div {
width: 200px;
height: 5px;
position: absolute;
top: 100px;
background: #000;
}
.list1 {
transform: rotate(90deg);
}
.list2 {
transform: rotate(60deg);
}
.list3 {
transform: rotate(30deg);
}
.list4 {
transform: rotate(120deg);
}
.list5 {
transform: rotate(150deg);
}
#box .list7 {
background: #fff;
width: 180px;
height: 180px;
border-radius: 50%;
top: 10px;
left: 10px;
}
#box .list8 {
background: red;
width: 5px;
height: 80px;
top: 20px;
left: 97px;
transform: rotate(90deg);
transform-origin: 50% bottom;
}
#box .list9 {
background: blue;
width: 5px;
height: 70px;
top: 30px;
left: 97px;
transform-origin: 50% bottom;
}
#box .list10 {
background: pink;
width: 5px;
height: 60px;
top: 40px;
left: 97px;
transform-origin: 50% bottom;
}
</style>
</head>
<body bgcolor="#000">
<div id="box">
<div class="list1"></div>
<div class="list2"></div>
<div class="list3"></div>
<div class="list4"></div>
<div class="list5"></div>
<div class="list6"></div>
<div class="list7"></div>
<div class="list8 list"></div>
<div class="list9 list"></div>
<div class="list10 list"></div>
</div>
</body>
<script>
(function () {
var list = document.getElementsByClassName('list');
var speed = 6;
function show() {
var timer = new Date;
var hour = timer.getHours();
var minute = timer.getMinutes();
var miao = timer.getSeconds();
console.log(hour, minute, miao);
list[0].style = 'transform: rotate(' + miao * speed + 'deg);';
list[1].style = 'transform: rotate(' + minute * speed + 'deg);';
list[2].style = 'transform: rotate(' + (hour * 30 + 30 * (minute / 60)) + 'deg);';
console.log(hour * speed);
}
setInterval(show, 1000);
})();
</script>
</html>
