vue倒计时:天时分秒
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倒计时:天时分秒的更多相关文章
- JQ倒计时天时分秒
<div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...
- JS倒计时——天时分秒
HTML代码: <div id="times_wrap" class="time_num"> 距离结束时间: <div cl ...
- js倒计时天时分秒[转]
<script language="JavaScript"> <!-- // function getQueryString(name) { var reg =n ...
- JS时间处理,获取天时分秒
//获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...
- JS时间处理,获取天时分秒。以及浏览器出现的不兼容问题
//获取时间的天,小时,分钟,秒 function ToTime(second) { second = second / ; var result ; ) % ; ) % ; * )); ) { re ...
- Python:求时间差(天时分秒格式)
传入一个时间戳,以天时分秒格式打印出时间差 输入一个10位的时间戳,求出时间差 def time_diff(timestamp): onlineTime = datetime.datetime.fro ...
- 倒计时simple 天时分秒
new Date()new Date(yyyy,mth,dd,hh,mm,ss); //月从0计数 .getTime()返回的是一个long型的毫秒数 毫秒转成 秒 分 时 天 <div id= ...
- JS与React分别实现倒计时(天时分秒)
JS方法 html部分 <div class="clock"> <i></i> 天 <i></i> : <i> ...
- vue 倒计时返回首页
1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示
随机推荐
- (转)当android调试遇到ADB server didn't ACK以及顽固的sjk_daemon进程 .
转:http://blog.csdn.net/wangdong20/article/details/20839533 做Android调试的时候经常会遇到,程序写好了,准备接上手机调试,可不一会儿出现 ...
- 漏洞验证系列--MongoDB未授权访问
本系列文章旨在对于有一定网络安全基础的人员,在日常工作中扫描出来的各种漏洞,如何进行验证,以区分该漏洞是否存在或是扫描器误报.请勿应用非法途径. 本漏洞是由于MongoDB未设置访问权限,用户可以直接 ...
- MySQL查询语句详解,排序、分组、聚合函数、约束
create database day20; 查询的时候from前面的字段是需要显示出来的内容,后面是条件use day20;create table phones(id int,pinpai var ...
- 在centos6.5 上安装最新版mysql
在mysql上如果直接安装mysql安装的不是5.6版本以上.下面记录怎么解决安装最新版mysql5.6以上. 1.查看本机都安装了mysql什么版本:rpm -qa | grep mysql,默认是 ...
- Windows下安装配置PLSQL
说明:1.PLSQL Developer是远程连接Oracle数据库的一个可视化工具,并且其不是一个独立的软件,是需要依赖Oracle客户端运行的.2.本安装教程是基于本机没有安装Oracle数据库的 ...
- 安装mysql时,服务无法启动的问题
1.下载mysql镜像文件:mysql-installer-community-8.0.17.0.msi 2.点击镜像进行安装,一直next即可 3.cmd以管理员身份,进入到安装的mysql安装目录 ...
- 【python】并集交集
set是用来去重的. 在list里使用union函数.这种方式不适用于元素为字典的. list(set(a)^set(b)) 这是求差集 所以交集就是并集和ab的差集. import random d ...
- callable接口的多线程实现方式
package com.cxy.juc; import java.util.concurrent.Callable; import java.util.concurrent.ExecutionExce ...
- docker集群管理之swarm
一.简介 docker集群管理工具有swarm.k8s.mesos等,我所用到的是swarm和k8s,这篇文章主要介绍swarm:swarm是docker集成的原生 管理工具,只要你安装上docker ...
- 005-Java运算符
1. 求余符号,余数的符号是和被除数保持一致的. 2. 自增自减运算符不改变变量的数据类型. 逻辑运算符 逻辑与:& 逻辑或:| 逻辑非:! 短路与:&& 短路或:|| 逻辑 ...