用vue写一个炫酷的数字时钟

灵感来源

在codepen上看到一个大佬的作品，比较有意思，就想用vue写一个更简单的。代码很简单。

gif演示图片加载缓慢，可以点击这里可以查看代码运行效果
digital-clock

全部代码

<!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>
posted @ 2022-02-17 17:44  lwlcode  阅读(1279)  评论(0)  编辑  收藏  举报