微信小程序时钟制作教程

微信小程序自定义时钟，模拟翻牌时钟。

1、页面布局

<view class="date-time-box">
  <view class="date-box">{{nowDate}}</view>
   <view class="time-box">
     <view>
       <image class="pic01 {{move[0]?'move-up':''}}" src="../../static/image/time/{{arr[time1[0]]}}" mode="widthFix"></image>
       <image class="pic02 {{move[0]?'move-up':''}}" src="../../static/image/time/{{arr[time2[0]]}}" mode="widthFix"></image>
     </view>
     <view>
       <image class="pic01 {{move[1]?'move-up':''}}" src="../../static/image/time/{{arr[time1[1]]}}" mode="widthFix"></image>
       <image class="pic02 {{move[1]?'move-up':''}}" src="../../static/image/time/{{arr[time2[1]]}}" mode="widthFix"></image>
     </view>
     <view>
       <image class="pic01" src="../../static/image/time/mao.png" mode="widthFix"></image>
     </view>
     <view>
       <image class="pic01 {{move[3]?'move-up':''}}" src="../../static/image/time/{{arr[time1[3]]}}" mode="widthFix"></image>
       <image class="pic02 {{move[3]?'move-up':''}}" src="../../static/image/time/{{arr[time2[3]]}}" mode="widthFix"></image>
     </view>
     <view>
       <image class="pic01 {{move[4]?'move-up':''}}" src="../../static/image/time/{{arr[time1[4]]}}" mode="widthFix"></image>
       <image class="pic02 {{move[4]?'move-up':''}}" src="../../static/image/time/{{arr[time2[4]]}}" mode="widthFix"></image>
     </view>
   </view>
 </view>

2、页面样式

.date-time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 22%;
}
.date-box {
  padding: 20rpx 0;
  font-size: 36rpx;
  font-weight: bold;
  color: #363636;
}
.time-box {
  display: flex;
  flex-direction: row;
  padding: 0 25%;
}
.time-box view{
  overflow: hidden;
  width: 28px;
  height: 46px;
}
.time-box image{
  width: 100%;
}
.move-up {
  animation-name: run;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(100);
}
@keyframes run {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-46px);
  }
}

3、页面逻辑

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arr: [
      '0.png',
      '1.png',
      '2.png',
      '3.png',
      '4.png',
      '5.png',
      '6.png',
      '7.png',
      '8.png',
      '9.png',
      'mao.png'
    ],
    time1: [0, 0, 0, 0, 0],
    time2: [0, 0, 0, 0, 0],
    move: [false, false, false, false, false],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const that = this;
    this.initTime();
    setInterval(function () {
      that.showTime();
    }, 1000);
  },
  initTime() {
    var iNow = new Date();
    var year = iNow.getFullYear();
    var month = iNow.getMonth() + 1;
    var day = iNow.getDate();
    var week = iNow.getDay();
    var arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const time1 = this.toTwo(iNow.getHours()) + ':' + this.toTwo(iNow.getMinutes());
    var iNew = new Date(iNow.getTime() + 1000 * 60);
    const time2 = this.toTwo(iNew.getHours()) + ':' + this.toTwo(iNew.getMinutes());
    this.setData({
      nowDate: month + '月' + day + '日 ' + arr[week],
      time1: time1.split(''),
      time2: time2.split(''),
    })
  },
  showTime() {
    const that = this;
    var iNow = new Date();
    const oldTime = this.data.time1
    const time1 = this.toTwo(iNow.getHours()) + ':' + this.toTwo(iNow.getMinutes());
    var iNew = new Date(iNow.getTime() + 1000 * 60);
    const time2 = this.toTwo(iNew.getHours()) + ':' + this.toTwo(iNew.getMinutes());
    if (time1 != oldTime.join('')) {
      const newTime = time1.split('');
      const move = this.data.move;
      for (var i = 4; i >= 0; i--) {
        if (newTime[i] != oldTime[i]) {
          move[i] = true;
        }
      }
      this.setData({
        move: move,
      })
      setTimeout(function () {
        that.setData({
          move: [false, false, false, false, false],
          time1: time1.split(''),
          time2: time2.split(''),
        })
      }, 2000)
    }
  },
  toTwo(n) {
    return n < 10 ? '0' + n : '' + n;
  },
})

4、图片资源

下载链接: https://pan.baidu.com/s/1xrKOB4XD0OQqgM_CSMbk0A