当前位置： 首页 > news >正文

Html+Css+Js计算时间差，返回相差的天/时/分/秒(从未来的一个日期时间到当前日期时间的差)。

news 2025/12/12 8:18:25

 Html部分
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/index.css" /><script src="js/index.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"><p>例如 : 2022-8-4 12:00:00</p><span>请输入时间 : </span><input type="text" id="mytime" placeholder="例如 : 2021-8-4 12:00:00"/><br><button type="button" οnclick="panduan()">判断</button><div id="result"></div></div></body>
</html>
Css部分
* {margin: 0;padding: 0;
}#box {width: 30%;height: 300px;margin: 100px auto;border: solid 1px #ccc;padding-top: 100px;
}#mytime {height: 30px;margin-top: 30px;
}#box button {width: 40px;height: 30px;margin-top: 10px;
}
#box div{margin: 20px auto;text-align: center;
}
p,span,button{margin-left: 25%;
}
Js部分
function panduan() {var result = document.getElementById('result');var mytime = new Date(document.getElementById('mytime').value);// 获取当前日期var date = new Date();var day, hour, minute, second, interval;// 计算相差几天的算法interval = mytime - date;interval /= 1000;day = Math.round(interval / 60 / 60 / 24);hour = Math.round(interval / 60 / 60 % 24);minute = Math.round(interval / 60 % 60);second = Math.round(interval % 60);// 页面显示结果result.innerHTML = day + "天" + hour + "时" + minute + "分" + second + "秒";
}

相关文章：

Html+Css+Js计算时间差，返回相差的天/时/分/秒(从未来的一个日期时间到当前日期时间的差)。

Html部分 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title><link rel"stylesheet" type"text/css" href"css/index.css" /><script src"js/index.js" t…...

编程日记 2023/10/6 3:49:41

mybatis项目启动报错：reader entry: ���� = v

问题再现 解决方案一 由于指定的VFS没有找&#xff0c;mybatis启用了默认的DefaultVFS&#xff0c;然后由于DefaultVFS的内部逻辑&#xff0c;从而导致了reader entry乱码。 去掉mybatis配置文件中关于别名的配置&#xff0c;然后在mapper.xml文件中使用完整的类名。 待删除的…...

编程日记 2023/10/6 3:48:40

【GIT版本控制】--什么是版本控制

一、为什么需要版本控制&#xff1f; 版本控制是在软件开发和许多其他领域中非常重要的工具&#xff0c;因为它解决了许多与协作、追踪更改和管理项目相关的问题。以下是一些主要原因&#xff0c;解释了为什么需要版本控制&#xff1a; 追踪更改历史: 版本控制系统允许您准确…...

编程日记 2023/10/6 3:46:39

ChatGPT付费创作系统V2.3.4独立版 +WEB端+ H5端 + 小程序最新前端

人类小徐提供的GPT付费体验系统最新版系统是一款基于ThinkPHP框架开发的AI问答小程序&#xff0c;是基于国外很火的ChatGPT进行开发的Ai智能问答小程序。当前全民热议ChatGPT&#xff0c;流量超级大&#xff0c;引流不要太简单&#xff01;一键下单即可拥有自己的GPT&#xff0…...

编程日记 2023/10/6 3:43:36

GEE16: 区域日均降水量计算

Precipitation 1. 区域日均降水量计算2. 降水时间序列3. 降水数据年度时间序列对比分析 1. 区域日均降水量计算 今天分析一个计算区域日均降水量的方法&#xff1a; 数据信息&#xff1a;   Climate Hazards Group InfraRed Precipitation with Station data (CHIRPS) is a…...

编程日记 2023/10/6 3:39:33

打开MySQL数据库

在命令行里输入mysql --version就可以查看&#xff1a; mysql -uroot -p之前设置的密码&#xff08;不用输入&#xff09;就可登录成功&#xff1a;...

编程日记 2023/10/6 3:38:31

玩转ChatGPT：DALL·E 3生成图像

一、写在前面 好久不更新咯&#xff0c;因为没有什么有意思的东西分享的。 今天更新&#xff0c;是因为GPT整合了自家的图像生成工具&#xff0c;名字叫作DALLE 3。 DALLE 3是OpenAI推出的一种生成图像的模型&#xff0c;它基于GPT-3架构进行训练&#xff0c;但是它的主要目…...

编程日记 2023/10/6 3:37:29

小程序入门笔记（一） 黑马程序员前端微信小程序开发教程

微信小程序基本介绍 小程序和普通网页有以下几点区别&#xff1a; 运行环境&#xff1a;小程序可以在手机的操作系统上直接运行&#xff0c;如微信、支付宝等&#xff1b;而普通网页需要在浏览器中打开才能运行。 开发技术&#xff1a;小程序采用前端技术进行开发&#xff0c;…...

编程日记 2023/10/6 3:36:29

【进程管理】初识进程

一.何为进程 教材一般会给出这样的答案: 运行起来的程序 或者 内存中的程序 这样说太抽象了&#xff0c;那我问程序和进程有什么区别呢&#xff1f;诶&#xff1f;这我知道&#xff0c;书上说&#xff0c;动态的叫进程&#xff0c;静态的叫程序。那么静态和动态又是什么意思…...

编程日记 2023/10/6 3:35:28

ArcGIS Maps SDK for JS：监听按钮点击事件控制图层的visible属性

文章目录 1 需求描述2 解决方案 1 需求描述 现在有这么一个需求&#xff1a;在地图中添加一些图层&#xff0c;添加图层列表按钮。打开图层列表后用户会打开某些图层使其可见&#xff0c;要求关闭图层列表时&#xff0c;隐藏某些图层&#xff08;若visibletrue&#xff09; 2…...

编程日记 2023/10/6 3:34:26

微信小程序-1

微信开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 报错在调试器的console里找 一、结构 Ctrl 放大字体 Ctrl - 缩小 设置 - - - 外观设置 - - - 可以修改喜欢的主题颜色 index.js index.json index.wxml 》 html <view class"box&qu…...

编程日记 2023/10/6 3:33:26

不容易解的题10.5

31.下一个排列 31. 下一个排列 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/next-permutation/?envTypelist&envIdZCa7r67M会做就不算难题&#xff0c;如果没做过不知道思路&#xff0c;这道题将会变得很难。 这道题相当于模拟cpp的next_permu…...

编程日记 2023/10/6 3:32:24

后端面经学习自测（二）

文章目录 1、Http1.1和2.0的区别大概是什么&#xff1f;HTTP & HTTPS 2、HTTP&#xff0c;用户后续的操作&#xff0c;服务端如何知道属于同一个用户cookie & session & token手机验证码登录流程SSO单点登录 3、如果服务端是一个集群机器&#xff1f;4、hashmap是线…...

编程日记 2023/10/6 3:30:23

使用Jest测试Cesium源码

使用Jest测试Cesium源码 介绍环境Cesium安装Jest安装Jest模块包安装babel安装Jest的VSC插件 测试例子小结 介绍 在使用Cesium时&#xff0c;我们常常需要编写自己的业务代码&#xff0c;其中需要引用Cesium的源码&#xff0c;这样方便调试。此外&#xff0c;目前代码中直接使用…...

编程日记 2023/10/6 3:29:22

buuctf-[GXYCTF2019]禁止套娃 git泄露，无参数rce

用dirsearch扫一下&#xff0c;看到flag.php 访问一下没啥东西&#xff0c;使用githack python2 GitHack.py http://8996e81f-a75c-4180-b0ad-226d97ba61b2.node4.buuoj.cn/.git/查看index.php <?php include "flag.php"; echo "flag在哪里呢&#xff1f;…...

编程日记 2023/10/6 3:25:19

【逐步剖C】-第十一章-动态内存管理

一、为什么要有动态内存管理 从我们平常的学习经历来看&#xff0c;所开辟的数组一般都为固定长度大小的数组&#xff1b;但从很多现实需求来看需要我们开辟一个长度“可变”的数组&#xff0c;即这个数组的大小不能在建立数组时就指定&#xff0c;需要根据某个变量作为标准。…...

编程日记 2023/10/6 3:23:16

【树】树的直径和重心

目录 一.树的直径 &#xff08;1&#xff09;定义 &#xff08;2&#xff09;思路 &#xff08;3&#xff09;例题 &#xff08;4&#xff09;std(第一小问) 二.树的重心 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;求重心 &#xff08;3&#xff09;例…...

编程日记 2023/10/6 3:19:10

《Attention Is All You Need》论文笔记

下面是对《Attention Is All You Need》这篇论文的浅读。 参考文献&#xff1a; 李沐论文带读 HarvardNLP 《哈工大基于预训练模型的方法》 下面是对这篇论文的初步概览&#xff1a; 对Seq2Seq模型、Transformer的概括&#xff1a; 下面是蒟蒻在阅读完这篇论文后做的一…...

编程日记 2023/10/6 3:18:10

C++笔记之不同buffer数量下的生产者-消费者机制

C笔记之不同buffer数量下的生产者-消费者机制 文章目录 C笔记之不同buffer数量下的生产者-消费者机制0.在不同的缓冲区数量下&#xff0c;生产者-消费者机制的实现方式和行为的区别1.最简单的生产者-消费者实现&#xff1a;抄自 https://mp.weixin.qq.com/s/G1lHNcbYU1lUlfugXn…...

编程日记 2023/10/6 3:12:05

编码文字使用整数xyz 三个坐标 并使用

导航 说明原始描述AI理解的实现代码说明 原始描述 而后期的，相同的s，前缀差距 和 自身权重 要对应的上，或者说 假设每个序列都是三维空间上的点集合，使用最小的空间表达这些信息，整个数据集才是重点。这些点的集合可以 是空间直线或者是曲线 整体的思路是 一个集合能在任…...

编程日记 2023/10/6 3:08:01

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/12/11 14:27:41

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/12/10 15:27:46

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/12/12 1:01:45

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/12/9 1:33:51

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/8/24 3:48:04

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/12/8 9:19:07

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35