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

本文链接：https://blog.csdn.net/qq_51447496/article/details/129124635

文章介绍了如何在JavaScript中对日期类型的时间戳进行处理，包括通过onblur事件获取日期输入框的值，使用Date.parse将字符串转换为毫秒数，以及如何进行日期间的加减运算以计算相差的天数。通过示例代码展示了具体的实现步骤和算法。

摘要由CSDN通过智能技术生成

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

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

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

完整代码

<!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>
    <input type="date" id="time1">
</body>
<script>
    var time1 = document.getElementById("time1")
    time1.onblur = function(){
        console.log(time1.value)
        console.log(typeof(time1.value))
    }
</script>
</html>

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

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

Date.parse(time1.value)

<!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>
    <input type="date" id="time1">
</body>
<script>
    var time1 = document.getElementById("time1")
    time1.onblur = function(){
        console.log(Date.parse(time1.value))
    }
</script>
</html>

运行结果如下
在这里插入图片描述
然后我们现在获取了两个时间，然后就可以进行计算了，先把两个时间戳转换成对应的毫秒数，然后相加减，然后通过除以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>