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在App.vue文件中监听路由变化刷新页面操作

    vue在App.vue文件中监听路由变化刷新页面操作

    这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue如何接入hls/m3u8的直播视频详解

    Vue如何接入hls/m3u8的直播视频详解

    项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下
    2022-07-07
  • Vue.js实现简单ToDoList 前期准备(一)

    Vue.js实现简单ToDoList 前期准备(一)

    这篇文章主要介绍了Vue.js实现简单ToDoList的前期准备,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • elementPlus组件之表格编辑并校验功能实现

    elementPlus组件之表格编辑并校验功能实现

    本文详细介绍了如何使用Element Plus组件实现表格的单条数据新增、编辑、删除操作,并对数据进行校验,代码简单易懂,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • VUE前端导出文件之file-saver插件安装使用教程

    VUE前端导出文件之file-saver插件安装使用教程

    这篇文章主要给大家介绍了关于VUE前端导出文件之file-saver插件安装使用的相关资料,file-saver是一个用于保存文件的JavaScript库,它提供了一种简单的方式来生成和保存文件,支持各种文件类型,例如文本文件、图片、PDF等,需要的朋友可以参考下
    2024-05-05
  • 解决Vue警告Write operation failed:computed value is readonly

    解决Vue警告Write operation failed:computed value is readonl

    这篇文章主要给大家介绍了关于如何解决Vue警告Write operation failed:computed value is readonly的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • vue3.0手动封装分页组件的方法

    vue3.0手动封装分页组件的方法

    这篇文章主要为大家详细介绍了vue3.0手动封装分页组件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 解决vue报错Syntax Error:TypeError:this.getOptions is not a function的问题

    解决vue报错Syntax Error:TypeError:this.getOptions is&n

    在未安装less 和 less-loader 的情况下,编写了 less 模块代码,通过 npm 同时安装了两者,遇到错误后,将问题归因于 less-loader 版本过高,解决了问题,分享经验,希望可以帮助到遇到同样问题的开发者
    2026-04-04
  • Vue中JS动画与Velocity.js的结合使用

    Vue中JS动画与Velocity.js的结合使用

    这篇文章主要介绍了Vue中JS动画与Velocity.js的结合使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论