翻页时钟代码大公开

不少朋友向我要翻页时钟的代码，现在贴给大家。代码水平有限，见谅。看不明白的可以问我：）

js

// miniprogram/pages/flipClock/js
const moment = require('../../../utils/moment-with-locales.min.js');
const Lunar = require('../../../utils/lunar.js');
var startX, endX;
var moveFlag = true; // 判断执行滑动事件
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {   
    themes: [{
      mode: 'dark',
      background: '#000',
      flipColor: '#222',
      flipFontColor: '#fff',
      dateColor: '#fff',
      shadow: '0px 0px 5px rgba(0, 0, 0, 0.4)'
    },
    {
      mode: 'light',
      background: 'radial-gradient(50% 81%, #fff 9%, #cbd5de 82%)',
      flipColor: 'linear-gradient(180deg, #eaeef2 10%, #FFFFFF 100%)',
      flipFontColor: '#4C6377',
      dateColor: '#333',
      shadow: '0px 5px 5px rgba(0, 0, 0, 0.05)'
    },
    {
      mode: 'light',
      background: '#e1f3f2',
      flipColor: '#8eaeab',
      flipFontColor: '#eff7f6',
      dateColor: '#333',
      shadow: '0px 5px 5px rgba(0, 0, 0, 0.1)'
    },
    {
      mode: 'light',
      background: '#b5c1a9',
      flipColor: '#f3f6fd',
      flipFontColor: '#222',
      dateColor: '#333',
      shadow: '0px 5px 5px rgba(0, 0, 0, 0.05)'
    },
    {
      mode: 'light',
      background: '#f8d5c2',
      flipColor: '#2a2829',
      flipFontColor: '#eee',
      dateColor: '#333',
      shadow: '0px 5px 5px rgba(0, 0, 0, 0.4)'
    },
  ],
    flipClockSetting: {
      currentTheme: 0,
      showSolarday: false,
      showLunarday: false,
      showWeekday: false,
      // showSec: true
    },
   // settingMode: 'dark',
    hideNav:true,
    time: {
      hour: {
        tenhourpre: 0,
        tenhour: 0,
        tenhourupdate: false,
        hourpre: 0,
        hour: 0,
        hourupdate: false,
      },
      min: {
        tenminpre: 0,
        tenmin: 0,
        tenminupdate: false,
        minpre: 0,
        min: 0,
        minupdate: false,
      },
      sec: {
        tensecpre: 0,
        tensec: 0,
        tensecupdate: false,
        secpre: 0,
        sec: 0,
        secupdate: false,
      }
    }


  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.setKeepScreenOn({
      keepScreenOn: true
    })
    let that = this
    let flipClockSetting = wx.getStorageSync('flipClockSetting');

    let m = moment().locale('zh-cn');
 

    const solar = Lunar.Solar.fromDate(new Date());
    const lunar = solar.getLunar()

    this.setData({     
      flipClockSetting,
   //   settingMode: this.data.themes[this.data.flipClockSetting.currentTheme].mode,
      'time.solarday': m.format('ll'),
      'time.weekday': m.format('dddd'),
      'time.lunarday': `${lunar.getYearInGanZhi()}年${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}`
    })

    that.setTime(false);
    setInterval(function () {
      that.setTime(true);
    }, 1000);

  },

  setTime(flip) {
    var t = new Date();  
    this.updateGroup('hour', t.getHours(), flip);
    this.updateGroup('min', t.getMinutes(), flip);
    this.updateGroup('sec', t.getSeconds(), flip);
  },
  updateGroup(group, n, flip) {
    let that = this
    var digit1 = `time.${group}.ten${group}`;
    var digit2 = `time.${group}.${group}`;

    var digit3 = `time.${group}.ten${group}pre`;
    var digit4 = `time.${group}.${group}pre`;

    var digit5 = `time.${group}.ten${group}update`;
    var digit6 = `time.${group}.${group}update`

    n = String(n);
    if (n.length == 1) n = '0' + n;
    var num1 = n.substr(0, 1);
    var num2 = n.substr(1, 1);

    var num3 = this.data.time[group][`ten${group}`]
    var num4 = this.data.time[group][`${group}`]

    var num5 = (num1 == num3) ? false : true
    var num6 = (num2 == num4) ? false : true

    // console.log(digit1, num1, num3, num2, num4, num5, num6)
    //  console.log('----------')

    if (!flip) {
      that.setData({
        [digit1]: num1,
        [digit2]: num2,
        [digit3]: num1,
        [digit4]: num2,
        [digit5]: false,
        [digit6]: false,
      })
    } else {
      if (num5) {
        that.setData({
          [digit1]: num1,
          [digit3]: num3,
          [digit5]: num5,
        })

        setTimeout(function () {
          that.setData({
            [digit5]: false,
          })
        }, 900);
      }
      if (num6) {
        that.setData({
          [digit2]: num2,
          [digit4]: num4,
          [digit6]: num6,
        })

        setTimeout(function () {
          that.setData({
            [digit6]: false,
          })
        }, 900);
      }
    }
  },
  setClockStyle(e) {
    console.log(e)
    this.setData({
      clockStyle: e.detail.current
    })
  },
  switchSec(e) {
    let that = this
    let name = e.currentTarget.dataset.name
    let sname = `flipClockSetting.${name}`
    console.log(this.data.showSec)
    that.setData({
      [sname]: that.data.flipClockSetting[name] ? false : true
    })
  },
  switchTheme(e) {
    let that = this
    let index = e.currentTarget.dataset.index
    that.setData({
      'flipClockSetting.currentTheme': index,
  //    settingMode: this.data.themes[index].mode
    })
  },
  toggleModal(e) {
    let modalName = 'setting'
    this.setData({
      hideNav: this.data.hideNav?false:true,
      modalName: this.data.modalName == modalName ? 'null' : modalName
    })
  },
  touchStart: function (e) {
    startX = e.touches[0].pageX; // 获取触摸时的原点
    moveFlag = true;
  },
  // 触摸移动事件
  touchMove: function (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 100) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 100) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }

  },
  // 触摸结束事件
  touchEnd: function (e) {
    moveFlag = true; // 回复滑动事件

  },

  move2left() {
    var that = this;
    // var length = this.data.themes.length
    // console.log(length)
    that.setData({
      'flipClockSetting.currentTheme': (this.data.flipClockSetting.currentTheme == this.data.themes.length - 1) ? 0 : this.data.flipClockSetting.currentTheme + 1
    });
  },
  move2right() {
    var that = this;
    that.setData({
      'flipClockSetting.currentTheme': (this.data.flipClockSetting.currentTheme == 0) ? this.data.themes.length - 1 : this.data.flipClockSetting.currentTheme - 1
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    wx.setStorage({
      data: this.data.flipClockSetting,
      key: 'flipClockSetting',
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
复制代码

wxml

<import src="../template.wxml" />
<navBar  hide="{{hideNav}}"></navBar>
<view class="page" bindtap="toggleModal"   bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  <template is="flipClock" data="{{...flipClockSetting,themes,...time}}"></template>
</view>


<!-- modal setting -->
<view class="setting {{modalName=='setting'?'show':''}}" catchtap="toggleModal"
  style="--color:{{themes[flipClockSetting.currentTheme].mode=='dark'?'#fff':'#000'}}">
  <view class="setting-wrap">
  
      <view class="setting-item">
        <view class="setting-item-title">样式</view>
        <scroll-view scroll-x="true" class="setting-item-content">
          <block wx:for="{{themes}}" wx:key="index">
            <view class="flipClockThumb-wrap {{flipClockSetting.currentTheme==index?'selected':''}}"
              data-index="{{index}}" catchtap="switchTheme">
              <template is="flipClockThumb" data="{{index,flipClockSetting,themes,...time}}"></template>
            </view>
          </block>
        </scroll-view>
      </view>
      <view class="setting-item">
        <view class="setting-item-title">显示</view>
        <view class="setting-item-content">
          年月日 <switch catchtap="switchSec" class="switch" color="#000" data-name="showSolarday"
            checked="{{flipClockSetting.showSolarday}}"></switch>
          农历 <switch catchtap="switchSec" class="switch" color="#000" data-name="showLunarday"
            checked="{{flipClockSetting.showLunarday}}"></switch>
          星期 <switch catchtap="switchSec" class="switch" color="#000" data-name="showWeekday"
            checked="{{flipClockSetting.showWeekday}}"></switch>


        </view>
      </view>
  

  </view>
</view>
<!--  -->
复制代码

template

<template name="flipClock">
  <view class="flip-container"
    style="--background:{{themes[currentTheme].background}};      --flipColor:{{themes[currentTheme].flipColor}};      --flipFontColor:{{themes[currentTheme].flipFontColor}};  --dateColor:{{themes[currentTheme].dateColor}};   --shadow:{{themes[currentTheme].shadow}}">
    <view class="nums-wrap">
      <view class="nums ">
        <view class="num ten" data-num="{{hour.tenhour}}" data-pre="{{hour.tenhourpre}}">
          <view class="{{hour.tenhourupdate?'flip':'noflip'}}" data-num="{{hour.tenhour}}"
            data-pre="{{hour.tenhourpre}}">
          </view>
        </view>
        <view class="num one" data-num="{{hour.hour}}" data-pre="{{hour.hourpre}}">
          <view class="{{hour.hourupdate?'flip':'noflip'}}" data-num="{{hour.hour}}" data-pre="{{hour.hourpre}}"></view>
        </view>
      </view>
      <view class="nums ">
        <view class="num ten" data-num="{{min.tenmin}}" data-pre="{{min.tenminpre}}">
          <view class="{{min.tenminupdate?'flip':'noflip'}}" data-num="{{min.tenmin}}" data-pre="{{min.tenminpre}}">
          </view>
        </view>
        <view class="num one" data-num="{{min.min}}" data-pre="{{min.minpre}}">
          <view class="{{min.minupdate?'flip':'noflip'}}" data-num="{{min.min}}" data-pre="{{min.minpre}}"></view>
        </view>
      </view>
      <view class="nums ">
        <view class="num ten" data-num="{{sec.tensec}}" data-pre="{{sec.tensecpre}}">
          <view class="{{sec.tensecupdate?'flip':'noflip'}}" data-num="{{sec.tensec}}" data-pre="{{sec.tensecpre}}">
          </view>
        </view>
        <view class="num one" data-num="{{sec.sec}}" data-pre="{{sec.secpre}}">
          <view class="{{sec.secupdate?'flip':'noflip'}}" data-num="{{sec.sec}}" data-pre="{{sec.secpre}}"></view>
        </view>
      </view>
    </view>
    <view class="date">
      <view style="visibility:{{showSolarday?'visible':'hidden'}}">{{solarday}}</view>
      <view style="visibility:{{showLunarday?'visible':'hidden'}}">{{lunarday}}</view>
      <view style="visibility:{{showWeekday?'visible':'hidden'}}">{{weekday}}</view>
    </view>
  </view>
</template>
<!--  -->
<template name="flipClockThumb">
  <view class="flipClockThumb"
    style="--background:{{themes[index].background}};      --flipColor:{{themes[index].flipColor}};      --flipFontColor:{{themes[index].flipFontColor}};      --shadow:{{themes[index].shadow}}">
    <view class="nums">
      {{hour.tenhour}}{{hour.hour}}
    </view>
    <view class="nums">
      {{min.tenmin}}{{min.min}}
    </view>
    <view class="nums">
      {{sec.tensec}}{{sec.sec}}
    </view>
  </view>
</template>
<!--  -->
<template name="neonClock">
  <view class="neon-container" style=" --neon-border-color: {{borderColor[currentBorder]}};">
    <view class="neon-clock-wrap neon-border">
      <view class="neon-pink">{{hour.tenhour}}</view>
      <view class="neon-pink">{{hour.hour}}</view>
      <view class="neon-dot">:</view>
      <view class="neon-pink">{{min.tenmin}}</view>
      <view class="neon-pink">{{min.min}}</view>
      <view class="neon-dot" >:</view>
      <view class="neon-blue" >{{sec.tensec}} </view>
      <view class="neon-blue" >{{sec.sec}}</view>
    </view>
  </view>
</template>
复制代码

体验码

作者：kyalong
链接：https://juejin.cn/post/6987677850425884709
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。