data数据定义

data () {
return {
curStartTime: '2019-07-31 08:00:00',
day: '0',
hour: '00',
min: '00',
second: '00',
}
},

js代码

// 倒计时
countTime () {
// 获取当前时间
let date = new Date()
let now = date.getTime()
// 设置截止时间
let endDate = new Date(this.curStartTime) // this.curStartTime需要倒计时的日期
let end = endDate.getTime()
// 时间差
let leftTime = end - now
// 定义变量 d,h,m,s保存倒计时的时间
if (leftTime >= 0) {
// 天
this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
// 时
let h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
this.hour = h < 10 ? '0' + h : h
// 分
let m = Math.floor(leftTime / 1000 / 60 % 60)
this.min = m < 10 ? '0' + m : m
// 秒
let s = Math.floor(leftTime / 1000 % 60)
this.second = s < 10 ? '0' + s : s
} else {
this.day = 0
this.hour = '00'
this.min = '00'
this.second = '00'
}
// 等于0的时候不调用
if (Number(this.hour) === 0 && Number(this.day) === 0 && Number(this.min) === 0 && Number(this.second) === 0) {
return
} else {
// 递归每秒调用countTime方法,显示动态时间效果,
setTimeout(this.countTime, 1000)
}
}, 

调用

this.curStartTime = '2019-08-09'
this.countTime()

显示

<p>倒计时:{{day}}天 {{hour}}:{{min}}:{{second}}</p>

vue倒计时:天时分秒的更多相关文章

  1. JQ倒计时天时分秒

    <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...

  2. JS倒计时——天时分秒

      HTML代码: <div id="times_wrap" class="time_num">    距离结束时间:     <div cl ...

  3. js倒计时天时分秒[转]

    <script language="JavaScript"> <!-- // function getQueryString(name) { var reg =n ...

  4. JS时间处理,获取天时分秒

    //获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...

  5. JS时间处理,获取天时分秒。以及浏览器出现的不兼容问题

    //获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...

  6. Python:求时间差(天时分秒格式)

    传入一个时间戳,以天时分秒格式打印出时间差 输入一个10位的时间戳,求出时间差 def time_diff(timestamp): onlineTime = datetime.datetime.fro ...

  7. 倒计时simple 天时分秒

    new Date()new Date(yyyy,mth,dd,hh,mm,ss); //月从0计数 .getTime()返回的是一个long型的毫秒数 毫秒转成 秒 分 时 天 <div id= ...

  8. JS与React分别实现倒计时(天时分秒)

    JS方法 html部分 <div class="clock"> <i></i> 天 <i></i> : <i> ...

  9. vue 倒计时返回首页

    1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示

随机推荐

  1. javascript html jquery 入门

    就开发难易程度来说,现在普遍使用jquery,本人学习jquery html css时间不长,以前写过Flex. CSS+JS+HTML组成HTML开发三驾马车.学习js开发我认为怎么入门十分重要.根 ...

  2. ggplot2在一幅图上画两条曲线

    ggplot2在一幅图上画两条曲线 print(data)后的结果是 C BROWN.P MI.P 0 0.9216 0.9282 30 0.9240 0.9282 100 0.9255 0.9282 ...

  3. class3_Entry & Text 输入和文本框

    程序总体运行效果图如下;   #!/usr/bin/env python # -*- coding:utf-8 -*- # -------------------------------------- ...

  4. 常用sign算法

    所有参数包括appkey或者token拼接成&key=value格式 转小写 正序排序 MD5后得到sign

  5. [笔记]Android开发环境配置及HelloWorld程序

    Android的开发须要下面四个工具: 1.JDK 2.Eclipse 3.Android SDK 4.ADT   具体功能: 1.JDK.JDK即Java Development Kit(Java开 ...

  6. 事务和JDBC事务隔离级别

    与事务相关的理论 mysql事物隔离级别:http://mj4d.iteye.com/blog/1744276 事务(Transaction): 是并发控制的单元,是用户定义的一个操作序列.这些操作要 ...

  7. https://vjudge.net/contest/321565#problem/C 超时代码

    #include <iostream> #include <cstdio> #include <queue> #include <algorithm> ...

  8. [JZOJ6299] 2019.08.12【NOIP提高组A】工厂

    题目 题目大意 工厂内每个人只会操作一些机器. 他们会以随机的顺序来,每次选任意一台机器来操作. 一台机器只能由一个工人来操作. 可以花费一的代价来使某个工人学会一种机器. 问花费最少的代价,使得在所 ...

  9. WebAPI介绍

    Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...

  10. [转]MySQL InnoDB引擎索引长度受限怎么办

    mysql> CREATE TABLE `tb` (-> `a` varchar(255) DEFAULT NULL,-> `b` varchar(255) DEFAULT NULL ...