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>
    
  • 相关阅读:
    Http状态吗504问题复盘
    Http状态码502问题复盘
    Nginx服务的基本配置
    mysql修改root密码
    centos7开启80端口及其他端口
    tp5隐藏入口文件(基于nginx)
    使nginx支持pathinfo模式
    laravel-admin 上传图片过程中遇到的问题
    Maven介绍
    java中泛型
  • 原文地址:https://www.cnblogs.com/wangRong-smile/p/12017383.html
Copyright © 2011-2022 走看看