JS将时间戳转换为倒计时/年月日

以下示例:常用JS时间戳转换

目录

一、JS将后台时间戳转换为倒计时

二、JS将时间戳转换成年月日

总结


一、JS将后台时间戳转换为倒计时

HTML部分

<div class="tixianDay">
	From cash withdrawal date:{
   
   {tempDay}}day{
   
   {tempHour}}hour{
   
   {tempMin}}min{
   
   {tempSecond}}second
</div>

JS部分

var vm = new Vue({
	el: '#content',
	data: {
         tempDay: '',
		 tempHour: '',
		 tempMin: '',
		 tempSecond: '',       
     },
    mounted() {
        this.init()
    },
    methods:{
        init(){//页面加载事件
            。。。//api请求后台数据
            。。。
            。。。
             let timeShow = res.data.moneytime   
            console.log("后台拿到", timeShow);
            let timeShow1 = timeShow - Date.parse(new Date()) / 1000
			console.log("后台-当前", timeShow1);
			const tempDay = Math.floor(timeShow1 / (60 * 60 * 24))
			const tempHour = Math.floor(timeShow1 / (60 * 60)) - tempDay * 24
			const tempMin = Math.floor(timeShow1 / 60) - tempDay * 24 * 60 - tempHour * 60
			const tempSecond = timeShow1 - tempDay * 24 * 60 * 60 -tempHour *60 * 60 -                 
tempMin * 60
            this.tempDay = tempDay
			this.tempHour = tempHour
			this.tempMin = tempMin
			this.tempSecond = tempSecond
        }
    }
})

二、JS将时间戳转换成年月日

应用示例:将数组中的每个时间进行日期转换

JS部分

//转换日期
					timestampToTime(time) {
						var date = new Date(time)
						var len = time.toString().length;
						if (len < 13) {
							var sub = 13 - len;
							sub = Math.pow(10, sub);
							date = new Date(time * sub);
						}
						var y = date.getFullYear() + '年';
						var M = date.getMonth() + 1;
						M = (M < 10 ? '0' + M : M) + '月';
						var d = date.getDate();
						d = (d < 10 ? '0' + d : d) + '日';
						// var h = date.getHours();
						// h = (h < 10 ? '0' + h : h) + ':';
						// var m = date.getMinutes();
						// m = (m < 10 ? '0' + m : m);
						return y + M + d;
					}

HTML部分

<div class="area_text flex_column">
	<div class="area_text1 flex" v-for="(item,index) in newList">
	    <p style="margin-right: 20px;">{
   
   {item.path}}</p>
	    <p>{
   
   {timestampToTime(item.time)}}</p>
	</div>
</div>


总结

常用的倒计时和日期格式转换,屡试不爽~~~

猜你喜欢

转载自blog.csdn.net/z_2183441353/article/details/129322564
今日推荐