1. 编程号首页

翻页时钟的代码

编程小号 • • 未分类

翻页时钟的代码不少朋友向我要翻页时钟的代码，现在贴给大家。代码水平有限，见谅。看不明白的可以问我：）也欢迎大家体验‘完美工具’其他功能。

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

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>

wxss

page {
  --flipSize:23vw;
  --flipFontSize:16vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff
}

.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.flipClockThumb-wrap {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 10px;
  padding: 2px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.selected {
  border: 1px solid #999;

}

.flipClockThumb {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background);
  padding: 10px;
  border-radius: 10px;

}

.flipClockThumb .nums {
  margin: 0 2px;
  color: var(--flipFontColor);
  background: var(--flipColor);
  padding: 5px;
  border-radius: 5px;
  font-size: 20px;
  height: 20px;
  width: 20px;

}

.flipClockThumb .nums::before {
  height: 1px;
}

.flipClockThumb .nums::after {
  height: 0px;
}

.switch {
  margin: 0 10px;
}

/* flip */
.flip-container {

  background: var(--background);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition-duration: all 0.3s;
}

.nums-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  transition-duration: all 0.3s;
}

.date {
  margin-top: 5px;
  display: flex;
  width: calc(var(--flipSize)* 3 + 9vw);
  justify-content: space-around;
  align-items: center;
  color: var(--dateColor);
  opacity: 0.4;

}

.date view {
  flex: 1;
  text-align: center;
  visibility: display;
  transition-duration: all 0.3s;
}

.nums {
  font-family: "Anton", sans-serif;
  width: var(--flipSize);
  height: var(--flipSize);
  font-size:  var(--flipFontSize);
  margin: 0 1.5vw;
  perspective: 1000px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.05);
}

.nums::before {
  content: '';  
  height: 2px;
  background: var(--flipColor); 
  position: absolute;
  width:100%;
  left: 0;
  top: 50%;
  z-index: 100;
  -webkit-filter: brightness(90%);
  filter: brightness(90%);

}

.nums::after {
  content: '';
  height: 100%;
  background: var(--flipColor);
  position: absolute;
  width: 1px;
  right: 50%;
  top: 0;
  z-index: 10000;
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
}

/* */

.num {
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  line-height: var(--flipSize);
  text-align: center;
  color: var(--flipFontColor);
}

.num.ten::before,
.num.ten .flip::before {
  border-radius: 10px 0px 0px 0px
}

.num.ten::after,
.num.ten .flip::after,
.num.ten .noflip::after {
  border-radius: 0px 0px 0px 10px
}

.num.one::before,
.num.one .flip::before {
  border-radius: 0px 10px 0px 0px
}

.num.one::after,
.num.one .flip::after,
.num.one .noflip::after {
  border-radius: 0px 0px 10px 0px
}

/* .num+.num { margin-left: 1px; } */

.num:before,
.num:after,
.flip:before,
.flip:after,
.noflip::after {
  background: var(--flipColor);
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: block;
  height: 50%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  text-align: center;

}

.num:before {
  content: attr(data-num);
  line-height: var(--flipSize);
  left: 0;
  top: 0;
  transform-origin: 50% 100%;
  z-index: 1;
}

.num:after {
  content: attr(data-pre);
  line-height: 0;
  left: 0;
  top: 50%;
  transform-origin: 0% 0%;
  z-index: 1;
}

.noflip::after {
  content: attr(data-num);
  line-height: 0;
  left: 0;
  top: 50%;
  transform-origin: 0% 0%;
  background: var(--flipColor);
  z-index: 2;
}

.flip::before {
  content: attr(data-pre);
  line-height: var(--flipSize);
  left: 0;
  top: 0;
  transform-origin: 50% 100%;
  animation: flip-up 900ms ease-in both;
  z-index: 2;
  background: var(--flipColor);

}

.flip::after {
  content: attr(data-num);
  line-height: 0;
  left: 0;
  top: 50%;
  transform-origin: 0% 0%;
  animation: flip-down 900ms ease-in both;
  z-index: 2;
  background: var(--flipColor);

}

/* */
@keyframes flip-up {
  0% {
    transform: rotateX(0deg);


  }

  100% {
    transform: rotateX(-180deg);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
  }

}

@keyframes flip-down {
  0% {
    transform: rotateX(180deg);
  }

  90% {
    transform: rotateX(20deg);
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.2), var(--shadow);
  }

  100% {
    transform: rotateX(0deg);
    box-shadow: none;
  }
}

体验码

微信图片_20210517111505.jpg

今天的文章翻页时钟的代码分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/13955.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注