55 lines
No EOL
2.5 KiB
HTML
55 lines
No EOL
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Countdown</title>
|
|
<script>
|
|
if(window.location.href.includes('#')) window.location.href = window.location.href.replace(/#/g, encodeURIComponent('#'));
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const
|
|
{
|
|
time,
|
|
textColor = '#4C5193',
|
|
backgroundColor = '#00000000',
|
|
fontFamily = 'Poppins',
|
|
fontWeight = 700,
|
|
fontSize = '77px',
|
|
endText = 'LIVE'
|
|
} = decodeURIComponent(window.location.search).slice(1).split('&').reduce((object, string) => {
|
|
const [key, value] = string.split('=');
|
|
return {
|
|
...object,
|
|
[key]: value
|
|
};
|
|
}, {}),
|
|
[hours, minutes = '00', seconds = '00'] = time.split(':');
|
|
|
|
Object.assign(document.body.style, { color: textColor, backgroundColor, fontFamily, fontWeight, fontSize });
|
|
|
|
const fontLinkElement = document.createElement('link');
|
|
fontLinkElement.setAttribute('href', `https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${fontWeight}`);
|
|
fontLinkElement.setAttribute('rel', 'stylesheet');
|
|
document.head.appendChild(fontLinkElement);
|
|
|
|
const t2 = new Date();
|
|
t2.setHours(parseInt(hours), parseInt(minutes), parseInt(seconds));
|
|
const refresh = () => {
|
|
const
|
|
t1 = new Date(),
|
|
delta = new Date(t2 - t1),
|
|
twoDigits = number => !isNaN(number) ? (number >= 10 ? number : `0${number}`) : undefined,
|
|
remainingHours = twoDigits(delta.getHours() - 1),
|
|
remainingMinutes = twoDigits(delta.getMinutes()),
|
|
remainingSeconds = twoDigits(delta.getSeconds());
|
|
if(delta > 0){
|
|
document.body.innerText = `${remainingHours ? `${remainingHours}:` : ''}${remainingMinutes || '00'}:${remainingSeconds || '00'}`;
|
|
setTimeout(refresh, 250);
|
|
}
|
|
else
|
|
document.body.innerText = endText;
|
|
};
|
|
refresh();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html> |