微信小程序时钟

复制代码
微信小程序自定义时钟,模拟翻牌时钟。

1、页面布局

xml 复制代码
<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、页面样式

css 复制代码
.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、页面逻辑

js 复制代码
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

相关推荐
是一碗螺丝粉13 小时前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
weixin_lynhgworld17 小时前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld17 小时前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗20 小时前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
我叫黑大帅21 小时前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
两个月菜鸟1 天前
vue+微信小程序 五角星
前端·vue.js·微信小程序
说私域1 天前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务优化及复购转介绍提升策略研究
人工智能·小程序
熬耶2 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
IT毕设实战小研2 天前
基于Spring Boot校园二手交易平台系统设计与实现 二手交易系统 交易平台小程序
java·数据库·vue.js·spring boot·后端·小程序·课程设计
weixin_177297220692 天前
剧本杀小程序系统开发:重构推理娱乐生态
小程序·重构·娱乐