95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
|
<!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>New Year's Countdown</title>
|
||
|
|
<script src="dist/fireworks.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #000;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
#countdown {
|
||
|
|
text-align: center;
|
||
|
|
padding: 20px;
|
||
|
|
font-size: 50px;
|
||
|
|
color: #fff;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
#fireworks-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="fireworks-container" style="display: none;"></div>
|
||
|
|
<div id="countdown" style="position: absolute; top: 20px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var currentYear = new Date().getFullYear();
|
||
|
|
var newYear = new Date(currentYear + 1, 0, 1, 0, 0, 0, 0);
|
||
|
|
|
||
|
|
var countdown = setInterval(function() {
|
||
|
|
var now = new Date().getTime();
|
||
|
|
var distance = newYear - now;
|
||
|
|
|
||
|
|
var days = Math.floor(distance / (24 * 60 * 60 * 1000));
|
||
|
|
var hours = Math.floor((distance % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
|
||
|
|
var minutes = Math.floor((distance % (60 * 60 * 1000)) / (60 * 1000));
|
||
|
|
var seconds = Math.floor((distance % (60 * 1000)) / 1000);
|
||
|
|
|
||
|
|
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
|
||
|
|
+ minutes + "m " + seconds + "s";
|
||
|
|
|
||
|
|
if (distance < 0) {
|
||
|
|
clearInterval(countdown);
|
||
|
|
document.getElementById("countdown").innerHTML = "HAPPY NEW YEAR!!";
|
||
|
|
startFireworks();
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
function startFireworks() {
|
||
|
|
const container = document.getElementById('fireworks-container');
|
||
|
|
const fireworks = new Fireworks(container, {
|
||
|
|
hue: { min: 0, max: 345 },
|
||
|
|
delay: { min: 15, max: 30 },
|
||
|
|
rocketsPoint: 50,
|
||
|
|
speed: 2,
|
||
|
|
acceleration: 1.05,
|
||
|
|
friction: 0.95,
|
||
|
|
gravity: 1.5,
|
||
|
|
particles: 90,
|
||
|
|
trace: 3,
|
||
|
|
explosion: 5,
|
||
|
|
boundaries: {
|
||
|
|
top: container.clientTop,
|
||
|
|
bottom: container.clientHeight,
|
||
|
|
left: container.clientLeft,
|
||
|
|
right: container.clientWidth
|
||
|
|
},
|
||
|
|
mouse: { click: false, move: false, max: 1 },
|
||
|
|
});
|
||
|
|
fireworks.start();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|