靈感來源
在codepen上看到一個大佬的作品，比較有意思，就想用vue寫一個更簡單的。代碼很簡單。
gif演示圖片加載緩慢，可以點擊這里可以查看代碼運行效果
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>數字時鍾</title>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<style>
:root {
--numberSize: 40px;
--clockColor: blueviolet;
}
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#app {
position: relative;
margin-top: 400px;
display: flex;
}
#app::before,
#app::after {
position: absolute;
top: 13px;
right: 102px;
content: '';
display: block;
width: 4px;
height: 4px;
box-shadow: 0px 10px 0px 0px var(--clockColor);
background-color: var(--clockColor);
}
#app::before {
left: 86px;
}
.strip {
height: fit-content;
margin: 0 5px;
border-radius: 4px;
background-color: #99CCFF;
transition: .5s;
}
.strip:nth-of-type(2n) {
margin-right: 20px;
}
.number {
width: calc(var(--numberSize) - 10px);
height: var(--numberSize);
line-height: var(--numberSize);
color: #fff;
text-align: center;
}
.number.active {
color: var(--clockColor);
font-size: 20px;
font-weight: bold;
transition: .5s;
}
</style>
</head>
<body>
<div id="app">
<ul
v-for="(strip, index) in stripArr"
:key="index"
class="strip"
:style="{transform: `translateY(${-timeArr[index] * 40}px)`}">
<li
v-for="num in strip"
:key="num"
class="number"
:class="{active: timeArr[index] === num - 1}">
{{num-1}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
stripArr: [3, 10, 6, 10, 6, 10],
timeArr: [0, 0, 0, 0, 0, 0]
},
mounted() {
setInterval(() => {
const time = new Date()
const h = time.getHours().toString().padStart(2, '0')
const m = time.getMinutes().toString().padStart(2, '0')
const s = time.getSeconds().toString().padStart(2, '0')
this.timeArr = (h + m + s).split('').map(Number)
}, 1000)
}
})
</script>
</html>