console
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>css3时钟</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta name="renderer" content="webkit">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
font-size: 14px;
font-family: sans-serif,Microsoft YaHei,Helvetica Neue,-apple-system,PingFang SC,Hiragino Sans GB,Arial;
color: #27282b;
background: transparent url('https://i.loli.net/2020/06/03/RL4k57IWDJSZ8wA.png') no-repeat center;
background-size: cover;
}
a {
text-decoration: none;
color: #27282b;
}
*,
*::before,
*::after {
outline: none;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
:root {
--h_deg: 0;
--m_deg: 0;
}
.sp-clock {
width: 320px;
height: 320px;
border-radius: 55%;
border: 1px solid #dddddd55;
background: #53608644;
position: fixed;
top: -350px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.sp-clock::before {
content: '';
width: 3%;
height: 52%;
border-radius: 2px;
background: #3a8;
transform: rotate(var(--h_deg));
transition: .5s;
clip-path: inset(0 0 44% 0);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.sp-clock::after {
content: '';
width: 2%;
height: 65%;
border-radius: 2px;
background: #3a8;
transform: rotate(var(--m_deg));
transition: .5s;
clip-path: inset(0 0 44% 0);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
z-index: 2;
}
.sp-clock li {
width: 1%;
height: 3%;
background: #e2e2e2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: 1;
}
.sp-clock li:nth-child(3n+1) {
background: #4c83e9;
width: 1.5%;
height: 4.2%;
}
</style>
</head>
<body>
<div class="wrapper" id="app">
<ul class="sp-clock" data-hour>
<li v-for="(v, i) of pointerList" :key="i" :style="getLiStyle(i)"></li>
</ul>
</div>
<script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
aList: [],
pointerList: [],
}
},
methods: {
createPointer() {
this.pointerList = Array.from({length: 12}, (v, i) => v = i + 1)
},
getLiStyle(idx) {
let angle = -180 + 30 * idx
let traY = document.querySelector('.sp-clock').clientWidth
return `transform: rotate(${angle}deg) translateY(${traY / 2.25}px);`
},
runClock() {
setTimeout(() => {
let hour = new Date().getHours()
let m = new Date().getMinutes()
let h_deg = hour % 12 * 30 + 30 / (60 / m)
let m_deg = Math.trunc(Date.now() / 1e3) % 3600 / 10
document.documentElement.style.setProperty('--h_deg', `${h_deg}deg`)
document.documentElement.style.setProperty('--m_deg', `${m_deg}deg`)
this.runClock()
}, 1000)
},
},
mounted() {
this.createPointer()
this.runClock()
},
})
</script>
</body>
</html>