third secton for time

+effect from
mostlikers.com/2016/11/create-fireworks-animation-effects.html

index.html

@@ -81,13 +81,15 @@
 		<h1 class="countdown-title">До нового <span id="future_year"></span> года осталось:</h1>
 		<div id="countdown" class="countdown">
 			<div class="countdown-inner">
-				<span class="didts" id="num1"></span><br>
+				<span class="didts" id="num1"></span>
-				<span class="didts-text" id="text-num1"></span>
 			</div>
-			<div class="countdown-inner"><span id="separator">&#8201 : &#8201</span></div>
+			<div class="countdown-inner"><span id="separator1">:</span></div>
 			<div class="countdown-inner">
-				<span class="didts" id="num2"></span><br>
+				<span class="didts" id="num2"></span>
-				<span class="didts-text" id="text-num2"></span>
+			</div>
+			<div class="countdown-inner"><span id="separator2">:</span></div>
+			<div class="countdown-inner">
+				<span class="didts" id="num3"></span>
 			</div>
 		</div>
 		<div id="congrats">
@@ -103,6 +105,7 @@
 	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
 		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
 		crossorigin="anonymous"></script>
+	<script type="text/javascript" src="jquery.fireworks.js"></script>
 	<script type="text/javascript" src="script.js"></script>
 </body>
 

jquery.fireworks.js

@@ -0,0 +1,304 @@
+/*
+Adapted from http://jsfiddle.net/dtrooper/AceJJ/
+
+TODO:
+ * Try to get rid of ghosting
+ * See if anything can be made more efficient
+ * Make the canvas fit in the z-order
+*/
+
+(function( $ ) {
+    var MAX_ROCKETS = 5,
+        MAX_PARTICLES = 1000;
+
+    var FUNCTIONS = {
+        'init': function(element) {
+            var jqe = $(element);
+
+            // Check this element isn't already inited
+            if (jqe.data('fireworks_data') !== undefined) {
+                console.log('Looks like this element is already inited!');
+                return;
+            }
+
+            // Setup fireworks on this element
+            var canvas = document.createElement('canvas'),
+                canvas_buffer = document.createElement('canvas'),
+                data = {
+                    'element': element,
+                    'canvas': canvas,
+                    'context': canvas.getContext('2d'),
+                    'canvas_buffer': canvas_buffer,
+                    'context_buffer': canvas_buffer.getContext('2d'),
+                    'particles': [],
+                    'rockets': []
+                };
+
+            // Add & position the canvas
+            if (jqe.css('position') === 'static') {
+                element.style.position = 'relative';
+            }
+            element.appendChild(canvas);
+            canvas.style.position = 'absolute';
+            canvas.style.top = '0px';
+            canvas.style.bottom = '0px';
+            canvas.style.left = '0px';
+            canvas.style.right = '0px';
+
+            // Kickoff the loops
+            data.interval = setInterval(loop.bind(this, data), 1000 / 50);
+
+            // Save the data for later
+            jqe.data('fireworks_data', data);
+        },
+        'destroy': function(element) {
+            var jqe = $(element);
+
+            // Check this element isn't already inited
+            if (jqe.data('fireworks_data') === undefined) {
+                console.log('Looks like this element is not yet inited!');
+                return;
+            }
+            var data = jqe.data('fireworks_data');
+            jqe.removeData('fireworks_data');
+
+            // Stop the interval
+            clearInterval(data.interval);
+
+            // Remove the canvas
+            data.canvas.remove();
+
+            // Reset the elements positioning
+            data.element.style.position = '';
+        }
+    };
+
+    $.fn.fireworks = function(action) {
+        // Assume no action means we want to init
+        if (!action) {
+            action = 'init';
+        }
+
+        // Process each element
+        this.each(function() {
+            FUNCTIONS[action](this);
+        });
+
+        // Chaining ftw :)
+        return this;
+    };
+
+    function launch(data) {
+        if (data.rockets.length < MAX_ROCKETS) {
+            var rocket = new Rocket(data);
+            data.rockets.push(rocket);
+        }
+    }
+
+    function loop(data) {
+        // Launch a new rocket
+        launch(data);
+
+        // Update screen size
+        if (data.canvas_width != data.element.offsetWidth) {
+            data.canvas_width = data.canvas.width = data.canvas_buffer.width = data.element.offsetWidth;
+        }
+        if (data.canvas_height != data.element.offsetHeight) {
+            data.canvas_height = data.canvas.height = data.canvas_buffer.height = data.element.offsetHeight;
+        }
+
+        // Fade the background out slowly
+        data.context_buffer.clearRect(0, 0, data.canvas.width, data.canvas.height);
+        data.context_buffer.globalAlpha = 0.9;
+        data.context_buffer.drawImage(data.canvas, 0, 0);
+        data.context.clearRect(0, 0, data.canvas.width, data.canvas.height);
+        data.context.drawImage(data.canvas_buffer, 0, 0);
+
+        // Update the rockets
+        var existingRockets = [];
+        data.rockets.forEach(function(rocket) {
+            // update and render
+            rocket.update();
+            rocket.render(data.context);
+
+            // random chance of 1% if rockets is above the middle
+            var randomChance = rocket.pos.y < (data.canvas.height * 2 / 3) ? (Math.random() * 100 <= 1) : false;
+
+            /* Explosion rules
+                 - 80% of screen
+                - going down
+                - close to the mouse
+                - 1% chance of random explosion
+            */
+            if (rocket.pos.y < data.canvas.height / 5 || rocket.vel.y >= 0 || randomChance) {
+                rocket.explode(data);
+            } else {
+                existingRockets.push(rocket);
+            }
+        });
+        data.rockets = existingRockets;
+
+        // Update the particles
+        var existingParticles = [];
+        data.particles.forEach(function(particle) {
+            particle.update();
+
+            // render and save particles that can be rendered
+            if (particle.exists()) {
+                particle.render(data.context);
+                existingParticles.push(particle);
+            }
+        });
+        data.particles = existingParticles;
+
+        while (data.particles.length > MAX_PARTICLES) {
+            data.particles.shift();
+        }
+    }
+
+    function Particle(pos) {
+        this.pos = {
+            x: pos ? pos.x : 0,
+            y: pos ? pos.y : 0
+        };
+        this.vel = {
+            x: 0,
+            y: 0
+        };
+        this.shrink = .97;
+        this.size = 2;
+
+        this.resistance = 1;
+        this.gravity = 0;
+
+        this.flick = false;
+
+        this.alpha = 1;
+        this.fade = 0;
+        this.color = 0;
+    }
+
+    Particle.prototype.update = function() {
+        // apply resistance
+        this.vel.x *= this.resistance;
+        this.vel.y *= this.resistance;
+
+        // gravity down
+        this.vel.y += this.gravity;
+
+        // update position based on speed
+        this.pos.x += this.vel.x;
+        this.pos.y += this.vel.y;
+
+        // shrink
+        this.size *= this.shrink;
+
+        // fade out
+        this.alpha -= this.fade;
+    };
+
+    Particle.prototype.render = function(c) {
+        if (!this.exists()) {
+            return;
+        }
+
+        c.save();
+
+        c.globalCompositeOperation = 'lighter';
+
+        var x = this.pos.x,
+            y = this.pos.y,
+            r = this.size / 2;
+
+        var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
+        gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
+        gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
+        gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");
+
+        c.fillStyle = gradient;
+
+        c.beginPath();
+        c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
+        c.closePath();
+        c.fill();
+
+        c.restore();
+    };
+
+    Particle.prototype.exists = function() {
+        return this.alpha >= 0.1 && this.size >= 1;
+    };
+
+    function Rocket(data) {
+        Particle.apply(
+            this,
+            [{
+                x: Math.random() * data.canvas.width * 2 / 3 + data.canvas.width / 6,
+                y: data.canvas.height
+            }]
+        );
+
+        this.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
+        this.vel.y = Math.random() * -3 - 4;
+        this.vel.x = Math.random() * 6 - 3;
+        this.size = 2;
+        this.shrink = 0.999;
+        this.gravity = 0.01;
+    }
+
+    Rocket.prototype = new Particle();
+    Rocket.prototype.constructor = Rocket;
+
+    Rocket.prototype.explode = function(data) {
+        var count = Math.random() * 10 + 80;
+
+        for (var i = 0; i < count; i++) {
+            var particle = new Particle(this.pos);
+            var angle = Math.random() * Math.PI * 2;
+
+            // emulate 3D effect by using cosine and put more particles in the middle
+            var speed = Math.cos(Math.random() * Math.PI / 2) * 15;
+
+            particle.vel.x = Math.cos(angle) * speed;
+            particle.vel.y = Math.sin(angle) * speed;
+
+            particle.size = 10;
+
+            particle.gravity = 0.2;
+            particle.resistance = 0.92;
+            particle.shrink = Math.random() * 0.05 + 0.93;
+
+            particle.flick = true;
+            particle.color = this.explosionColor;
+
+            data.particles.push(particle);
+        }
+    };
+
+    Rocket.prototype.render = function(c) {
+        if (!this.exists()) {
+            return;
+        }
+
+        c.save();
+
+        c.globalCompositeOperation = 'lighter';
+
+        var x = this.pos.x,
+            y = this.pos.y,
+            r = this.size / 2;
+
+        var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
+        gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
+        gradient.addColorStop(0.2, "rgba(255, 180, 0, " + this.alpha + ")");
+
+        c.fillStyle = gradient;
+
+        c.beginPath();
+        c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
+        c.closePath();
+        c.fill();
+
+        c.restore();
+    };
+}(jQuery));

main.css

@@ -47,11 +47,3 @@ body {
 .didts {
   display: inline-block;
 }
- 
-.didts-text {
-  display: block;
-  font-size: 16px;
-}
-.didts-text:first-child{
-  padding-right: 50%;
-}

script.js

@@ -72,9 +72,9 @@ function changeBackgroundColor() {
 function initializeClock(endtime) {
     var num1 = document.getElementById('num1');
     var num2 = document.getElementById('num2');
-    var textnum1 = document.getElementById('text-num1');
+    var num3 = document.getElementById('num3');
-    var textnum2 = document.getElementById('text-num2');
+    var dots1 = document.getElementById('separator1');
-    var dots = document.getElementById('separator');
+    var dots2 = document.getElementById('separator2');
     var debug1 = document.getElementById('endtime');
     var debug2 = document.getElementById('left');
     var debug3 = document.getElementById('fulltimer');
@@ -82,52 +82,44 @@ function initializeClock(endtime) {
 
     function updateClock() {
         var t = getTimeRemaining(endtime);
-        if (t.days > 99){
+        if (t.days > 0) {
-            num1.innerHTML = t.days;
+            num1.innerHTML = (t.days > 99) ? t.days : ('0' + t.days).slice(-2);
+            dots1.innerHTML = "д. &#8201&#8201";
+            dots1.style.fontSize = "3rem";
+            dots1.style.width = dots2.style.width;
             num2.innerHTML = ('0' + t.hours).slice(-2);
-            textnum1.innerHTML = 'Дней';
+            num3.innerHTML = ('0' + t.minutes).slice(-2);
-            textnum2.innerHTML = 'Часов';
-            document.title = t.days + " дн. до НГ";
-        }
-        else if (t.days > 0) {
-            num1.innerHTML = ('0' + t.days).slice(-2);
-            num2.innerHTML = ('0' + t.hours).slice(-2);
-            textnum1.innerHTML = 'Дней';
-            textnum2.innerHTML = 'Часов';
             document.title = t.days + " дн. до НГ";
         }
         else if (t.hours > 0) {
             num1.innerHTML = ('0' + t.hours).slice(-2);
+            dots1.innerHTML = ":";
+            dots1.style.fontSize = "1em";
             num2.innerHTML = ('0' + t.minutes).slice(-2);
-            textnum1.innerHTML = 'Часов';
+            num3.innerHTML = ('0' + t.seconds).slice(-2);
-            textnum2.innerHTML = 'Минут';
             document.title = t.hours + " ч. до НГ";
         }
-        else if (t.minutes > 0) {
+        else if (t.total > 0) {
             num1.innerHTML = ('0' + t.minutes).slice(-2);
             num2.innerHTML = ('0' + t.seconds).slice(-2);
-            textnum1.innerHTML = 'Минут';
+            num3.innerHTML = ('0' + t.seconds1_100).slice(-2);
-            textnum2.innerHTML = 'Секунд';
+            dots2.innerHTML = ".";
-            document.title = t.minutes + " мин. до НГ";
+            document.title = (t.total <= 60000) ? t.seconds + " сек. до НГ" : t.minutes + " мин. до НГ";
-        }
-        else if (t.total > 0) {
-            num1.innerHTML = ('0' + t.seconds).slice(-2);
-            num2.innerHTML = ('0' + t.seconds1_100).slice(-2);
-            dots.innerHTML = "&#8201 . &#8201"
-            textnum1.innerHTML = '';
-            textnum2.innerHTML = '';
-            document.title = t.seconds + " сек. до НГ";
         }
         else {
             num1.innerHTML = "00";
             num2.innerHTML = "00";
+            num3.innerHTML = "00";
             clearInterval(timeinterval);
             document.title = "С новым годом!";
             var congrats = document.getElementById("congrats");
             congrats.innerHTML = "C новым годом!!!\nСчасливого " + future_year + " года!";
+            setTimeout(function() {
+                $('body').fireworks();
+            });
         };
-        dots.style.color = ((t.seconds % 2) || (t.total <= 60000)) ? "#fff":"#fff0";
+        dots1.style.color = ((t.seconds % 2) || (t.total <= 3600000) || (t.days > 0)) ? "#fff":"#fff0";
-        changeBackgroundColor();
+        dots2.style.color = ((t.seconds % 2) || (t.total <= 3600000)) ? "#fff":"#fff0";
         debug2.innerHTML = t.total.toLocaleString('ru');
         debug3.innerHTML = t.days + ':' + ('0' + t.hours).slice(-2) + ':' + ('0' + t.minutes).slice(-2) + ':' + ('0' + t.seconds).slice(-2) + '.' + ('00' + t.mseconds).slice(-3);
     }
@@ -140,6 +132,7 @@ let d_for_setting = new Date();
 let future_year = (d_for_setting.getMonth() == 0 && d_for_setting.getDate() < 7) ? d_for_setting.getFullYear() : d_for_setting.getFullYear() + 1
 document.getElementById("future_year").innerHTML = future_year;
 initializeClock("Jan 01 " + future_year + " 00:00:00");
-// initializeClock("Feb 12 2021 22:03:00");
+//initializeClock("Aug 15 2021 22:17:00");
 DateTime();
 setInterval(DateTime, 1000/60);
+setInterval(changeBackgroundColor, 1000/60);