Created
January 15, 2022 11:38
-
-
Save wyfdev/372a06f8d824987a488ef65fca517ec4 to your computer and use it in GitHub Desktop.
count down page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Countdown</title> | |
| <style> | |
| body { | |
| font-family: Hiragino Sans GB, Microsoft YaHei, Lucida Grande, Lucida Sans Unicode, WenQuanYi Micro Hei, Verdana, Aril, sans-serif; | |
| -height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| height: 90vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| align-content: center; | |
| flex-wrap: nowrap; | |
| justify-content: center; | |
| } | |
| main { | |
| justify-content: center; | |
| align-self: center; | |
| margin: 1em auto; | |
| max-width: 90vw; | |
| max-height: 90vh; | |
| text-align: center; | |
| white-space: nowrap; | |
| font-size: 5vw; | |
| } | |
| main b { | |
| font-size: 1.7em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main></main> | |
| <script> | |
| "use strict"; | |
| const urlSearchParams = new URLSearchParams(window.location.search); | |
| const params = Object.fromEntries(urlSearchParams.entries()); | |
| // | |
| // clock | |
| // | |
| const RE_DATE = /(\d{4})-?(\d{2})-?(\d{2})[\s-:TZ]?(\d{2})[-:]?(\d{2})[-:]?(\d{2})/; | |
| // new Date(year, month, day, hours, minutes, seconds, milliseconds) | |
| let [timeStr, ...timeParams] = RE_DATE.exec(params['time']); | |
| timeParams = timeParams.map(x => parseInt(x)); | |
| timeParams[1] -= 1; | |
| console.log(timeStr); | |
| (timeParams => { | |
| const target = new Date(...timeParams); | |
| document.title = `Time remain to ${target.toLocaleString()}` | |
| // Update the count down every 1 second | |
| let counter = setInterval(function () { | |
| let now = new Date(); | |
| let distance = target.getTime() - now.getTime(); | |
| let days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| let seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| // Display the result in the element main | |
| document.querySelector('main').innerHTML = `<b>${days}</b>天 <b>${hours}</b>小时 <b>${minutes}</b>分钟 <b>${seconds}</b>秒` | |
| // If the count down is finished, write some text | |
| if (distance < 0) { | |
| clearInterval(x); | |
| document.querySelector('main').innerHTML = "EXPIRED"; | |
| } | |
| }, 1000) | |
| })(timeParams); | |
| // | |
| // color | |
| // | |
| const main = document.querySelector('main') | |
| const body = document.body | |
| main.style.color = params['color'] ? params['color'] : (params['colorhash'] ? '#' + params['colorhash'] : 'black') | |
| body.style.background = params['bgcolor'] ? params['bgcolor'] : (params['bgcolorhash'] ? '#' + params['bgcolorhash'] : 'white') | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment