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