vue.js中获取剩余的天数、小时、分钟、秒数

本是古典何须时尚 2022-05-23 09:23 230阅读 0赞

当我们从后台(php)拿到的时间是获取的是从1970年1月1日00:00:00距离的秒数。  
但是我们用js拿到的本机时间是1970年1月1日00:00:00距离的毫秒数。

<div class="pool pool-common" v-for="(game,index) in currentGames" :key="index">
    	<div class="nick-name-box">     
    		<span>{ { computedResidualTime(game)}}</span>      
    	</div>
    </div>

export default { 
        data() { 
          return { 
            currentGames: []
          }
        },
    	method:{ 
    		computedResidualTime: function (game) { 
    	        let date = new Date();
    	        let currentTime = parseInt(date.getTime() / 1000);
    	        //获取距离1970年1月1日00:00:00的毫秒数，并转换成秒数，通过parseInt转成整秒数；
    	        
    	        //在我这个项目中是两天的过期时间
    	        let allSeconds = 2 * 24 * 60 * 60;
    	
    			//game.create_time是从后台获取的时间，单位是秒
    	        let residualTime = allSeconds - (currentTime - game.create_time);
    	        //这是剩余的所有秒数（规定时间过期时间－（本机距离1970年1月1日00:00:00的秒数－后台的创建时间））
    	        
    	        let day = parseInt(residualTime / (24 * 3600)); //剩余天数
    	        let hour = parseInt((residualTime) % (24 * 3600) / 3600); //剩余小时
    	        let minute = parseInt((residualTime) % 3600 / 60); //剩余分钟
    	        let second = parseInt((residualTime) % 60);  //剩余秒数
    	
    	        return `剩余时间：${ day}天${ hour}小时${ minute}分${ second}秒`;
    	    },
    	}
    }