Skip to content

Instantly share code, notes, and snippets.

@wyfdev

wyfdev/countdown.html

Created January 15, 2022 11:38
Show Gist options
  • Save wyfdev/372a06f8d824987a488ef65fca517ec4 to your computer and use it in GitHub Desktop.
Save wyfdev/372a06f8d824987a488ef65fca517ec4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wyfdev revised this gist Jan 15, 2022. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion countdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,6 @@
    <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;
  2. wyfdev created this gist Jan 15, 2022.
    93 changes: 93 additions & 0 deletions countdown.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,93 @@
    <!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>