uniapp,vue下单支付30分钟动态倒计时

完整代码

已知下单时间参数为creatTime,样式xxxx-xx-xx xx:xx:xx ,需要30分钟动态倒计时

<template>
  <div id="main">
    <div>下单时间为{{createTime}}</div>
    <div>下单时间总毫秒为{{createSecond}}</div>
    <div>当前时间为{{nowTime}}</div>
    <div>当前时间总毫秒为{{nowSecond}}</div>
    <div>剩余时间总毫秒为{{timeSecond}}</div>
    <div>普通30秒倒计时:{{time}}</div>
    <div>下单30秒倒计时:{{Minute}}:{{Second}}</div>
  </div>
</template>
export default {
	data() {
	    return {
	      timer:'',// 定时器名称
	      time:30,
	      createTime:"2023-4-17 10:40:00",// 订单创建时间
	      createSecond:"",// 创建订单总毫秒
	      nowTime:"",// 当前时间
	      nowSecond:"",// 当前时间总毫秒
	      timeSecond:"",// 剩余时间总毫秒
	      Minute:"00",
	      Second:"00"
	    }
	  },
	methods: {
		// 定时器
	  getTime(){
	      this.timer = setInterval(()=>{
	        this.time --; // 每秒-1
	        if(this.time == 0){ // 时间为0,销毁
	          clearInterval(this.timer)
	        }
	      },1000)
	      this.timer2 = setInterval(()=>{
	        this.countDown();
	        if(this.timeSecond == 0){ // 时间为0,销毁
	          clearInterval(this.timer2)
	        }
	      },1000)
    },
	    // 格式化时间
	    changeTime(date){
	      var Y = date.getFullYear();
	      var M = date.getMonth()+1;
	      var D = date.getDate();
	      var h = date.getHours();
	      h = h <10 ? '0' + h : h; // Hours是否为个位数,不是则在前面加0,如1:11:11变为01:11:11
	      var m = date.getMinutes();
	      m = m <10 ? '0' + m : m; // 同上
	      var s = date.getSeconds();
	      s = s <10 ? '0' + s : s; // 同上
	      return (Y +'-'+ M +'-'+ D + ' ' + h +':'+ m +':'+ s);  // 得到格式化时间
	    },
	    // 计算剩余时间
	    countDown(){
	      var date = new Date();// 当前标准时间
	      this.nowTime = this.changeTime(date) // 格式化时间
	      var nowSecond = +new Date() // 返回当前时间总毫秒
	      this.nowSecond = nowSecond
	      var createSecond = +new Date(this.createTime)// 返回创建订单时间总毫秒
	      this.createSecond = createSecond
	      var dao = 30*60*1000 //30分钟的毫秒数
	      var end = createSecond + dao // 创建订单30分钟后的毫秒数
	      var time = parseInt((end - nowSecond)/1000)  // 剩余时间的总秒数
	      this.timeSecond = time
	      var D = parseInt(time/60/60/24) // 天数  
	      D = D <10 ? '0' + D : D
	      var h = parseInt(time/60/60/60/24%24) // 小时 
	      h = h <10 ? '0' + h : h
	      var m = parseInt(time/60%60) // 分
	      m = m <10 ? '0' + m : m;
	      var s = parseInt(time % 60);//秒
				s = s <10 ? '0' + s : s;
	      if(time <= 0){ // 小于0,永远为 00:00
	        this.$set(this,'Minute','00')
	        this.$set(this,'Second','00')
	      }else{
	        console.log('timer')
	        this.$set(this,'Minute',m)
	        this.$set(this,'Second',s)
	      }
	    }
	  },
	  // 关闭页面前销毁
	  beforeDestroy() {
	    clearInterval(this.timer)
	    clearInterval(this.timer2)
	  },
	  mounted() {
	    this.getTime();
	  }
}

时间日期js语法

获取当前时间
new Date()括号中没有参数,返回当前时间
new Date()括号中有参数,返回参数时间

var date = new Date();
var date1 = new Date('2022-10-1 10:9:10');
console.log(date);  //运行结果  Wed Feb 08 2023 10:28:13 GMT+0800 (中国标准时间)
console.log(date1);  //运行结果  Sat Oct 01 2022 10:09:10 GMT+0800 (中国标准时间)

格式化时间
在这里插入图片描述
由于月份为(0-11)需要.getMonth()+1

var date = new Date();
console.log(date);  //运行结果  Wed Feb 08 2023 10:28:13 GMT+0800 (中国标准时间)
console.log(date.getFullYear()); //运行结果2023
console.log(date.getMonth()+1); //运行结果1
console.log(date.getMonth()+1); //运行结果2

将时间格式化为xxxx-xx-xx xx:xx:xx的方法

var date = new Date();
var Y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
h = h <10 ? '0' + h : h;
var m = date.getMinutes();
m = m <10 ? '0' + m : m;
var s = date.getSeconds();
s = s <10 ? '0' + s : s;
console.log(Y +'-'+ m +'-'+ d + ' ' + h +':'+ m +':'+ s);  //  得到2023-17-8 11:17:01

计算当前时间到目标时间的剩余时间
+new Date()当前的时间戳

get_daoTime(){
	console.log(this.conutDown('2023-2-8 12:22:00','2023-2-8 12:00:00'))
	// 18:53
},
conutDown(time){
	var nowTime = +new Date();//返回当前时间总毫秒数
	var inputTime = +new Date(time);//返回输入时间毫秒数
	var times = (inputTime - nowTime)/1000;//剩余时间总秒数
	var d = parseInt(times / 60 / 60 /24);//天
	d = d <10 ? '0' + d : d;
	var h = parseInt(times / 60 / 60 / 24 %24);//时
	h = h <10 ? '0' + h : h;
	var m = parseInt(times / 60 % 60);//分
	m = m <10 ? '0' + m : m;
	var s = parseInt(times % 60);//秒
	s = s <10 ? '0' + s : s;
	return m + ":" + s
},
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值