JS中如何对<input type=“data“>中值进行运算(JS日期类型如何进行加减)

简介: JS中如何对<input type=“data“>中值进行运算(JS日期类型如何进行加减)

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>

运行结果

可以看出运行很是完美正常。

相关文章
|
1月前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
41 2
|
1月前
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
147 0
|
20天前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
2月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
84 20
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
48 0
|
19天前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
20天前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
20天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
2月前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
JavaScript返回判断类型有哪些?
JavaScript返回判断类型有哪些?
32 0