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>