vue 实现分钟倒计时

实现

首先，是两个div用来显示我们的剩余支付时间

然后，是倒计时函数countdown

//倒计时
countdown () {const end = Date.parse(new Date('2020-05-05 03:59:23'))const now = Date.parse(new Date())const msec = end - nowconsole.log(msec)if(msec<0) return;let day = parseInt(msec / 1000 / 60 / 60 / 24)let hr = parseInt(msec / 1000 / 60 / 60 % 24)let min = parseInt(msec / 1000 / 60 % 60)let sec = parseInt(msec / 1000 % 60)this.day = daythis.hr = hr > 9 ? hr : '0' + hrthis.min = min > 9 ? min : '0' + minthis.sec = sec > 9 ? sec : '0' + secconst that = thisif(min>=0 && sec>=0){//倒计时结束关闭订单if(min==0 && sec==0){return}setTimeout(function () {that.countdown()}, 1000)}}

最后，在mounted里事先执行countdown方法

mounted () {this.countdown()
}

vue 实现分钟倒计时相关推荐

【vue一分钟倒计时】
一分钟倒计时 <template><div @click="sendCode">{{ content }}</div> </templat ...
vue 一分钟倒计时功能实现
HTML <template><div @click="countdowm" v-text="content "></div> ...
vue 订单支付15分钟倒计时
vue 订单支付15分钟倒计时 //支付倒计时ComputetTime(data) {let st = data.currentTime.replace(/\-/g, "/"),/ ...
用vue实现秒杀倒计时组件
用vue实现秒杀倒计时组件开发思路代码实现下面是使用Vue实现秒杀倒计时组件开发思路 1.请求服务器获取这一刻的服务器时间(统一以服务器时间为基准) 2.获取用户当前电脑时间与服务器时间比对, ...
vue过滤器日期倒计时
vue过滤器日期倒计时创建一个HTML元素在网页上显示日期时间,并与Vue实例进行数据绑定当前时间:<span>{{ date | formaDate }}</span> ...
html5倒计时秒杀怎么做,vue 设计一个倒计时秒杀的组件
HTML CSS HTML5 CSS3 vue 设计一个倒计时秒杀的组件简介: 倒计时秒杀组件在电商网站中层出不穷不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的核心思路:1.时间 ...
Python实现分钟倒计时
两分钟倒计时小程序(Python) import time minutes = 2 flag = True while flag:for minute in range(minutes, -1, -1 ...
html倒计时10s,vue做30s倒计时，在最后10s倒数的时候有个放大的效果
题目描述 vue做30s倒计时,在最后10s的时候有个放大的效果题目来源及自己的思路相关代码 // 请把代码文本粘贴到下方(请勿用图片代替代码) {{second}} export default ...
微信小程序多个商品 30分钟倒计时
商品30分钟倒计时, //30分钟倒计时Page({/*** 页面的初始数据*/data: {order: [{_id: 'wersdfsdfe89',status: 'unpay',//未支付状态p ...

vue 实现分钟倒计时

实现

vue 实现分钟倒计时相关推荐

最新文章

热门文章