-
Notifications
You must be signed in to change notification settings - Fork 0
/
start-end-time-calculate.html
executable file
·76 lines (73 loc) · 3.37 KB
/
start-end-time-calculate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>无敌波 | 开始&结束时间耗时计算</title>
<!-- common header repeat start -->
<meta charset="UTF-8"/>
<meta name="keywords" content="wudibo,tool,无敌波,在线工具,wudibo在线工具,个人在线工具平台,wudibo个人在线工具平台"/>
<meta name="description" content="这是无敌波的个人在线工具平台，主要提供有各种开发文档API及各种在线小工具。"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.ico"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.css"/>
<link rel="stylesheet" href="css/common.css"/>
<!-- common header repeat end -->
<style>
.border-left{border-left:none}
.border-right{border-right:none}
.mt10{margin-top:10px}
</style>
</head>
<body>
<div class="container">
<!--导航栏-->
<div id="navbar"></div>
<!--正文内容-->
<div class="input-group">
<input type="text" class="form-control border-right" placeholder="开始时间" id="startTime">
<span class="input-group-addon">To</span>
<input type="text" class="form-control border-right" placeholder="结束时间" id="endTime">
<span class="input-group-addon" style="cursor: pointer" onclick="timeFn()">点我计算</span>
<input type="text" class="form-control border-left" placeholder="" id="answer">
</div>
<!--底部信息-->
<div id="footer"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.js"></script>
<script src="js/nprogress.js"></script>
<script>
// 引入公共页面
$("#navbar").load("common/header.html");
$("#footer").load("common/footer.html");
function timeFn () {
// 非空校验
if ($("#startTime").val() == '' || $("#endTime").val() == '') {
sweetAlert("请输入开始时间和结束时间！", "Oops : (", "error");
return;
}
// 逻辑计算
let startDate = new Date($("#startTime").val());
let endDate = new Date($("#endTime").val());
// 时间差的毫秒数
let dateDiff = endDate.getTime() - startDate;
// 计算出相差天数
let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
// 计算天数后剩余的毫秒数
let leave1 = dateDiff % (24 * 3600 * 1000);
// 计算出小时数
let hours = Math.floor(leave1 / (3600 * 1000));
// 计算相差分钟数
let leave2 = leave1 % (3600 * 1000);
let minutes = Math.floor(leave2 / (60 * 1000));
// 计算相差秒数
let leave3 = leave2 % (60 * 1000);
let seconds = Math.round(leave3 / 1000)
let timeFn = "耗时：" + dayDiff + "天 " + hours + "时 " + minutes + " 分" + seconds + " 秒";
$("#answer").val(timeFn);
}
</script>
</html>