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

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.