feat: add title and end params for countdown
This commit is contained in:
commit
dd2a962264
GPG key ID:
111C00916C1641E5
6 changed files with 128 additions and 0 deletions
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2024 sup39
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
5
README.md
Normal file
5
README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Countdown
|
||||
Countdown web page for sup39
|
||||
|
||||
## Example
|
||||
https://app.sup39.dev/countdown/?title=TITLE&end=2024-12-31%2012:07
|
||||
44
index.html
Normal file
44
index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Countdown | sup39</title>
|
||||
<meta name="description" content="Countdown web page for sup39">
|
||||
<meta name="author" content="sup39">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="https://res.sup39.dev/index.css">
|
||||
<style>
|
||||
main {
|
||||
width: fit-content;
|
||||
}
|
||||
#title {
|
||||
margin-inline-end: 0em;
|
||||
}
|
||||
#ct-root {
|
||||
text-align: end;
|
||||
}
|
||||
#ct-root span[id] {
|
||||
font-size: 1.5em;
|
||||
color: #2ee5b8;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<script src="./index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="title"></div>
|
||||
<div id="ct-root">
|
||||
<span id="ct-sign"></span>
|
||||
<span id="ct-d">0</span>
|
||||
<span>d</span>
|
||||
<span id="ct-h">00</span>
|
||||
<span>h</span>
|
||||
<span id="ct-m">00</span>
|
||||
<span>m</span>
|
||||
<span id="ct-s">00</span>
|
||||
<span>s</span>
|
||||
</div>
|
||||
</main>
|
||||
<footer>Source code: <a href="https://forgejo.sup39.dev/sup39/countdown">supGit/sup39/countdown</a></footer>
|
||||
</body>
|
||||
</html>
|
||||
43
index.js
Normal file
43
index.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
// SPDX-License-Identifier: MIT
|
||||
// Copyright (c) 2024 sup39
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const end = +new Date(params.get('end') ?? +new Date());
|
||||
console.log(params.get('end'));
|
||||
|
||||
/** @param {string} selector */
|
||||
const queryKnownSelector = selector =>
|
||||
/**@type{HTMLElement}*/(document.querySelector(selector));
|
||||
|
||||
const title = params.get('title');
|
||||
if (title != null) {
|
||||
queryKnownSelector('#title').textContent = title;
|
||||
}
|
||||
|
||||
const units = [
|
||||
{max: 60, digit: 2, element: queryKnownSelector('#ct-s')},
|
||||
{max: 60, digit: 2, element: queryKnownSelector('#ct-m')},
|
||||
{max: 24, digit: 2, element: queryKnownSelector('#ct-h')},
|
||||
{max: Infinity, digit: 0, element: queryKnownSelector('#ct-d')},
|
||||
];
|
||||
const elmSign = queryKnownSelector('#ct-sign');
|
||||
let t0 = 0;
|
||||
function render() {
|
||||
const t = (end - +new Date()) / 1000 | 0;
|
||||
if (t !== t0) {
|
||||
let val = t;
|
||||
const isMinus = val < 0;
|
||||
if (isMinus) val = -val;
|
||||
elmSign.textContent = isMinus ? '-' : '';
|
||||
for (const {max, digit, element} of units) {
|
||||
element.textContent = String(val % max).padStart(digit, '0');
|
||||
val = val / max | 0;
|
||||
}
|
||||
// next
|
||||
t0 = t;
|
||||
}
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
render();
|
||||
});
|
||||
7
jsconfig.json
Normal file
7
jsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "es2017"],
|
||||
"checkJs": true,
|
||||
"strict": true
|
||||
}
|
||||
}
|
||||
8
package.json
Normal file
8
package.json
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "@sup39/countdown",
|
||||
"version": "0.1.0",
|
||||
"description": "Countdown web page for sup39",
|
||||
"author": "sup39 <dev@sup39.dev>",
|
||||
"license": "MIT",
|
||||
"private": true
|
||||
}
|
||||
Loading…
Reference in a new issue