• 详情秒杀倒计时-vue


    HTML:

    <div>{{countDownList}}</div>

    script:

    export default {
      data() {
        return {
          countDownList: '00天00时00分00秒',
          actEndTime: '2018-11-19 18:50:00'
        };
      },
      created() {
        this.countDown();

      },

      methods: {
        timeFormat(param) {
          return param < 10 ? '0' + param : param;
        },
        countDown(it) {
          var interval = setInterval(() => {
            // 获取当前时间,同时得到活动结束时间数组
            let newTime = new Date().getTime();
            // 对结束时间进行处理渲染到页面
            let endTime = new Date(this.actEndTime).getTime();
            let obj = null;
            // 如果活动未结束,对时间进行处理
            if (endTime - newTime > 0) {
              let time = (endTime - newTime) / 1000;
              // 获取天、时、分、秒
              let day = parseInt(time / (60 * 60 * 24));
              let hou = parseInt(time % (60 * 60 * 24) / 3600);
              let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
              let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
              obj = {
                day: this.timeFormat(day),
                hou: this.timeFormat(hou),
                min: this.timeFormat(min),
                sec: this.timeFormat(sec)
              };
            } else { // 活动已结束,全部设置为'00'
              obj = {
                day: '00',
                hou: '00',
                min: '00',
                sec: '00'
              };
              clearInterval(interval);
            }
            this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
          }, 1000);
        }
      }

    }

  • 相关阅读:
    如何应对一些无语的面试题
    5W随想
    操作系统-文件的结构以及文件管理
    计算机网络--第二章--物理层笔记
    第一章计算机网络概述---OSI七层网络模型
    IDEA使用Maven创建webapp骨架无法创建Servlet文件与无法使用@WebServlet实现注解问题解决
    RabbitMQ常用的几种消息模型
    算法入门(二)队列
    Java线程安全与锁优化,锁消除,锁粗化,锁升级
    Centos7安装RabbitMQ详细教程
  • 原文地址:https://www.cnblogs.com/CMing/p/9818013.html
Copyright © 2020-2023  润新知