微信小程序时钟

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

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.time1const 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