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>

运行结果

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

相关文章
|
30天前
|
JavaScript 前端开发
JavaScript Date(日期) 对象
JavaScript Date(日期) 对象
31 2
|
13天前
|
JavaScript 前端开发
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
JS浮点数精度问题及高精度小数运算:BigNumber解决方案
60 0
|
2月前
|
JavaScript 前端开发
js时间戳转日期时间
js时间戳转日期时间
77 20
|
17天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
28 0
|
2月前
|
JavaScript 前端开发
|
17天前
|
JavaScript 前端开发
JavaScript返回判断类型有哪些?
JavaScript返回判断类型有哪些?
25 0
|
2月前
|
JavaScript 前端开发
今天被JavaScript的String型和数字型的+运算撞了一下腰。
今天被JavaScript的String型和数字型的+运算撞了一下腰。
|
3月前
|
缓存 JavaScript 前端开发
|
3月前
|
JavaScript 前端开发 UED
探秘 JavaScript 错误背后的真相——揭开异常类型的神秘面纱,让你的代码从此无懈可击!
【8月更文挑战第23天】本文深入探讨了JavaScript中常见的异常类型,包括`ReferenceError`(未定义的引用)、`TypeError`(类型错误)、`SyntaxError`(语法错误)、`RangeError`(范围错误)、`EvalError`(评估错误)以及`URIError`(URI错误),并通过示例展示了如何有效地诊断与处理这些异常。此外,还介绍了如何自定义错误类以适应特定场景的需求。掌握这些异常处理技巧对于构建稳定可靠的Web应用程序至关重要。
37 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript:解锁JavaScript的超级英雄模式!类型系统如何化身守护神,拯救你的代码免于崩溃与混乱,戏剧性变革开发体验!
【8月更文挑战第22天】TypeScript作为JavaScript的超集,引入了强大的类型系统,提升了编程的安全性和效率。本文通过案例展示TypeScript如何增强JavaScript:1) 显式类型声明确保函数参数与返回值的准确性;2) 接口和类加强类型检查,保证对象结构符合预期;3) 泛型编程提高代码复用性和灵活性。这些特性共同推动了前端开发的标准化和规模化。
56 0