Vue 动态时钟案例

馬致远2025-12-10 11:25
显示效果及源代码
js 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue动态时间显示</title>
  <script src="./js/vue.js"></script>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      margin: 0;
    }
    .time-container {
      background: white;
      padding: 2rem 3rem;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      text-align: center;
    }
    .time {
      font-size: 3rem;
      font-weight: bold;
      color: #2c3e50;
      margin-bottom: 0.5rem;
    }
    .date {
      font-size: 1.5rem;
      color: #7f8c8d;
    }
    .weekday {
      font-size: 1.8rem;
      color: #3498db;
      margin-top: 0.5rem;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="time-container">
      <div class="time">{{ formattedTime }}</div>
      <div class="date">{{ formattedDate }}</div>
      <div class="weekday">{{ weekday }}</div>
    </div>
  </div>

  <script >
    var vm = new Vue({
    el: '#app',
    data: {
      currentTime: new Date(),
      weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    },
    computed: {
      formattedTime() {
        const hours = this.padZero(this.currentTime.getHours());
        const minutes = this.padZero(this.currentTime.getMinutes());
        const seconds = this.padZero(this.currentTime.getSeconds());
        return `${hours}:${minutes}:${seconds}`;
      },
      formattedDate() {
        const year = this.currentTime.getFullYear();
        const month = this.padZero(this.currentTime.getMonth() + 1);
        const day = this.padZero(this.currentTime.getDate());
        return `${year}-${month}-${day}`;
      },
      weekday() {
        return this.weekdays[this.currentTime.getDay()];
      }
    },
    methods: {
      padZero(num) {
        return num < 10 ? '0' + num : num;
      },
      updateTime() {
        this.timer = setInterval(() => {
          this.currentTime = new Date();
        }, 1000);
      }
    },

    created() {
      this.updateTime();
    },
    beforeDestroy() {
      clearInterval(this.timer);
    }
  });
  </script>
</body>
</html>