微信小程序时钟

深藏阁楼爱情的钟 2023-10-14 17:37 46阅读 0赞

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

##### 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 ][https_pan.baidu.com_s_1xrKOB4XD0OQqgM_CSMbk0A]

[https_pan.baidu.com_s_1xrKOB4XD0OQqgM_CSMbk0A]: https://pan.baidu.com/s/1xrKOB4XD0OQqgM_CSMbk0A