• 微信小程序实现一天倒计时


    微信小程序实现一天倒计时

    <view class="container">
    <view class="title">一天倒计时 </view>
    <view class="title"> </view>
    <view class="top_tip">
      <view class="countdown-title">
        今天剩余时间:
        <block>
          <!-- <text class="">{{days}}天</text> -->
          <text>{{ hours }}时</text>
          <text>{{ minutes }}分</text>
          <text>{{ seconds }}秒</text>
        </block>
      </view>
    </view>
    </view>
    // index.js
    // const app = getApp()
    const { envList } = require('../../envList.js');
    
    Page({
      data: {
        feiTime:"2022年8月8日23:46:11",
        nowDate: '2022-12-31 23:59:59', //结束时间
        countdown: '', //倒计时
        days: '00', //
        hours: '00', //
        minutes: '00', //
        seconds: '00', //
      },
      countTime() {
        let days,hours, minutes, seconds;
        let nowDate = this.data.nowDate;
        console.log(nowDate)
        let that = this;
        let now = new Date().getTime();
        let end = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
        // console.log("开始时间:" + now, "截止时间:" + end);
        let leftTime = end - now; //时间差
        if (leftTime >= 0) {
          days = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          hours = Math.floor(leftTime / 1000 / 60 / 60 % 24);
          minutes = Math.floor(leftTime / 1000 / 60 % 60);
          seconds = Math.floor(leftTime / 1000 % 60);
          seconds = seconds < 10 ? "0" + seconds : seconds
          minutes = minutes < 10 ? "0" + minutes : minutes
          hours = hours < 10 ? "0" + hours : hours
          that.setData({
            countdown: days+":"+hours + ":" + minutes + ":" + seconds,
            days,
            hours,
            minutes,
            seconds
          })
          setTimeout(that.countTime, 1000);
        } else {
          that.setData({
            countdown: '已截止'
          })
        }
      },
      onLoad: function (options) {
        this.countTime();
      },
    });

  • 相关阅读:
    JVM指令
    spring源码分析之配置文件名占位符的解析(一)
    freemarker
    spring整合freemarker
    策略模式
    spring boot 学习笔记(一)之前端文件配置
    线程使用总结
    maven pom 配置 学习笔记(二)之搭建nexus私服
    删除数据库中所有存在表的数据
    自定义SWT控件七之自定义Shell(可伸缩窗口)
  • 原文地址:https://www.cnblogs.com/dafei4/p/16571294.html
Copyright © 2020-2023  润新知