时间差值计算器

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <meta charset="UTF-8" />
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6     <title>Document</title>
  7     <style>
  8       * {
  9         margin: 0;
 10         padding: 0;
 11       }
 12       body {
 13         background-color: black;
 14       }
 15       .box {
 16         color: #1c9febe7;
 17         position: relative;
 18         margin: 100px auto;
 19          500px;
 20         height: 500px;
 21         background-color: #fff;
 22         border-radius: 50%;
 23         /* border: 2px solid #fff; */
 24         box-shadow: -5px -4px 100px blue;
 25       }
 26       .inputs {
 27         box-sizing: border-box;
 28 
 29         padding-left: 30px;
 30         position: absolute;
 31         left: 50%;
 32         transform: translateX(-50%);
 33         top: 100px;
 34          400px;
 35         height: 100px;
 36       }
 37       .inputs div:nth-child(3) {
 38          200px;
 39         height: 25px;
 40         margin: 10px 128px;
 41         /* background: pink; */
 42       }
 43       .inputs button {
 44          70px;
 45         height: 25px;
 46         border: 0;
 47         background-color: skyblue;
 48       }
 49       .inputs div:nth-child(3) button:nth-child(1) {
 50         float: left;
 51       }
 52       .inputs div:nth-child(3) button:nth-child(1) {
 53         float: right;
 54       }
 55       .inputs div input {
 56         margin-left: 10px;
 57          200px;
 58         outline: none;
 59       }
 60       .inputs div:nth-child(2) {
 61         margin-top: 10px;
 62       }
 63 
 64       .show {
 65         display: none;
 66         color: cornflowerblue;
 67         position: absolute;
 68         left: 50%;
 69         transform: translateX(-50%);
 70         top: 200px;
 71          400px;
 72         height: 200px;
 73       }
 74       .show div {
 75         margin-top: 5px;
 76       }
 77       .tips p {
 78         color: orange;
 79       }
 80       .tips p span {
 81         font-size: 12px;
 82       }
 83       .isShow {
 84         display: block;
 85         color: cornflowerblue;
 86         position: absolute;
 87         left: 50%;
 88         transform: translateX(-50%);
 89         top: 200px;
 90          400px;
 91         height: 200px;
 92       }
 93     </style>
 94   </head>
 95   <body>
 96     <div class="box">
 97       <div class="inputs">
 98         <div class="firstTime">
 99           <label for="firstTime">请选择起始时间:</label
100           ><input type="datetime-local" step="02" id="firT" />
101         </div>
102         <div class="endTime">
103           <label for="endTime">请选择结束时间:</label
104           ><input type="datetime-local" step="02" id="endT" />
105         </div>
106         <div class="button">
107           <button onclick="timeFn()">确定</button
108           ><button onclick="onLoad()">重新输入</button>
109         </div>
110       </div>
111       <div class="show">
112         <div class="day">相差天数：<strong></strong></div>
113         <div class="hours">相差小时：<strong></strong></div>
114         <div class="minutes">相差分钟：<strong></strong></div>
115         <div class="seconds">相差秒数：<strong></strong></div>
116         <div class="tips">
117           <p>
118             友情提示:<span>输入时，请先输入后面的时间，再输入前面的时间值</span>
119           </p>
120         </div>
121       </div>
122     </div>
123     <!-- background line-->
124     <script>
125       !(function () {
126         function n(n, e, t) {
127           return n.getAttribute(e) || t
128         }
129         function e(n) {
130           return document.getElementsByTagName(n)
131         }
132         function t() {
133           var t = e('script'),
134             o = t.length,
135             i = t[o - 1]
136           return {
137             l: o,
138             z: n(i, 'zIndex', -1),
139             o: n(i, 'opacity', 1),
140             c: n(i, 'color', '255,255,255'),
141             n: n(i, 'count', 99),
142           }
143         }
144         function o() {
145           ;(a = m.width =
146             window.innerWidth ||
147             document.documentElement.clientWidth ||
148             document.body.clientWidth),
149             (c = m.height =
150               window.innerHeight ||
151               document.documentElement.clientHeight ||
152               document.body.clientHeight)
153         }
154         function i() {
155           r.clearRect(0, 0, a, c)
156           var n, e, t, o, m, l
157           s.forEach(function (i, x) {
158             for (
159               i.x += i.xa,
160                 i.y += i.ya,
161                 i.xa *= i.x > a || i.x < 0 ? -1 : 1,
162                 i.ya *= i.y > c || i.y < 0 ? -1 : 1,
163                 r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
164                 e = x + 1;
165               e < u.length;
166               e++
167             )
168               (n = u[e]),
169                 null !== n.x &&
170                   null !== n.y &&
171                   ((o = i.x - n.x),
172                   (m = i.y - n.y),
173                   (l = o * o + m * m),
174                   l < n.max &&
175                     (n === y &&
176                       l >= n.max / 2 &&
177                       ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
178                     (t = (n.max - l) / n.max),
179                     r.beginPath(),
180                     (r.lineWidth = t / 2),
181                     (r.strokeStyle = 'rgba(' + d.c + ',' + (t + 0.2) + ')'),
182                     r.moveTo(i.x, i.y),
183                     r.lineTo(n.x, n.y),
184                     r.stroke()))
185           }),
186             x(i)
187         }
188 
189         var a,
190           c,
191           u,
192           m = document.createElement('canvas'),
193           d = t(),
194           l = 'c_n' + d.l,
195           r = m.getContext('2d'),
196           x =
197             window.requestAnimationFrame ||
198             window.webkitRequestAnimationFrame ||
199             window.mozRequestAnimationFrame ||
200             window.oRequestAnimationFrame ||
201             window.msRequestAnimationFrame ||
202             function (n) {
203               window.setTimeout(n, 1e3 / 45)
204             },
205           w = Math.random,
206           y = { x: null, y: null, max: 2e4 }
207         ;(m.id = l),
208           (m.style.cssText =
209             'position:fixed;top:0;left:0;z-index:' + d.z + ';opacity:' + 1),
210           e('body')[0].appendChild(m),
211           o(),
212           (window.οnresize = o),
213           (window.onmousemove = function (n) {
214             ;(n = n || window.event), (y.x = n.clientX), (y.y = n.clientY)
215           }),
216           (window.onmouseout = function () {
217             ;(y.x = null), (y.y = null)
218           })
219         for (var s = [], f = 0; d.n > f; f++) {
220           var h = w() * a,
221             g = w() * c,
222             v = 2 * w() - 1,
223             p = 2 * w() - 1
224           s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 })
225         }
226         ;(u = s.concat([y])),
227           setTimeout(function () {
228             i()
229           }, 100)
230       })()
231     </script>
232     <script>
233       // var timeOut = setTimeout(function () {
234       //   alert(
235       //     '友情提示:亲爱的，请确保输入第一个时间值大于第二个值哦，方便你观察得到的结果哦^_^'
236       //   )
237       // }, 2000)
238       // clearTimeout(timeOut)
239       function onLoad() {
240         location.reload(true)
241       }
242       // var z = dateBegin - dateEnd
243       function timeFn() {
244         var x = document.getElementById('firT').value
245         var y = document.getElementById('endT').value
246         if (x != '' && y != '') {
247           var dateBegin = new Date(x) //转化为Date对象的形式
248           var dateEnd = new Date(y) //转化为Date对象的形式
249           //di作为一个变量传进来
250           //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
251           // let dateBegin = new Date(d1.replace(/-/g, '/')) //将-转化为/，使用new Date
252           // let dateEnd = new Date() //获取当前时间
253           let dateDiff = dateBegin.getTime() - dateEnd.getTime() //时间差的毫秒数
254           let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) //计算出相差天数
255           let leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
256           let hours = Math.floor(leave1 / (3600 * 1000)) //计算出小时数
257           //计算相差分钟数
258           let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
259           let minutes = Math.floor(leave2 / (60 * 1000)) //计算相差分钟数
260           //计算相差秒数
261           let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
262           let seconds = Math.round(leave3 / 1000)
263           //将对应的时间插入到页面中
264           document.querySelector('.show').className = 'isShow'
265           document.querySelector('.day').querySelector('strong').innerHTML =
266             dayDiff + 'day'
267           document.querySelector('.hours').querySelector('strong').innerHTML =
268             hours + 'h'
269           document.querySelector('.minutes').querySelector('strong').innerHTML =
270             minutes + 'm'
271           document.querySelector('.seconds').querySelector('strong').innerHTML =
272             seconds + 's'
273           console.log(
274             ' 相差 ' +
275               dayDiff +
276               '天 ' +
277               hours +
278               '小时 ' +
279               minutes +
280               ' 分钟' +
281               seconds +
282               ' 秒'
283           )
284           console.log(
285             dateDiff + '时间差的毫秒数',
286             dayDiff + '计算出相差天数',
287             leave1 + '计算天数后剩余的毫秒数',
288             hours + '计算出小时数',
289             minutes + '计算相差分钟数',
290             seconds + '计算相差秒数'
291           )
292           console.log(dateBegin)
293           console.log(dateEnd)
294         } else {
295           alert(
296             '亲爱的，请先输入再获取值啊，不要这么心急，不要让我白跑一趟哦，爱你哟^_^~~~~'
297           )
298         }
299       }
300 
301       // year = x.substring(0, 4)
302 
303       // month = x.substring(5, 7)
304 
305       // day = x.substring(8, 10)
306 
307       // hour = x.substring(11, 13)
308 
309       // minute = x.substring(14, 16)
310 
311       // secods = x.substring(17, 19)
312 
313       // format =
314       //   year +
315       //   '-' +
316       //   day +
317       //   '-' +
318       //   month +
319       //   '-' +
320       //   hour +
321       //   '-' +
322       //   minute +
323       //   '-' +
324       //   secods
325       // document.getElementById('demo').innerHTML = format
326 
327       // console.log(z)
328     </script>
329   </body>
330 </html>
时间如白驹过隙，忽然而已，且行且珍惜......
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/UnfetteredMan/p/13581115.html