js根据开始时间计算时间差

DateDifference(item){            
            var new_date = new Date(); //新建一个日期对象,默认现在的时间
            var itemBeginDate = item.begintime ? item.begintime : item.beginTime;
            itemBeginDate = itemBeginDate.indexOf("|") > 0 ? itemBeginDate.split("|")[0] : itemBeginDate;
            var old_date = new Date(itemBeginDate); //设置过去的一个时间点,"yyyy-MM-dd HH:mm:ss"格式化日期                
            var difftime = (new_date - old_date)/1000; //计算时间差,并把毫秒转换成秒            
            var days = parseInt(difftime/86400); // 天  24*60*60*1000 
            var hours = parseInt(difftime/3600)-24*days;    // 小时 60*60 总小时数-过去的小时数=现在的小时数 
            var minutes = parseInt(difftime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
            var seconds = parseInt(difftime%60);  // 以60秒为一整份 取余 剩下秒数
            
            if(days > 0){
                var obj = {
                    text:"已停留:"+days+"天"+hours+"小时"+minutes+"分钟",
                    showicon:true,
                }
                return obj
            }else if(hours > 0){
                var obj = {
                    text:"已停留:"+hours+"小时"+minutes+"分钟",
                    showicon:false,
                }
                return obj
            }else if(minutes > 0){
                var obj = {
                    text:minutes+"分钟前",
                    showicon:false,
                }
                return obj
            }else{
                var obj = {
                    text:"刚刚",
                    showicon:false,
                }
                return obj
            }
        }

效果图:

 

在组件中的使用方式:

<el-table-column
            class-name="table-status"
            prop="processGroupId"
            label="状态"
            width="230">
            <template slot-scope="scope">
                <div v-if="activeName =='todo' || activeName =='unreadNotice'">
                    <img class="process-warnicon" src="../assets/img/chaoshi.png" alt="" v-if="DateDifference(scope.row).showicon">
                    <span style="margin-left: 10px;" :class="{'warn-text':DateDifference(scope.row).showicon}">{{DateDifference(scope.row).text}}</span>
                </div>                
            </template>
</el-table-column>

 

posted @ 2022-07-13 17:57  秃头的铲屎官  Views(180)  Comments(0Edit  收藏  举报