两个 html 时间输入之间的差异

2023-12-05

我尝试计算两个 HTML 时间输入元素之间的差异。当其中一个时间改变时,就必须重新计算,不幸的是我不能为彼此这样做。谁能帮我?

    <input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


<script>
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

document.getElementById("start").onchange = function() {diff(start,end)};
document.getElementById("end").onchange = function() {diff(start,end)};


function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}

document.getElementById("diff").value = diff(start, end);
</script>

这个时差码厉害了!因此,如果您需要的只是让它自行更新,我会为您复制并稍微修改一下您的代码。再说一次,你的代码太棒了:)

<input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


<script>
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

document.getElementById("start").onchange = function() {diff(start,end)};
document.getElementById("end").onchange = function() {diff(start,end)};


function diff(start, end) {
    start = document.getElementById("start").value; //to update time value in each input bar
    end = document.getElementById("end").value; //to update time value in each input bar
    
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}

setInterval(function(){document.getElementById("diff").value = diff(start, end);}, 1000); //to update time every second (1000 is 1 sec interval and function encasing original code you had down here is because setInterval only reads functions) You can change how fast the time updates by lowering the time interval
</script>

这是您想要的吗?如果不是,请告诉我,我很乐意帮助您完成这段出色的代码:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

两个 html 时间输入之间的差异 的相关文章

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 如何更改 Google Maps v3 API for Directions 中的开始和结束标记图像

    我使用 DirectionsRender 绘制了一条路线 但我不知道如何用我自己的标记替换通用的 Google 标记 我知道并在正常的谷歌地图情况下使用它 但发现很难用开始和结束的方向标记来做到这一点 如果这是一个愚蠢的问题 感谢您的任何建
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • 使用 dc.js 按条形值对条形图中的条形进行排序(排序)

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 将 GMT 时间转换为当地时间

    我以这种格式从我的服务器获取 GMT 时间 Fri 18 Oct 2013 11 38 23 GMT 我的要求是使用Javascript将此时间转换为本地时间 例如 如果用户来自印度 首先我需要采用时区 5 30并将其添加到我的服务器时间并
  • php - 解析html页面

    div divbox div p para1 p p para2 p p para3 p table class table tr td td tr table p para4 p p para5 p 有人可以告诉我如何解析这个 html
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 警报无法唤醒我的服务

    我有以下代码 我希望无论电话状态如何 此警报都会调用我的服务 即使它处于睡眠模式 我也需要它来访问互联网并进行一些网络调用 为什么手机处于睡眠模式时不起作用 报警管理器 Calendar cal Calendar getInstance c
  • R 聚合错误:“替换有 行,数据有

    我正在尝试聚合数据框 但收到一个我不明白的错误 我有一个名为 M15 的数据框 它包含 33 个变量的 200k 条记录 我无法使用可以与社区共享的数据重现此错误 M15 lt M15backup c 600 700 setting the
  • 添加 Visual Studio 2015 的先决条件

    I want to add new prerequisites to visual studio 2015 but can not find out the solution 如您所见 Visual Studio 2015 缺少先决条件 V
  • swiftui、动画应用于父效果子动画(下)

    上一个问题 swiftui 动画应用于父效果子动画 现在 TextView 有了自己的状态 RectangleView 和 TextView 在 3 秒内滑入屏幕 但 TextView 滑动一秒后状态发生变化 现在可以看到TextView停
  • javafx Bindings.createStringBinding 但绑定实际上不起作用

    我正在尝试绑定textProperty of the Label到对象的SimpleIntegerProperty在 的帮助下Bindings但当我更改时它不会更改文本SimpleIntegerProperty实时显示对象的信息 任何有关如
  • SQL使用unix时间戳计算一个月内的记录

    我试图返回每个月内的记录数 并按月 年对结果进行分组 架构看起来像这样 id title timestamp 我一直在四处寻找 但无法得到我期望的结果 谢谢 设置时间戳的格式 然后按其分组 按月分组 SELECT DATE FORMAT t
  • 保护 Android 应用程序敏感数据的最佳方法?

    是的 这是一个非常普遍的问题 但我试图了解处理与将敏感数据分发到应用程序的网络服务器相关的应用程序的最佳方法 任何链接 一般信息建议等 将不胜感激 由于应用程序会在一定时间内存储从数据库检索到的持久数据 一切都变得有些敏感 在设备上存储敏感
  • 使用 R:创建一个新列,计算“n”个其他列中“n”个条件发生的次数

    我有第 1 列和第 2 列 ID 和值 接下来 我想要一个计数列 列出每个 id 出现相同值的次数 如果发生多次 显然会重复该值 该数据集中还有其他变量 但新的计数变量只需以其中 2 个为条件 我已经浏览了这个博客 但我找不到一种方法使新变
  • 无法将整数从 javascript 传递到 npapi 插件

    我正在编写一个简单的napapi插件 我必须在html页面中打印从javascript函数传递的值 但我在做的时候遇到了问题 它在火狐浏览器上运行正常 但我想在 qt fancybrowser 示例上执行此操作 无论我在 javascrip
  • 将 for 循环的输出保存在单独的数据帧中

    我有一个简单的问题 尽管有很多类似的帖子 但我一直无法解决 因为我在 R 方面有点笨蛋 而且我没有得到我应该得到的任何东西 我有两组文件 All Files lt objects pattern constant country 0 9 4
  • 在 Node.js 中加载基本 HTML

    我正在尝试找出如何加载和渲染基本的 HTML 文件 这样我就不必编写如下代码 response write p blahblahblah p 我刚刚发现one方式使用FS库 我不确定它是否是最干净的 var http require htt
  • CUDA SASS 到 Cubin

    通过 CuObjDump 可以使用 Cubin 文件生成 SASScuobjdump sass
  • MySQL 表中的常量列值

    我在 MySQL 中有一个表 我想将表的列值设置为常量整数 我怎样才能做到这一点 不幸的是 MySQL 不支持 SQL 检查约束 你可以 出于兼容性原因 在 DDL 查询中定义它们 但它们是 只是忽略了 您可以创建 BEFORE INSER
  • Azure DevOps - 在构建管道运行期间,代理在本地下载文件的路径是什么?

    我们正在使用 Microsoft 托管代理来运行应用程序自动化测试场景的构建管道 我们想要实现的是 通过自动化程序下载文件 从无头 Chrome 浏览器 然后导航到下载路径并打开它 如何找到代理内下载文件的路径 快速编译与在 Linux 和
  • 一个我无法理解的错误。 “承诺已经在评估中......”[重复]

    这个问题在这里已经有答案了 我正在尝试编写一个在名称中查找模式的函数 借助stringr包裹 我的函数如下所示 namezz function thepatternx data data column Name library string
  • 如何修复 Hibernate“对象引用未保存的瞬态实例 - 在刷新之前保存瞬态实例”错误

    使用 Hibernate 保存对象时收到以下错误 object references an unsaved transient instance save the transient instance before flushing 你应该
  • 将 jar 文件下载到 R 包的 inst/java 目录中

    是否可以将 JAR 下载到目录中inst java安装阶段的 R 包 我想向 CRAN 提交一个包 但 jar 太大 他们不会接受 我认为一种可能的解决方案是自动下载 jar 并将其放入其中inst java 我认为 H2O 能做到这一点构
  • “dict”对象没有属性“append”

    我正在遵循一个关于设置一个类的教程 以制作酒吧账单为例 但无法弄清楚为什么在向账单添加新项目时出现错误 dict 对象没有属性 append The code class Bar tab dictionary menu wine 5 bee
  • Angular 5 为 AWS EC2 创建应用程序源包

    在 AWS Elastic Beanstalk 中 有一个用于部署 Node js 应用程序的向导流程 当我到达 上传您自己的 应用程序源的步骤时 它用通用术语描述了它们的 3 个要求 zip 文件 小于 500MG 没有父文件夹 但他们就
  • 两个 html 时间输入之间的差异

    我尝试计算两个 HTML 时间输入元素之间的差异 当其中一个时间改变时 就必须重新计算 不幸的是我不能为彼此这样做 谁能帮我