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

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

news 文章来源：https://blog.csdn.net/ok060/article/details/133587908 2025/1/28 0:47:21

 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

创建vue3工程

一、新建工程目录E:\vue\projectCode\npm-demo用Visual Studio Code 打开目录 二、点击新建文件夹按钮&#xff0c;新建vue3-01-core文件夹 三、右键vue3-01-core文件夹点击在集成终端中打开 四、初始化项目&#xff0c;输入npm init 一直敲回车直到创建成功如下图 npm init 五…...

编程日记 2023/10/6 3:07:00

Flutter笔记 - 用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类

Flutter笔记 用于描述Align的Alignment、AlignmentDirectional、AlignmentTween类 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_…...

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

门面模式简介

门面模式简介 门面模式&#xff08;Facade Pattern&#xff09;是一种结构性设计模式&#xff0c;它提供了一个简化复杂系统的接口&#xff0c;允许客户端通过一个统一的接口与系统交互&#xff0c;而不需要了解系统内部的复杂性。这个模式的目标是降低客户端与系统之间的耦合…...

编程日记 2023/10/6 3:04:57

2023年7月工作经历二

invoke的翻译 C#的这个关键字很熟&#xff0c;但不知道如何翻译比较好。和网友沟通&#xff0c;并查阅多篇博文&#xff0c;觉得“同步调用&#xff08;invoke&#xff09;和异步调用(beginvoke)”比较好。 VS2022很爽 C#的类名&#xff0c;会提示命名空间。C调试的时候&…...

编程日记 2023/10/6 3:03:56

7.wifi开发【智能家居：终】，实践总结：智能开关，智能采集温湿，智能灯。项目运行步骤与运行细节，技术归纳与提炼，项目扩展

一。项目运行步骤与运行细节 1.项目运行步骤&#xff08;一定有其他的运行方式&#xff0c;我这里只提供一种我现在使用的编译方式&#xff09; &#xff08;1&#xff09;项目运行使用软件与技术&#xff1a; 1.Virtual linux 使用这个虚拟机进行程序的编译 2.Makefile与shl…...

编程日记 2023/10/6 3:00:53

学习开发一个RISC-V上的操作系统（汪辰老师） — unrecognized opcode `csrr t0,mhartid‘报错问题

前言 &#xff08;1&#xff09;此系列文章是跟着汪辰老师的RISC-V课程所记录的学习笔记。 &#xff08;2&#xff09;该课程相关代码gitee链接&#xff1b; &#xff08;3&#xff09;PLCT实验室实习生长期招聘&#xff1a;招聘信息链接 正文 &#xff08;1&#xff09;在跟着…...

编程日记 2023/10/6 2:56:50

【计算机网络】 心跳机制

文章目录 心跳机制应用场景什么是心跳机制心跳包的发送&#xff0c;通常有两种技术 心跳机制 应用场景 在长连接下&#xff0c;有可能很长一段时间没有数据往来。理论上说&#xff0c;这个连接是一直保持连接的&#xff0c;但是实际情况中&#xff0c;如果中间节点出现什么故…...

编程日记 2023/10/6 2:52:46

文心一言 VS 讯飞星火 VS chatgpt （106）-- 算法导论10.1 4题

四、用go语言&#xff0c;重写 ENQUEUE 和 DEQUEUE 的代码&#xff0c;使之能处理队列的下溢和上溢。 文心一言&#xff1a; 在 Go 语言中&#xff0c;我们可以使用切片来实现队列。下面是如何实现 ENQUEUE 和 DEQUEUE 操作&#xff0c;同时处理队列的下溢和上溢的情况&#…...

编程日记 2023/10/6 2:46:37

进程调度算法之时间片轮转调度(RR)，优先级调度以及多级反馈队列调度

1.时间片轮转调度算法(RR) round Robin 1.算法思想 公平地、轮流地为各个进程服务&#xff0c;让每个进程在一定时间间隔内都可以得到响应。 2.算法规则 按照各进程到达就绪队列的顺序&#xff0c;轮流让各个进程执行一个时间片&#xff08;如100ms&#xff09;。 若进程未…...

编程日记 2023/10/6 2:39:30

ARMv8如何读取cache line中MESI 状态以及Tag信息（tag RAM dirty RAM）并以Cortex-A55示例

Cortex-A55 MESI 状态获取 一&#xff0c;系统寄存器以及读写指令二&#xff0c;Cortex-A55 Data cache的MESI信息获取&#xff08;AARCH 64&#xff09;2.1 将Set/way信息写入Data Cache Tag Read Operation Register2.2 读取Data Register 1和Data Register 0数据并解码 参考…...

编程日记 2023/10/6 2:37:28

网站建设功能覆盖范围/实时新闻热点

服务器D盘上传的文件过多&#xff0c;空间剩下很少了&#xff0c;于是想把里面部分文件&#xff0c;大概几万个文件转移到E盘&#xff0c;做了这个小工具。先查询出要转移的文件清单&#xff0c;保存在一个记事本中&#xff0c;如下所示&#xff1a; 接着读取文件名&#xff0c…...

编程日记 2025/1/27 23:28:53

一个人免费视频在线观看bd/win优化大师

云服务器怎么安装linux系统 内容精选换一换华为云帮助中心&#xff0c;为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档&#xff0c;帮助您快速上手使用华为云服务。安装传输工具在本地主机和Windows云服务器上分别安装数…...

编程日记 2025/1/27 22:31:56

做视频在哪个网站收益高/网站建设费用明细表

tf.nn.top_k(input, k, nameNone) 这个函数的作用是返回 input 中每行最大的 k 个数&#xff0c;并且返回它们所在位置的索引。 import tensorflow as tf import numpy as npinput tf.constant(np.random.rand(3,4)) k 2 output tf.nn.top_k(input, k)with tf.Session() a…...

编程日记 2025/1/27 21:22:20

上饶便宜的做网站公司/国家大事新闻近三天

本节书摘来自异步社区《思科数据中心I/O整合》一书中的第2章&#xff0c;第2.6节&#xff0c;作者【美】Silvano Gai , Claudio DeSanti&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看 2.6 无损耗是否更佳&#xff1f; 思科数据中心I/O整合这是一个复杂的话题…...

编程日记 2025/1/27 20:04:37

如何建立一个好的网站/关键词在线查询

JVM&#xff08;Java虚拟机&#xff09;是一个虚构出来的运行Java程序的运行时&#xff0c;是通过在实际的计算机上仿真模拟各种计算机功能的实现。它具有完善的硬件架构&#xff08;如处理器、堆栈、寄存器等&#xff09;&#xff0c;还具有相应的指令系统&#xff0c;使用JVM…...

编程日记 2025/1/27 16:55:58

drupal 网站建设/怎么申请域名建立网站

作者&#xff1a;李世顺&#xff0c;腾讯游戏天美J1工作室游戏后台高级工程师&#xff0c;先后参与过剑灵手游、火影忍者手游、写实赛车项目的研发与维护工作。火影忍者手游已经上线4年多&#xff0c;活动是火影重要的运营手段&#xff0c;火影的活动除了签到、礼包、任务等商业…...

编程日记 2025/1/27 14:31:35