Vue怎么实现24小时的时间加减?

soundccc 发布于 05/15 17:31
阅读 103
收藏 0

在不用插件的情况下,怎么写时间加减的逻辑?

<div v-model="time1">{{ time1 }}</div>
<div v-model="time2">{{ time1 }}</div>

<div @click="AddTime()">{{ hours }}</div>
AddTime(){
    this.hours= Number(this.time1)+Number(this.time2);
    
    console.log(hours)
}

这样出来只能是 20+5=25,但是我需要的是20加5小时,返回应该是1点

没有插件,没有npm和cli,只用了script引用的vue,应该要怎么写才能正确加减时间?

 

 

加载中
0
王圣松
王圣松

this.time1 + this.time2 - 24 < 0 ? 24 + (this.time1 + this.time2 - 24) : this.time1 + this.time2 - 24

0
hmh
hmh
var time = new Date()
time.setHours(time.getHours() +8)
console.log(time.getHours())

 

0
火眼金睛容嬷嬷
火眼金睛容嬷嬷

dayjs   https://github.com/iamkun/dayjs

0
前端大师傅
前端大师傅

一楼这样做显然不妥而且还错了就是类型不对。

相比比下,二楼好一点,但少了一部将时间戳要通过setTime()转为日期类型,而且并没有回答楼主的问题。

在下来优化一下二楼的代码:

function ddTime(){
            var start = null, stop = null,
                offset = 0, oneHour = 60 * 60 * 1000;
            try {
                //得到时间戳即从1970.1.1零点到当前时间经过的毫秒
                start = new Date(this.time1).getTime();
                stop = new Date(this.time2).getTime();
                //得到两个时间的差值,例1970.1.1 0:1:0 值为60秒*1000毫秒 而1970.1.1 0:2:0的值为 120*1000毫秒相减就是6万毫秒即1分钟。
                offset = stop - start;
                //用两个时间差除以每小时所需要的毫秒可得两时间差多少小时
                //注意这里floor/ceil/round三个函数不同用法决定你对时间怎么处理分别是不足1小时丢掉、不足1小时仍然算1小时、四舍五入算小时
                hours = Math.floor(offset / offset);
                console.log(hours);
            } catch (e) {
                console.dir(e);
            }
        }

 

p
phper_hui
大师傅果然厉害!
0
f
freezingsky

这个问题不属于任何框架,属于基础数学.

返回顶部
顶部