原生js钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>钟表</title>
<style>
.biao {
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
margin: 0 auto;
margin-top: 100px;
position: relative;
background-image: url(https://s.cn.bing.net/th?id=OIP-C.iilMusn3clq4IvVfdvzjOwHaKe&w=210&h=297&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2);
background-size: cover;
background-position: center;
}
.kedu {
width: 3px;
height: 150px;
position: absolute;
left: 0;
right: 0;
margin: auto;
transform-origin: 50% 100%;
}
.miao {
width: 5px;
height: 150px;
position: absolute;
left: 0;
right: 0;
margin: auto;
transform-origin: 50% 100%;
}
</style>
</head>
<body>
<div class="biao">
</div>
</body>
<script>
let biao = document.querySelector('.biao')
for (let i = 0; i < 60; i++) {
let kedu = document.createElement('div')
kedu.className = 'kedu'
kedu.style.transform = "rotate(" + i * 6 + "deg)"
if (i % 5 == 0) {
kedu.style.background = "linear-gradient(#888888 13%, transparent 0%)"
} else {
kedu.style.background = "linear-gradient(#888888 7%, transparent 0%)"
}
biao.append(kedu)
}
let miao = document.createElement('div')
miao.className = 'miao'
miao.style.background = "linear-gradient(transparent 30%, black 0%)"
let fen = document.createElement('div')
fen.className = 'miao'
fen.style.background = "linear-gradient(transparent 48%, black 0%)"
let shi = document.createElement('div')
shi.className = 'miao'
shi.style.background = "linear-gradient(transparent 58%, black 0%)"
let timer = setInterval(() => {
let date = new Date()
let hour = date.getHours() - 12
let min = date.getMinutes()
let sec = date.getSeconds()
let hour_deg = hour * 30 + min * 0.5 + sec * (0.5 / 60)
let min_deg = min * 6
let sec_deg = sec * 6
miao.style.transform = "rotate(" + sec_deg + "deg)"
fen.style.transform = "rotate(" + min_deg + "deg)"
shi.style.transform = "rotate(" + hour_deg + "deg)"
biao.append(miao)
biao.append(fen)
biao.append(shi)
}, 1000);
</script>
</html>