微信小程序时钟

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

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

相关推荐
甜甜的资料库38 分钟前
基于微信小程序的睡眠宝系统源码数据库文档
数据库·微信小程序·小程序
华子w90892585940 分钟前
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
spring boot·微信小程序·uni-app
恰薯条的屑海鸥2 小时前
关于我对各开发语言的看法与接下来的文章内容
开发语言·学习·微信小程序·网站开发·全栈开发
勿念4362 小时前
基于鸿蒙(HarmonyOS5)的打车小程序
华为·小程序·harmonyos
Stanford_11063 小时前
关于大数据的基础知识(二)——国内大数据产业链分布结构
大数据·开发语言·物联网·微信小程序·微信公众平台·twitter·微信开放平台
邹荣乐6 小时前
uni-app开发微信小程序的报错[渲染层错误]排查及解决
前端·微信小程序·uni-app
weixin_177297220698 小时前
盲盒一番赏小程序:引领盲盒新潮流
小程序
chaosama1 天前
微信小程序带参分享、链接功能
微信小程序·小程序
胡西风_foxww1 天前
微信小程序动态组件加载的应用场景与实现方式
微信小程序·应用·加载·动态组件
ALLSectorSorft1 天前
上门服务小程序会员系统框架设计
小程序·apache