9.HTML+CSS+JS——Kobe_頁面鐘錶
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鐘錶案例</title>
<style>
* {
margin: 0;
height: 0;
list-style: none;
}
body {
/* background-color: #262626; */
background: url(images/KK.jpg) no-repeat;
}
.div1 ul {
background-color: #fff000;
}
.div1 {
position: relative;
width: 300px;
height: 300px;
border: 5px solid purple;
margin: 30px auto;
border-radius: 50%;
}
.div1 ul li {
position: absolute;
left: 50%;
top: 0;
width: 4px;
height: 6px;
transform-origin: center 150px;
background-color: #fff000;
}
.hour {
position: absolute;
left: 50%;
top: 135px;
width: 10px;
height: 50px;
transform-origin: bottom;
background-color: #fff000;
}
.minu {
position: absolute;
left: 50%;
top: 95px;
width: 6px;
height: 90px;
background-color: #fff000;
transform-origin: bottom;
}
.seco {
position: absolute;
left: 50%;
top: 65px;
width: 2px;
height: 120px;
background-color: #fff000;
transform-origin: bottom;
}
.ball {
position: absolute;
left: 965px;
top: 184px;
width: 20px;
height: 20px;
border-radius: 50%;
margin: -10px;
background-color: purple;
}
</style>
</head>
<body>
<div class="div1">
<ul class="ull"></ul>
</div>
<div class="hour"></div>
<div class="minu"></div>
<div class="seco"></div>
<div class="ball"></div>
<script>
var ull = document.querySelector('.ull');
var hour = document.querySelector('.hour');
var minu = document.querySelector('.minu');
var seco = document.querySelector('.seco');
// 註冊事件
for (var i = 0; i < 60; i++) {
var li = document.createElement('li');
li.style.transform = 'rotate( ' + (6 * i) + 'deg)';
if (i % 5 == 0) {
li.style.height = '15px';
li.style.background = '#ba35f0';
}
ull.appendChild(li);
}
run();
setInterval(run, 1000);
function run() {
var time = new Date();
var H = time.getHours();
var M = time.getMinutes();
var S = time.getSeconds();
hour.style.transform = 'rotate(' + (H * 30 + M / 2) + 'deg)';
minu.style.transform = 'rotate(' + (M * 6) + 'deg)';
seco.style.transform = 'rotate(' + (S * 6) + 'deg)';
}
</script>
</body>
</html>
分享