html5智能表单计算两个日期的间隔
admin 发布于：2015-12-23 14:50:32
阅读：loading
使用HTML5的input type="date" 实现的两个日期计算间隔天数，不限制两个日期的先后，计算结果后取绝对值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两个日期的间距</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">body{ font-family: "microsoft yahei"; font-size: 12px; } fieldset{ width: 300px; border-radius: 10px; margin: 20px auto; height: 200px; } #box{ width: 100%; text-align: center; } #box p{ width:220px; height: 25px; margin: 15px auto; border-radius: 10px; box-shadow:5px 5px 20px rgba(0,0,0,.6);padding: 5px 0 0 5px; } #startDate , #endDate{ border: none; display: block; height: 20px; width: 210px; } #submitButton{ border-radius: 10px; box-shadow:5px 5px 20px rgba(0,0,0,.6); width: 150px; height: 30px; border-radius: 10px; background-image:linear-gradient(to top , #91C46C , #89AA71, #89AA71 , #89AA71 , #91C46C); color: #D9E6D1; font-weight: bold; font-size: 14px; border: none; cursor: pointer; } #output{ text-align:left; margin-top: 15px; width:210px; margin-left: 40px; color: red; font-size: 24px; }</style>
<script type="text/javascript">
function misdate(){ var startDate = document.getElementById("startDate").value; var endDate = document.getElementById("endDate").value; var output = document.getElementById("output"); if(startDate > endDate){ var temp = startDate; startDate = endDate; endDate = temp; } var startTime = new Date(startDate); var endTime = new Date(endDate); var dayTime = 24 * 60 * 60 * 1000; var days = (endTime.getTime() - startTime.getTime()) / dayTime; output.innerHTML = "相差：" + days + " 天"; return false;
}
</script>
</head>
<body> <fieldset> <legend align="right">计算两个日期之间间隔</legend> <div id="box"> <form onsubmit="return misdate()"> <label> <p> <input type="date" id="startDate" required="required"/> </p> </label> <label> <p> <input type="date" id="endDate" required="required"/> </p> </label> <input type="submit" id="submitButton" value="开始计算"/> </form> <div id="output"></div> </div> </fieldset>
</body>
</html>
注
上述许多内容已经过时和过期了，留存本篇文章仅为方便个人查看，原始文章的信息参考：
原始链接：https://www.chendd.cn/information/viewInformation/myLog/160.a
最后更新：2015-12-23 14:50:32
访问次数：515
评论次数：0
点赞个数：0
点赞
