Many friends asked me to turn the page clock code, now posted to you. Code level is limited, forgive me. See not understand can ask me 🙂
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 () {
}
})
Copy the codewxml
<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'? "> <view class="setting-item"> <view class="setting-item-title"> <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"> Color = "# 000" data - name = "showSolarday" checked = "{{flipClockSetting. ShowSolarday}}" > < / switch > calendar < switch catchtap="switchSec" class="switch" color="#000" data-name="showLunarday" Checked = "{{flipClockSetting. ShowLunarday}}" > < / switch > week < switch catchtap = "switchSec" class = "switch" color = "# 000" data-name="showWeekday" checked="{{flipClockSetting.showWeekday}}"></switch> </view> </view> </view> </view> <! -- -->Copy the codetemplate
<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>Copy the codeExperience the code
