New Year Countdown Block

[Chen Zhen]

New Year Countdown

There are settings at the onset of the block code to change the year & other text.

PHP Block Code:

Code Select Expand

global $context;

echo '
<script>
if (typeof mytimecounter_once === "undefined") {
var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2026-01-01", mytimecounter_width = "45rem";
var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
var mytimecounter_titles = ["New Year 2026", "' . $context['forum_name'] . ' Countdown"];
var mytimecounter_hny = ["happy", "new", "year"];
var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
}
</script>
<div id="blockclocktimer" style="position: relative;display: flex;flex-direction: row;align-items: stretch;width: 100%;overlfow: hidden;padding: 0.5rem;">
<div class="mytimecounter_parent" style="overflow: clip;width: 100%;">
<div class="mytimecounter_container" style="box-sizing: content-box;">
<h1 class="mytimecounter_top mytimecounter_titles0"></h1>
<h1 class="mytimecounter_mid">
<svg class="mytimecounter_svg" xmlns="http://www.w3.org/2000/svg">
<line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
</svg>
</h1>
<h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
<div class="mytimecounter_clockdiv">
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_dayz mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_days"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_hours mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_hrs"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_minutes mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_mins"></div>
</div>
<div class="mytimecounter_clockdivdiv2">
<span class="mytimecounter_clockspan2">:</span>
<div class="mytimecounter_smalltext2">&#8203;</div>
</div>
<div class="mytimecounter_clockdivdiv">
<span class="mytimecounter_seconds mytimecounter_clockspan"></span>
<div class="mytimecounter_smalltext mytimecounter_secs"></div>
</div>
</div>
</div>
</div>
</div>
<script>
mytimecounter_getTimeRemaining = function(endtime) {
total = Date.parse(endtime) - Date.parse(new Date());
seconds = Math.floor((total / 1000) % 60);
minutes = Math.floor((total / 1000 / 60) % 60);
hours = Math.floor((total / (1000 * 60 * 60)) % 24);
days = Math.floor(total / (1000 * 60 * 60 * 24));
return {total, days, hours, minutes, seconds};
}

mytimecounter_updateClock = function(id, endtime = "") {
if (endtime) {
updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
$("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
$("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
$("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
$("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
if (updateTimeSpan.total <= 0) {
clearInterval(timeintervalCounter);
}
if (updateTimeSpan.days > 99) {
$(".mytimecounter_days").css("padding-right","1cw");
}
}
}

mytimecounter_initializeClock = function(id, endtime) {
mytimecounter_updateClock(id, endtime);
timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
}

$(document).ready(function() {
if (typeof mytimecounter_twice === "undefined") {
var mytimecounter_twice = true;
$(".mytimecounter_titles0").html(mytimecounter_titles[0]);
$(".mytimecounter_titles1").html(mytimecounter_titles[1]);
$(".mytimecounter_days").html(mytimecounter_days);
$(".mytimecounter_hrs").html(mytimecounter_hrs);
$(".mytimecounter_mins").html(mytimecounter_mins);
$(".mytimecounter_secs").html(mytimecounter_secs);
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
$(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
$(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
$(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
$(".mytimecounter_top").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"2rem"});
$(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
$(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"60", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"2rem"});
$(".mytimecounter_clockdiv").css({"flex": 1, "position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv2").css({"min-width":"5%", "max-width":"5%", "width":"5%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"100", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
$(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
$(".mytimecounter_clockspan").css({"margin":"0px", "padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
$(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
$(".mytimecounter_smalltext").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_smalltext2").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
$(".mytimecounter_seconds").css("color", "red");
/* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
mytimecounter_str = "";
for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? \'<span class="mytimecounter_midspan"></span>\' : "");
}
$(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url(\'" + mytimecounter_fireworksgif + "\')", "background-repeat":"no-repeat", "background-size":"cover"});
$(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
$(".mytimecounter_clockdiv").html(\'<div class="mytimecounter_clockdivdiv"><span>\' + mytimecounter_str + \'</span></div>\');
$(".mytimecounter_clockdiv").css({"flex": 1, "padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
$(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
$(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
}
var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
if (mobileBlockCheck) {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
}
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
$(".mytimecounter_container").width(w);
$(".mytimecounter_container").height(h);
var offset = -1 * ($(".mytimecounter_parent").width() - ($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON));
$("#blockclocktimer").css("padding", offset);
$(window).resize(function() {
var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
var wratio = (120+w)* 0.00115;
var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
$(".mytimecounter_container").css("font-size", "small");
$(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
$(".mytimecounter_container").width(cw);
$(".mytimecounter_container").height(ch);
var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
offset = Math.round((offset + Number.EPSILON) * 100) / 100;
$("#blockclocktimer").css("padding", offset);
});
}
});
</script>';

[Dave]

The same thing with this code too Chen, see attached for current screenshot on Hobby

[Chen Zhen]

Try it now & let me know if it works properly this time.

[Chen Zhen]

It needs some adjustments for text sizing (words for: hours, minutes, etc.) & the padding needs a bit of adjustment.
I'll work on it later today to fix things up.

[Dave]

Yes that's better Chen, thank you

I just need to change the numbers to bold text

How can I add a little more space between the numbers and the days ,hours etc. The numbers are almost touching the letters

[Chen Zhen]

Try it now..

[Dave]

Try it now..

That's perfect Chen thank you, I have made a couple of changes for my personal use, the font weight I've increased to 500 and I've removed

Code Select Expand

, "' . $context['forum_name'] . ' Countdown" as I personally don't think it's necessary as it's already on that website, but overall it's great.

This is my version

Code Select Expand

global $context;

echo '
<script>
    if (typeof mytimecounter_once === "undefined") {
        var mytimecounter_fireworks = true, mytimecounter_fireworksgif = "https://example.com/fireworks.gif", mytimecounter_deadline = "2025-04-01", mytimecounter_width = "45rem";
        var mytimecounter_days = "Days", mytimecounter_hrs = "Hours", mytimecounter_mins = "Minutes", mytimecounter_secs = "Seconds";
        var mytimecounter_titles = ["Quiz and Arcade Reset"];
        var total, seconds, minutes, hours, days, clock, updateTimeSpan, timeintervalCounter, endtime, mytimecounter_str, mytimecounter_once = true, hnycount = 0;
        var mytimecounter_getTimeRemaining, mytimecounter_updateClock, mytimecounter_initializeClock;
    }
</script>
<div id="blockclocktimer" style="position: relative;display: flex;flex-direction: row;align-items: stretch;width: 100%;overlfow: hidden;padding: 0.5rem;">
    <div class="mytimecounter_parent" style="overflow: clip;width: 100%;">
        <div class="mytimecounter_container" style="box-sizing: content-box;">
            <h1 class="mytimecounter_top mytimecounter_titles0"></h1>
            <h1 class="mytimecounter_mid">
                <svg class="mytimecounter_svg" xmlns="http://www.w3.org svg">
                    <line class="mytimecounter_line" x1="0" y1="10" x2="250" y2="10" />
                </svg>
            </h1>
            <h1 class="mytimecounter_bot mytimecounter_titles1"></h1>
            <div class="mytimecounter_clockdiv">
                <div class="mytimecounter_clockdivdiv">
                    <span class="mytimecounter_dayz mytimecounter_clockspan"></span>
                    <div class="mytimecounter_smalltext mytimecounter_days"></div>
                </div>
                <div class="mytimecounter_clockdivdiv2">
                    <span class="mytimecounter_clockspan2">:</span>
                    <div class="mytimecounter_smalltext2">�</div>
                </div>
                <div class="mytimecounter_clockdivdiv">
                    <span class="mytimecounter_hours mytimecounter_clockspan"></span>
                    <div class="mytimecounter_smalltext mytimecounter_hrs"></div>
                </div>
                <div class="mytimecounter_clockdivdiv2">
                    <span class="mytimecounter_clockspan2">:</span>
                    <div class="mytimecounter_smalltext2">�</div>
                </div>
                <div class="mytimecounter_clockdivdiv">
                    <span class="mytimecounter_minutes mytimecounter_clockspan"></span>
                    <div class="mytimecounter_smalltext mytimecounter_mins"></div>
                </div>
                <div class="mytimecounter_clockdivdiv2">
                    <span class="mytimecounter_clockspan2">:</span>
                    <div class="mytimecounter_smalltext2">�</div>
                </div>
                <div class="mytimecounter_clockdivdiv">
                    <span class="mytimecounter_seconds mytimecounter_clockspan"></span>
                    <div class="mytimecounter_smalltext mytimecounter_secs"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    mytimecounter_getTimeRemaining = function(endtime) {
        total = Date.parse(endtime) - Date.parse(new Date());
        seconds = Math.floor((total / 1000) % 60);
        minutes = Math.floor((total / 1000 / 60) % 60);
        hours = Math.floor((total / (1000 * 60 * 60)) % 24);
        days = Math.floor(total / (1000 * 60 * 60 * 24));
        return {total, days, hours, minutes, seconds};
    }

    mytimecounter_updateClock = function(id, endtime = "") {
        if (endtime) {
            updateTimeSpan = mytimecounter_getTimeRemaining(endtime);
            $("." + id).find(".mytimecounter_dayz").html(updateTimeSpan.days);
            $("." + id).find(".mytimecounter_hours").html(("0" + updateTimeSpan.hours).slice(-2));
            $("." + id).find(".mytimecounter_minutes").html(("0" + updateTimeSpan.minutes).slice(-2));
            $("." + id).find(".mytimecounter_seconds").html(("0" + updateTimeSpan.seconds).slice(-2));
            if (updateTimeSpan.total <= 0) {
                clearInterval(timeintervalCounter);
            }
            if (updateTimeSpan.days > 99) {
                $(".mytimecounter_days").css("padding-right","1cw");
            }
        }
    }

    mytimecounter_initializeClock = function(id, endtime) {
        mytimecounter_updateClock(id, endtime);
        timeintervalCounter = setInterval(function(){mytimecounter_updateClock(id, endtime);}, 1000);
    }

    $(document).ready(function() {
        if (typeof mytimecounter_twice === "undefined") {
            var mytimecounter_twice = true;
            $(".mytimecounter_titles0").html(mytimecounter_titles[0]);
            $(".mytimecounter_titles1").html(mytimecounter_titles[1]);
            $(".mytimecounter_days").html(mytimecounter_days);
            $(".mytimecounter_hrs").html(mytimecounter_hrs);
            $(".mytimecounter_mins").html(mytimecounter_mins);
            $(".mytimecounter_secs").html(mytimecounter_secs);
            $(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%"});
            $(".mytimecounter_container").css({"width":mytimecounter_width, "min-width":mytimecounter_width, "max-width":"100%", "box-sizing":"content-box"});
            $(".mytimecounter_svg").css({"height":"0.4rem", "width":"6rem"});
            $(".mytimecounter_line").css({"stroke":"blue", "stroke-width":"12"});
            $(".mytimecounter_top").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"red", "font-size":"2rem"});
            $(".mytimecounter_mid").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"blue", "font-size":"0.75rem"});
            $(".mytimecounter_bot").css({"font-family":"serif", "font-weight":"80", "margin":"10px 0px 10px 0px", "text-align":"center", "color":"#44c21c", "font-size":"2rem"});
            $(".mytimecounter_clockdiv").css({"flex": 1, "position":"relative", "width":"100%", "min-width":"100%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"500", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
            $(".mytimecounter_clockdivdiv2").css({"min-width":"5%", "max-width":"5%", "width":"5%", "color":"blue", "text-align":"center", "font-family":"sans-serif", "font-weight":"500", "font-size":"3rem", "display":"flex", "align-items":"center", "justify-content":"center"});
            $(".mytimecounter_clockdivdiv").css({"max-width":"15%", "min-width":"10%", "padding":"1rem 0rem 1rem 0rem", "border-radius":"3px", "background":"transparent", "display":"flex", "justify-content":"space-around", "align-items":"center", "flex-direction":"column", "position":"relative"});
            $(".mytimecounter_clockspan").css({"margin":"0px", "padding":"15px 0px 15px 0px", "border-radius":"3px", "background":"transparent", "display":"inline-block"});
            $(".mytimecounter_clockspan2").css({"padding-left":"0.4rem", "padding-right":"0.4rem", "flex-direction":"column", "height":"1ch", "min-height":"1ch", "max-height":"1ch"});
            $(".mytimecounter_smalltext").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
            $(".mytimecounter_smalltext2").css({"font-size":"1.15rem", "display":"block", "height":"1ch", "min-height":"1ch", "padding-top":"0.25rem"});
            $(".mytimecounter_seconds").css("color", "red");
            /* we will use the id + child class selectors as it was in the original code although not really necessary ~ you could have just used the class selectors for this block code */
            mytimecounter_initializeClock("mytimecounter_clockdiv", mytimecounter_deadline);
            if ((Date.parse(mytimecounter_deadline) - Date.parse(new Date())) <= 0 && mytimecounter_fireworks) {
                mytimecounter_str = "";
                for (hnycount = 0; hnycount < mytimecounter_hny.length; ++hnycount) {
                    mytimecounter_str += mytimecounter_hny[hnycount] + ((hnycount != mytimecounter_hny.length-1) ? \'<span class="mytimecounter_midspan"></span>\' : "");
                }
                $(".mytimecounter_parent").css({"overflow-y":"clip", "display":"flex", "justify-content":"center", "width":"100%", "background-color":"#000000", "background-image":"url(\'" + mytimecounter_fireworksgif + "\')", "background-repeat":"no-repeat", "background-size":"cover"});
                $(".mytimecounter_container").css({"min-width":"100%", "width":"100%", "height":"auto", "overflow":"hidden", "display":"flex", "flex-direction":"column", "justify-content":"center", "box-sizing":"content-box"});
                $(".mytimecounter_clockdiv").html(\'<div class="mytimecounter_clockdivdiv"><span>\' + mytimecounter_str + \'</span></div>\');
                $(".mytimecounter_clockdiv").css({"flex": 1, "padding":"2rem 0rem 2rem 0rem", "font-family":"Snell Roundhand, cursive", "text-transform":"uppercase"});
                $(".mytimecounter_clockdiv span").css({"color":"#D7B030", "text-shadow":"#FC0 1px 0 10px"});
                $(".mytimecounter_midspan").css({"padding":"1rem 0.5rem 0rem 0.5rem"});
            }
            var mobileBlockCheck = ("ontouchstart" in document.documentElement && /mobi/i.test(navigator.userAgent));
            if (mobileBlockCheck) {
                var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
                var wratio = (120+w)* 0.00115;
                var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
                $(".mytimecounter_container").css("font-size", "small");
                $(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
                var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
                $(".mytimecounter_container").width(cw);
                $(".mytimecounter_container").height(ch);
                var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
                offset = Math.round((offset + Number.EPSILON) * 100) / 100;
                $("#blockclocktimer").css("padding", offset);
            }
            var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
            var wratio = (120+w)* 0.00115;
            var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
            $(".mytimecounter_container").css("font-size", "small");
            $(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
            $(".mytimecounter_container").width(w);
            $(".mytimecounter_container").height(h);
            var offset = -1 * ($(".mytimecounter_parent").width() - ($(".mytimecounter_parent").width() * wadjust)) / 2;
            offset = Math.round((offset + Number.EPSILON));
            $("#blockclocktimer").css("padding", offset);
            $(window).resize(function() {
                var h = $("#blockclocktimer").height(), w = $("#blockclocktimer").width();
                var wratio = (120+w)* 0.00115;
                var wadjust = w < 1920 && wratio  > 0 && wratio < 1 ? wratio : "1.0";
                $(".mytimecounter_container").css("font-size", "small");
                $(".mytimecounter_container").css("transform", "scale(" + wadjust + ")");
                var cw = $("#blockclocktimer").width(), ch = $("#blockclocktimer").height();
                $(".mytimecounter_container").width(cw);
                $(".mytimecounter_container").height(ch);
                var offset = -1 * ($(".mytimecounter_parent").width() -($(".mytimecounter_parent").width() * wadjust)) / 2;
                offset = Math.round((offset + Number.EPSILON) * 100) / 100;
                $("#blockclocktimer").css("padding", offset);
            });
        }
    });
</script>';
I have kept the code on Hobby for the new year as I will change it again for quizland in December