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

最新推荐文章于 2023-07-13 14:37:56 发布

gly_technology

最新推荐文章于 2023-07-13 14:37:56 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/gly_technology/article/details/122636636

版权

关键词由CSDN通过智能技术生成

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