0

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 .

2
Contributors
4
Replies
37
Views
1 Year
Discussion Span
Last Post by AleMonteiro
0

Yes !!
that worked great thank you so much AleMonteiro

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.