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>

运行结果

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

相关文章
|
12天前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
27 2
|
2天前
|
JavaScript 前端开发
JavaScript中的布尔类型与数字类型详解
JavaScript中的布尔类型与数字类型详解
11 0
|
2月前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
2天前
|
JavaScript 前端开发
JS的静态类型检测,有内味儿了
JS的静态类型检测,有内味儿了
|
2天前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
|
5天前
|
存储 JavaScript 前端开发
JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)
【6月更文挑战第25天】JavaScript中的对象是数据结构,存储键值对,键为字符串,值可为任意类型,包括函数(作为方法)。
10 2
|
12天前
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入
14 1
|
19天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
30 2
|
3天前
|
JavaScript vr&ar 数据库
一篇文章讲明白JS获取当前日期
一篇文章讲明白JS获取当前日期
|
2月前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
31 0