翻页时钟代码大公开_lovefan的博客-程序员资料

技术标签: css  javascript  

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

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>
复制代码

体验码

微信图片_20210517111505.jpg


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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lovefan/article/details/119040569

智能推荐

httpmime实现http请求—post以及get请求、文件下载等_摊研发的饼子的博客-程序员资料

摘要非web项目实现文件下载,使用apache的httpmime工具进行相关的http请求操作。正题需求:实现非web项目进行文件下载或者http请求。添加相关pom依赖 &amp;amp;amp;amp;amp;amp;amp;amp;lt;dependency&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;groupId&amp;amp;amp;amp;amp;amp;amp;amp;gt

笔记:强化学习入门:SARSA 算法_朱小丰的博客-程序员资料_sarsa算法世界的最右边有宝藏。

SARSA 算法和 Q Learning算法是同一种强化学习基本算法。但是SARSA 算法采取了和Q Learning 不同的迭代更新策略。1 SARSA 算法SARSA 算法的更新步骤为:记录当前的state 执行上一步选定的action 得到奖励reward 和 新的状态 new_state 在new_state下 根据当前的Q函数 ,选定的要执行的不走new_actio...

FOC_矢量控制相关资料_weixin_30345055的博客-程序员资料

http://www.eepw.com.cn/news/listbylabel/label/FOC/FOC(field-oriented control)为磁场导向控制,又称为矢量控制(vector control),是一种利用变频器(VFD)控制三相交流马达的技术,利用调整变频器的输出频率、输出电压的大小及角度,来控制马达的输出。其特性是可以个别控制马达的的磁场及转矩,类似他激...

FOC控制原理_Jack-Mai的博客-程序员资料_foc控制

# FOC控制原理简介​ 电机分为有刷电机和无刷电机,这里主要描述的FOC控制算法主要是针对无刷电机的控制,无刷电机用于飞行器或者四足狗、机械臂等这种高精度的环境当中。玩过四轴的都比较清楚在,四轴飞行器中一般采用电调的驱动方式,那么电调和FOC直接有什么优缺点呢?电调比较适用于电机告诉旋转的场景,而对低速的控制确实乏力,而FOC无论在高速还是低速的场景下都适用​ FOC用途之一,比如下面的狗子:​ https://www.youtub...

PyQt5 Qt 窗体去边框,去边框后可移动_神秘吃瓜人的博客-程序员资料_pyqt5 去掉边框

有时为了制作工具条,或者其他特殊美化需求,需要把窗体的边框去掉,但是边框去掉后窗体无法移动。接下来解决如何移动去掉边框后的窗体。1、先看一个效果图2、具体操作窗体去边框:self.setWindowFlags(Qt.FramelessWindowHint) # 去边框重写3个函数:mouseMoveEvent(self, e: QMouseEvent) # 重写鼠标移动事件,根据鼠标的轨迹,移动窗体。mousePressEvent(self, e: QMouseEvent)...

magento学习—5.自动化脚本构建_qq_28613081的博客-程序员资料

linux#!/bin/bashrm -rf generatedrm -rf pub/static/adminhtmlrm -rf pub/static/frontendrm -rf var/view_preprocessedrm -rf var/cacherm -rf var/page_cacheecho '缓存文件已经删除'php -dmemory_limit=4G bin/magento setup:upgradephp -dmemory_limit=4G bin/magen

随便推点

Flume 实战(2)--Flume-ng-sdk源码分析_lskyne的博客-程序员资料_flume-ng-sdk

转自:http://www.cnblogs.com/mumuxinfei/p/3823266.html

平庸开发者的生存指南_码农之屋的博客-程序员资料

我的公众号「码农之屋」(id: Spider1818),分享的内容包括但不限于 Linux、网络、云计算虚拟化、容器Docker、OpenStack、Kubernetes、SDN、OVS、DPDK、Go、Python、C/C++编程技术等内容,欢迎大家关注。撇开题目不谈,我个人认识一些非常有才华的开发人员,他们可以一帆风顺地创建极好的软件。正是这些天赋人士,使得外行人对我们这个行业充满了...

机器学习模型-lightGBM_搬运工1627486的博客-程序员资料

提升框架lightGBM(一)参数说明(二)API接口调用 (三)使用指定数据格式建模预测(四)输出结果 

再Form表单中如何使用富文本组件_陈正阳~的博客-程序员资料

Braft Editor1.安装和使用:# 使用npm安装npm install braft-editor --save# 使用yarn安装yarn add braft-editor2.使用:编辑器支持value和onChange属性,这类似于React中原生的input组件。通常情况下,可以用典型的受控组件的形式来使用本编辑器:import React from 'react'// 引入编辑器组件import BraftEditor from 'braft-editor'// 引_1671465600

蓝懿 ios技术交流和心得分享12.31_凉心垃圾丶的博客-程序员资料

明天就是元旦了  2016年啦   加油吧  明天你好!!键盘监听:#import "ViewController.h"@interface ViewController ()@property (nonatomic, strong)UIToolbar *toolbar;@[email protected] ViewController-

推荐文章

热门文章

相关标签