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-child3) { 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-child3) button:nth-child1) { 50 float: left; 51 } 52 .inputs div:nth-child3) button:nth-child1) { 53 float: right; 54 } 55 .inputs div input { 56 margin-left: 10px; 57 200px; 58 outline: none; 59 } 60 .inputs div:nth-child2) { 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 nn, e, t) { 127 return n.getAttributee) || t 128 } 129 function en) { 130 return document.getElementsByTagNamen) 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: ni, 'zIndex', -1), 139 o: ni, 'opacity', 1), 140 c: ni, 'color', '255,255,255'), 141 n: ni, '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.clearRect0, 0, a, c) 156 var n, e, t, o, m, l 157 s.forEachfunction 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.fillRecti.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.moveToi.x, i.y), 183 r.lineTon.x, n.y), 184 r.stroke))) 185 }), 186 xi) 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.setTimeoutn, 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].appendChildm), 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 setTimeoutfunction ) { 228 i) 229 }, 100) 230 })) 231 </script> 232 <script> 233 // var timeOut = setTimeoutfunction ) { 234 // alert 235 // '友情提示:亲爱的，请确保输入第一个时间值大于第二个值哦，方便你观察得到的结果哦^_^' 236 // ) 237 // }, 2000) 238 // clearTimeouttimeOut) 239 function onLoad) { 240 location.reloadtrue) 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 Datex) //转化为Date对象的形式 248 var dateEnd = new Datey) //转化为Date对象的形式 249 //di作为一个变量传进来 250 //如果时间格式是正确的，那下面这一步转化时间格式就可以不用了 251 // let dateBegin = new Dated1.replace/-/g, '/')) //将-转化为/，使用new Date 252 // let dateEnd = new Date) //获取当前时间 253 let dateDiff = dateBegin.getTime) - dateEnd.getTime) //时间差的毫秒数 254 let dayDiff = Math.floordateDiff / 24 * 3600 * 1000)) //计算出相差天数 255 let leave1 = dateDiff % 24 * 3600 * 1000) //计算天数后剩余的毫秒数 256 let hours = Math.floorleave1 / 3600 * 1000)) //计算出小时数 257 //计算相差分钟数 258 let leave2 = leave1 % 3600 * 1000) //计算小时数后剩余的毫秒数 259 let minutes = Math.floorleave2 / 60 * 1000)) //计算相差分钟数 260 //计算相差秒数 261 let leave3 = leave2 % 60 * 1000) //计算分钟数后剩余的毫秒数 262 let seconds = Math.roundleave3 / 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.logdateBegin) 293 console.logdateEnd) 294 } else { 295 alert 296 '亲爱的，请先输入再获取值啊，不要这么心急，不要让我白跑一趟哦，爱你哟^_^~~~~' 297 ) 298 } 299 } 300 301 // year = x.substring0, 4) 302 303 // month = x.substring5, 7) 304 305 // day = x.substring8, 10) 306 307 // hour = x.substring11, 13) 308 309 // minute = x.substring14, 16) 310 311 // secods = x.substring17, 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.logz) 328 </script> 329 </body> 330 </html>
时间如白驹过隙，忽然而已，且行且珍惜……