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

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

news 2026/3/27 11:08:58

 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

Linux驱动——uart子系统驱动注册分析

韦东山驱动大全uart子系统笔记自整理——08_UART驱动情景分析_注册由于韦东山老师uart子系统的08注册情景分析的笔记很简略&#xff0c;所以在学完这节课后自己整理了一份详细笔记&#xff0c;包含TTY驱动框架&#xff0c;数据结构分析&#xff0c;以及注册过程分析&#xff0c…...

编程新知 2026/3/27 11:07:53

Kafka连接报错？手把手教你解决localhost:9092不可用问题（附真实案例）

Kafka连接报错&#xff1f;手把手教你解决localhost:9092不可用问题&#xff08;附真实案例&#xff09; 当你第一次尝试在本地环境运行Kafka生产者时&#xff0c;看到"Connection to node -1 (localhost/127.0.0.1:9092) could not be established"这样的报错信息&a…...

编程新知 2026/3/27 10:37:47

使用Dependency Check命令行工具高效检测Java项目中的安全漏洞

1. 为什么Java开发者需要关注依赖库安全&#xff1f; 如果你是一名Java开发者&#xff0c;可能经常遇到这样的情况&#xff1a;项目运行得好好的&#xff0c;突然某天系统被入侵了&#xff0c;排查半天才发现是某个第三方库存在安全漏洞。这种情况在现实开发中并不少见&#xf…...

编程新知 2026/3/27 10:25:43

复古RPG风AI工坊落地案例：Pixel Fashion Atelier在独立游戏美术中的应用

复古RPG风AI工坊落地案例&#xff1a;Pixel Fashion Atelier在独立游戏美术中的应用 1. 项目概述 **像素时装锻造坊(Pixel Fashion Atelier)**是一款专为独立游戏开发者设计的AI图像生成工具&#xff0c;它巧妙地将复古RPG界面与现代AI技术相结合&#xff0c;为游戏美术创作带…...

编程新知 2026/3/27 9:14:51

Pixel Fashion Atelier部署教程：Stable Diffusion像素时装生成工作站保姆级安装指南

Pixel Fashion Atelier部署教程&#xff1a;Stable Diffusion像素时装生成工作站保姆级安装指南 1. 项目介绍 Pixel Fashion Atelier&#xff08;像素时装锻造坊&#xff09;是一款基于Stable Diffusion与Anything-v5模型的图像生成工作站。与传统AI工具不同&#xff0c;它采…...

编程新知 2026/3/27 8:10:28

VRM-Addon-for-Blender：虚拟角色创作全流程指南

VRM-Addon-for-Blender&#xff1a;虚拟角色创作全流程指南 【免费下载链接】VRM-Addon-for-Blender VRM Importer, Exporter and Utilities for Blender 2.93 or later 项目地址: https://gitcode.com/gh_mirrors/vr/VRM-Addon-for-Blender VRM-Addon-for-Blender是一款…...

编程新知 2026/3/27 7:40:14

从定时器到任务调度：用Qt QTimer和QThreadPool构建一个轻量级后台任务管理器

从定时器到任务调度&#xff1a;用Qt QTimer和QThreadPool构建轻量级后台任务管理器 在开发中型Qt应用时&#xff0c;后台任务管理往往成为架构设计的痛点。当简单的定时器无法满足复杂业务需求&#xff0c;当主线程被耗时任务拖累导致界面卡顿&#xff0c;开发者需要一套更优雅…...

编程新知 2026/3/27 6:41:18

双模型协作：OpenClaw同时调用GLM-4.7-Flash与Coder模型实战

双模型协作&#xff1a;OpenClaw同时调用GLM-4.7-Flash与Coder模型实战 1. 为什么需要双模型协作&#xff1f; 在我的日常开发工作中&#xff0c;经常遇到这样的场景&#xff1a;需要先理解一个复杂需求&#xff08;比如"帮我写个爬虫抓取知乎热榜并分析关键词"&am…...

编程新知 2026/3/27 6:27:13

5G NR随机接入实战：手把手教你理解并排查MSG3发送失败的那些坑

5G NR随机接入实战&#xff1a;MSG3发送失败全场景排查指南 当5G终端尝试接入网络时&#xff0c;随机接入过程中的MSG3发送失败是最常见的"拦路虎"之一。作为网络优化的关键指标&#xff0c;MSG3失败直接影响用户体验和网络KPI。本文将带您深入协议栈底层&#xff0c…...

编程新知 2026/3/27 5:59:00

BootstrapBlazor通知组件：如何实现声音提示功能

BootstrapBlazor通知组件&#xff1a;如何实现声音提示功能 【免费下载链接】BootstrapBlazor 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapBlazor BootstrapBlazor是一个功能丰富的Blazor组件库&#xff0c;提供了各种UI组件来增强Web应用的用户体验。其中…...

编程新知 2026/3/27 5:42:55