vue中使用moment设置倒计时的方法

 更新时间:2024年02月06日 10:37:39   作者:一室易安  
这篇文章给大家介绍了vue中使用moment设置倒计时的方法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

vue中使用moment 设置倒计时的方法

方法一

日常开发中时常需要使用倒计时的方法 现在进行封装一下

//第一步 引入moment
import moment from 'moment';

let nowTime:any = ref('')//当前时间
let diffTime:any = ref('')//当前时间和指定时间的差值
let countdown:any = ref(0)//倒计时
// 设置setInterval 用于每秒钟输出一次当前时间 更新倒计时的时间
let interval:any = setInterval(function() {
	//按照时分秒格式 获取当前时间  需要年月日这样设置 "YYYY-MMM-DDD HH:mm:ss"
	nowTime.value = moment().format("HH:mm:ss")
	//通过比较时间差 获取一个秒数值
	//比较时间差 按照秒seconds进行比较  如果是年月日比较如右设置 moment('2024-02-05 10:00:00', 'YYYY-MMM-DDD hh:mm:ss')
	//moment() 为当前时间
	diffTime.value = moment('10:00:00', 'hh:mm:ss').diff(moment(), "seconds")
	//倒计时   如果只需要最后5分钟才显示倒计时 这进行判断
	if(diffTime.value<5*60){
		let h = moment.duration(diffTime.value, 'seconds').hours()//小时
		let m = moment.duration(diffTime.value, 'seconds').minutes()//分钟
		let s = moment.duration(diffTime.value, 'seconds').seconds()//秒
		countdown.value = `${h<10?'0'+h:h}:${m<10?'0'+m:m}:${s<10?'0'+s:s}`
	}
	// 判断是否需要执行定时器
	if(diffTime.value < 0 ){
		clearInterval(interval)//清除定时器
	}
}, 1000);


//页面销毁时触发
onBeforeUnmount(()=>{
	clearInterval(interval)//清除定时器
})

方法二

思路: 结束时间 - 当前时间 = 剩余的秒数;

countDown(end_time) { 
if (end_time == null) return; 
let nowTime = moment() .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); //当前时间
let endTime = moment(end_time) .locale('zh-cn') .format('YYYY-MM-DD HH:mm:ss'); 
return moment(endTime).diff(moment(nowTime), 'seconds'); //剩余可倒计时的秒数 
},

到此这篇关于vue中使用moment设置倒计时的方法的文章就介绍到这了,更多相关vue moment设置倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中引入mousewheel事件及兼容性处理方式

    vue中引入mousewheel事件及兼容性处理方式

    这篇文章主要介绍了vue中引入mousewheel事件及兼容性处理方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • 在Vue中进行数据分页的实现方法

    在Vue中进行数据分页的实现方法

    在前端开发中,数据分页是一个常见的需求,特别是当处理大量数据时,Vue作为一款流行的JavaScript框架,提供了强大的工具和生态系统来实现数据分页,本文将介绍如何在Vue中进行数据分页,以及如何设计一个通用的分页组件,需要的朋友可以参考下
    2023-10-10
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解

    Vue数据与事件绑定以及Class和Style的绑定详细讲解

    这篇文章主要介绍了Vue数据与事件绑定以及Class和Style的绑定,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-01-01
  • Vue自动生成组件示例总结

    Vue自动生成组件示例总结

    在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下
    2023-12-12
  • 9102年webpack4搭建vue项目的方法步骤

    9102年webpack4搭建vue项目的方法步骤

    这篇文章主要介绍了9102年webpack4搭建vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue加入购物车判断token添加登录提示功能

    Vue加入购物车判断token添加登录提示功能

    加入购物车,是一个登录后的用户 才能进行的操作,所以需要进行鉴权判断,判断用户token是否存在,这篇文章主要介绍了Vue加入购物车判断token添加登录提示,需要的朋友可以参考下
    2023-11-11
  • 一文搞明白vue开发者vite多环境配置

    一文搞明白vue开发者vite多环境配置

    Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下
    2023-06-06
  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    本篇文章主要介绍了浅谈vue中使用图片懒加载vue-lazyload插件详细指南,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-10-10
  • vue如何获取当前url地址加端口号

    vue如何获取当前url地址加端口号

    这篇文章主要介绍了vue如何获取当前url地址加端口号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09
  • 使用vuex较为优雅的实现一个购物车功能的示例代码

    使用vuex较为优雅的实现一个购物车功能的示例代码

    这篇文章主要介绍了使用vuex较为优雅的实现一个购物车功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论