zoukankan      html  css  js  c++  java
  • 活动倒计时 天 时 分 秒



    需求:若大于24小时显示天,若小于24小时,显示秒

    template

    <span v-if="day>0">
         <span class="fuliTime">{{day}}</span><span class="fuliPoint">天:</span>
    </span>
    <span class="fuliTime">{{hour}}</span><span class="fuliPoint">时:</span>
         <span class="fuliTime">{{minute}}</span><span class="fuliPoint">分<span v-if="day<=0">:</span></span>
         <span v-if="day<=0">
         <span class="fuliTime">{{sec}}</span><span class="fuliPoint">秒</span>
    </span>
    

    script

    export defalut {
        data (){
            return {
                endTime:'2019-12-11 08:38:00',//应为接口获取到的结束时间
                day:'',
                hour:'',
                minute:'',
                sec:''
            }
        },
        created (){
            // 倒计时
            let that = this
            that.setEndTime();
        },
        methods: {
            var that = this;
            var interval = setInterval(function timestampToTime(){
            var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
            if(date <= 0){
              that.day = '00';
              that.hour = '00';
              that.minute = '00';
              that.sec = '00';
              clearInterval(interval)
            }else{
              that.day = parseInt(date / 1000 / 60 / 60 / 24 , 10);
              if(that.day < 10){
                that.day = "0" +that.day
              }
              that.hour = parseInt(date / 1000 / 60 / 60 % 24 , 10);
              if(that.hour < 10){
                that.hour = "0" +that.hour
              }
              that.minute = parseInt(date / 1000 / 60 % 60, 10);//计算剩余的分钟
              if(that.minute < 10){
                that.minute = "0" + that.minute
              } 
              that.sec = parseInt(date / 1000 % 60, 10);//计算剩余的秒数 
              if(that.sec < 10){
                that.sec = "0" + that.sec
              }
              return that.day + that.hour + that.minute + that.sec;	
            }
          },1000);
        },
        }
    }
    

    css

    <style>
    .fuliTime {
      background:#FE5959;
      color:#FFF;
      padding: .1vw .4vw;
      font-size:2.664vw;
      font-family: PingFangSC-Regular, sans-serif;
      font-weight:normal;
      text-align: center;
      border-radius: .7vw;
    }
    .fuliPoint {
      color: #FE5959;
      padding-left:.6vw;
      font-size: .2vw;
    }
    </style>
    
  • 相关阅读:
    VI服务器
    LabVIEW编程技巧:网络通信中如何获取计算机名称、IP地址等信息
    Labview 局部变量
    TL431的几种常用用法
    s8550引脚图与电路图汇总分析
    齐二TK6916/20/26/32系列数控落地铣镗床简介8
    VBA Format函数 自定义格式中 0/#的区别
    [Excel VBA] Shape.Type属性名称及对应值列表
    如何另存(保存)不含宏
    我想一次性选择(或复制)工作簿中的多张表到另一工作簿
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/12017383.html
Copyright © 2011-2022 走看看