JS中如何对＜input type=“data“＞中值进行运算（JS日期类型如何进行加减）

川长思鸟来 2024-03-26 11:27 20阅读 0赞

## JS中如何对中值进行运算（JS日期类型如何进行加减） ##

简介：文本讲解JS中如何对于date类型的时间戳进行处理。

首先是看一下时间戳的类型  
在这里我通过onblur的方式，通过失去焦点的方式，来获取当前的时间戳对应的时间。

**完整代码**

**运行结果**  
通过结果可以看出来，这个时间戳首先是，字符串类型的，然后这个值是一个yy-mm-ss格式类型的字符串。  
![在这里插入图片描述][1c7912beca7c47e88e17a6e8140da44b.png]

我们发现了这个是一个有规律的字符串，那么就可以通过格式化处理进行处理了，然后把这个格式化处理之后的字符串  
通过Date.parse这个方法，可以把一个有规律的字符串转换成对应的毫秒数的时间。

`Date.parse(time1.value)`

运行结果如下  
![在这里插入图片描述][630797f7964f4a77b196b063dc9aa630.png]  
然后我们现在获取了两个时间，然后就可以进行计算了，先把两个时间戳转换成对应的毫秒数，然后相加减，然后通过除以86400000，就可以获得对应的相差的天数了。

演示代码如下  
这里的主要的一个算法就是这一块，通过这段话，就可以转换出一个具体的天数。

`document.getElementById("res").innerHTML = (t2 - t1) / 1000 / 86400 + "天"`

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        时间1：<input type="date" id="time1">
        <br>
        时间2：<input type="date" id="time2">
        <br>
        <button id="sub">计算时间差</button>
        <div id="res"></div>
    </body>
    <script>
        var time1 = document.getElementById("time1")
        var time2 = document.getElementById("time2")
        var sub = document.getElementById("sub");
        sub.onclick = function(){
          
            t1 = Date.parse(time1.value)       
            t2 = Date.parse(time2.value)       
            document.getElementById("res").innerHTML = (t2 - t1) / 1000 / 86400 + "天"       
        }
    </script>
    </html>

**运行结果**  
可以看出运行很是完美正常。  
![在这里插入图片描述][bd668b010ace4316a3cb91a725dcae49.png]

[1c7912beca7c47e88e17a6e8140da44b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/072fa4e712534a4597ed158aec1b4a92.png
[630797f7964f4a77b196b063dc9aa630.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/46517d83c2484db5bb3af81611723e67.png
[bd668b010ace4316a3cb91a725dcae49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d22c599165a0401eab415d2f11b7d07f.png