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

Html部分


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:00p>
            <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 + "秒";
}

相关阅读:
E Parity Split （江西CCPC省赛）题解
VSCode官网下载慢问题解决
MyBatis-核心配置文件mybatis-config.xml主要参数详解
Flink从入门到放弃—Stream API—Join实现（即多流操作）
高颜值跨平台终端Windterm
“蔚来杯“2022牛客暑期多校训练营4 L.Black Hole 垃圾计算几何
如何使用IntelliJ IDEA将普通项目转换为Maven项目
JAVA 读写文件（InputStream,FileReader）
李开复再度回应争议；10 月中国游戏厂商及应用出海收入 30 强出炉丨 RTE 开发者日报 Vol.86
CCF-C类 | 仅1个月Accept！中科院2区SCI，Elsevier出版社，审稿快易录用！

原文地址：https://blog.csdn.net/ok060/article/details/133587908