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. Java Heap and Stack

    Heap(堆)(FIFO): heap是一个运行时数据区, 类的对象从中分配空间.这些对象通过new.newarray.anewarray和multianewarray等指令建立,它们不需要程序代码来 ...

  2. ionic-CSS:ionic icon(图标)

    ylbtech-ionic-CSS:ionic icon(图标) 1.返回顶部 1. ionic icon(图标) ionic 也默认提供了许多的图标,大概有 700 多个,针对 Android 和 ...

  3. 9、从命令行运行postman脚本及生成测试报告

    本节建议直接看postman官网:https://www.npmjs.com/package/newman 环境准备: 安装nodejs和npm     参考 https://www.runoob.c ...

  4. Vue.js中的图片引用路径问题

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一: 在data里面定义好图片路径: /*错误写法*/ imgUrl:'../assets/logo.png' 在templat ...

  5. sql 特殊时间值 第一天或最后一天 无计算错误

    DECLARE @dt datetimeSET @dt=GETDATE() DECLARE @number intSET @number=3 --1.指定日期该年的第一天或最后一天--A. 年的第一天 ...

  6. Random类和Math.random()方法

    一.Random类的定义Random类位于 java.util 包中,主要用于生成伪 随机数Random类将 种子数 作为随机算法的起源数字,计算生成伪随机数,其与生成的随机数字的区间无关创建Rand ...

  7. 2019-8-31-C#-直接创建多个类和使用反射创建类的性能

    title author date CreateTime categories C# 直接创建多个类和使用反射创建类的性能 lindexi 2019-08-31 16:55:58 +0800 2018 ...

  8. 2018-2-13-win10-uwp-上传Nuget-让别人用我们的库

    title author date CreateTime categories win10 uwp 上传Nuget 让别人用我们的库 lindexi 2018-2-13 17:23:3 +0800 2 ...

  9. Win32SDK应用程序

    转自:https://blog.csdn.net/jxf_ioriyagami/article/details/1486626 1 说在前面    由于VC6及MFC的特点,我们许多人从标准C++学习 ...

  10. laravel 优化小记

    laravel 优化 7 Performance Optimization Tips for the Laravel Developer 运行 php artisan optimize php art ...