js file :

function countdown(endT,callback) {

        var days,hours,minutes,sec,timer;

        end = new Date(endT);

        end = end.getTime(); //Get initial Date in Milliseconds,

        if (isNaN(end)) {

           alert('@ countdown.js @  "Invalid Date", valid format- mm/dd/yyyy hh:mm:ss TT ');

           return;

        }

        timer = setInterval(calculate,1000);//Timer to calculate remaining time

        function calculate(){

         var current = new Date();

         var remaining = parseInt((end - current.getTime())/1000);//remaining seconds, 

            if (remaining <= 0){

                clearInterval(timer);

                days=0;

                hours=0;

                minutes=0;

                sec=0;

                display(days,hours,minutes,sec);

                if (typeof callback === 'function' ) {

                    callback();

                }

            }else{

                days = parseInt(remaining/86400);

                remaining = (remaining%86400);

                hours = parseInt(remaining/3600);

                remaining = (remaining%3600);

                minutes = parseInt(remaining/60);

                remaining = (remaining%60);

                sec = parseInt(remaining);

                display(days,hours,minutes,sec);

            }

        }

        //Function For displaying Results in HTML page with specific ID's 

        function display(days,hours,minutes,sec) {

            var dl = days.toString().length;

            if (dl == "1") {

                sl = 2;

            }else{

                if (isNaN(dl)) {

                    sl = 3;

                }

                sl = dl;

            }

            document.getElementById("days").innerHTML = ("00"+days).slice(-sl);

            document.getElementById("hours").innerHTML = ("0"+hours).slice(-2);

            document.getElementById("minutes").innerHTML = ("0"+minutes).slice(-2);

            document.getElementById("seconds").innerHTML = ("0"+sec).slice(-2);

        }

    }

index.php :

<script src="countdown.js"></script> 

<script>

countdown('08/26/2016 09:07:13 PM',callback); // Date format ('MM/DD/YYYY  HH:MM:SS TT');find me!!!! */
  };
</script>

<div class="countDown">
           <span id="days">00</span>     <!-- Remaining Days,id="days"-->
           <span id="hours">00</span>    <!-- Remaining hours ,id="hours"-->
           <span id="minutes">00</span>  <!-- Remaining minutes,id="minutes"-->
           <span id="seconds">00</span>  <!-- Remaining secounds,id="secounds"-->

</div>

<Style>
.countDown{
                display: inline-block;
                margin: auto;
            }

            .countDown span{
                display: block;
                background: #000;
                color: #fff;
                height: 54px;
                float: left;
                margin-right: 5px;
                padding: 8px;
                border-radius: 5px;
                font-size: 45px;
                line-height:normal;
                text-align: center;
                box-shadow: 2px 2px 8px #747474;
                background-image: ./images/clock_bag.PNG;     /*If You want image background*/
                background-size: contain;                     /*If You want image background*/
                background-repeat: repeat-x;                  /*If You want image background*/
            }

            #days:after,#hours:after,#minutes:after,#seconds:after{

                font-size: 14px;
                line-height:normal;
                display: block;
                width: inherit;
                margin-top: 10px;
                color: #5C5757;
                text-align: center;
            }
            #days:after{
                content: "Days";
            }
            #minutes:after{
                content: "Minutes";
            }
            #hours:after{
                content: "Hours";
            }
            #seconds:after{
                content: "Seconds";
            }
            </style>

basically what im trying to do is the last hour change the background-image: ./images/clock_bag.PNG; so it will be a red image
Any help would be appreciated
Thank you .

Recommended Answers

Hello Tko,

when you call countdown('08/26/2016 09:07:13 PM', callback);, 'callback' is not defined.

I made an fiddle if an example based on your code, except the css.

I think it's what you want:

Jump to Post

All 4 Replies

Hello Tko,

when you call countdown('08/26/2016 09:07:13 PM', callback);, 'callback' is not defined.

I made an fiddle if an example based on your code, except the css.

I think it's what you want: https://jsfiddle.net/alemonteiro/s0wwkLfp/1/

Yes !!
that worked great thank you so much AleMonteiro

AleMonteiro as i really do appreciate your reply i did notice that with my code when i update the day/time a simple reload of the page will reset the time/day as with yours i need to refresh the page (f5) for it to reset the time/day. Is there a way i could get it to reset on reload of page, again Thank you so much for your time

Sorry for the late response... but to keep the data on page reload you'd have to use cookies to store it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.