zoukankan      html  css  js  c++  java
  • 小程序时间格式倒计时

    我们在做许多样式的时候都会有倒计时的,有秒倒计时的,分的,小时的,已以及多少天倒计时的

    所以,总结了一个还有多少天倒计时的demo;

    我们在utils目录中创建一个dataTime.js文件

     文件写入函数

    export const getTimeLeft = function getTimeLeft(datetimeTo) {
      // 计算目标与现在时间差(毫秒)
      let time1 = datetimeTo;
      let time2 = new Date().getTime();
      if (time1 <= time2) return '(还剩0天0时0分处理)';
      let mss = time1 - time2;
      // 将时间差(毫秒)格式为:天时分秒
      let days = parseInt(mss / (1000 * 60 * 60 * 24));
      let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = parseInt((mss % (1000 * 60)) / 1000);
      return '(' + '还剩' + days + "天" + hours + "时" + minutes + "分" + seconds + '秒' + '处理' + ')'
    }
    

      在文件中引入这个函数

    import { getTimeLeft } from "../utils/dataTime.js";
    

      

    Page({
     data:{
       datetimeTo:"",
       timeLeft:""
    })
    

      

    当我们从接口拿到数据的时候,日期格式如果是 2020-02-31 15:06:57 这种格式的话 ,我们尽量不要用下面这种格式转换,有可能会导致转换之后的格式在ios上出现NAN天NAN时NAN分NAN秒的错误

     

     所以,我们可以换一种方法

      
    let arr = data.split(/[- :]/);
    let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
          nndate = Date.parse(nndate) //获取到的时间戳
    

      如果我们的倒计时是三天的话,七天或者是其他时间 就把 *3改变值就行

    var sevenDayLater = nndate * 1 + 86400 * 3 * 1000; //获取到的时间戳往后算三天时间
    this.setData({
    datetimeTo:sevenDayLater
    })

      当我们拿到三天后的时间戳,使用 setInterval() 与当前时间戳进行倒计时

      isTimeHandler(startTime) {
        this.data.timer = setInterval(() => {
          this.setData({
            timeLeft: getTimeLeft(this.data.datetimeTo)//使用了utils.getTimeLeft
          });
          if (this.data.timeLeft == "0天0时0分0秒") {
            clearInterval(this.data.timer);
          }
        }, 1000);
      },
    

      在页面引入这个参数值

    <text>{{timeLeft}}</text>
    

      

  • 相关阅读:
    红黑树实现
    Java环境变量的配置及意义
    Java 内存分配全面浅析
    吸血鬼数字
    nat模式、路由模式,网桥模式
    WebService 的创建,部署和使用
    摩尔定律
    计算机组成
    世界是数字的
    面试
  • 原文地址:https://www.cnblogs.com/BySee1423/p/12559113.html
Copyright © 2011-2022 走看看