Quantcast
Channel: BulletProof Security Forum » All Posts
Viewing all articles
Browse latest Browse all 12479

Javascript Countdown Timer, PHP Countdown Timer, Countdown to Date

$
0
0

This javascript and PHP Countdown Timer script works by subtracting the difference of the UNIX timestamp of a future date/time to the UNIX timestamp of the current date/time.  The UNIX timestamp for the futureTime javascript var is generated/created in PHP using user input in a Form text box and uses this math for the variable:  Example for 1 hour in the future: $future_time = time() + (60 * 60);  60 minutes times 60 seconds = 1 hour in the future in UNIX time.

var currentTime = new Date().getTime() / 1000;

var futureTime = <?php echo $future_time; ?>;

var timeRemaining = futureTime - currentTime;

Screenshots of javascript/php Countdown Timer | Other Examples: Maintenance Mode Guide
Maintenance Mode CSS Moz Box Maintenance Mode Embed YouTube Video

To get all the “moving parts” (both PHP and javascript code) and the code nicely formatted download the BPS WordPress plugin from WordPress.org here (pending BPS .49.9 version release):  http://wordpress.org/plugins/bulletproof-security/ and unzip it on your computer.  These files below comprise all of the essential “moving parts” involved in creating and generating the php/javascript countdown timer.

The PHP Form code is in this php file:  bulletproof-security/admin/maintenance/maintenance.php
The PHP variable values (UNIX future date timestamp) that are called using an include are in this php file:  bulletproof-security/admin/htaccess/bps-maintenance-values.php
The javascript countdown timer code (shown below) is in this php file:  bulletproof-security/admin/htaccess/bps-maintenance.php

IMPORTANT NOTE:  Your HTML element in your template/page/file <p id="bpscountdowntimer"></p> is where the javascript Countdown Timer is displayed/outputted.

<script type="text/javascript">
/***********************************************************************************************************/
/* Feel free to use this Countdown Timer code.                                                             */
/* Please leave this Kudos here if you use this code.                                                      */
/* Kudos: Ed @ AIT-pro.com                                                                                 */
/* http://forum.ait-pro.com/forums/topic/javascript-countdown-timer-php-countdown-timer-countdown-to-date/ */
/***********************************************************************************************************/
/* <![CDATA[ */
var MMode = setInterval(function(){ MModeTimer() }, 1000);

function MModeTimer() {

var currentTime = new Date().getTime() / 1000;
var futureTime = <?php echo $future_time; ?>;
var timeRemaining = futureTime - currentTime;
var minute = 60;
var hour = 60 * 60;
var day = 60 * 60 * 24;
var dayFloor = Math.floor(timeRemaining / day);
var hourFloor = Math.floor((timeRemaining - dayFloor * day) / hour);
var minuteFloor = Math.floor((timeRemaining - dayFloor * day - hourFloor * hour) / minute);
var secondFloor = Math.floor((timeRemaining - dayFloor * day - hourFloor * hour - minuteFloor * minute));
var countdownCompleted = "";

if (secondFloor <= 0 && minuteFloor <= 0) {
clearInterval(MModeTimer);
document.getElementById("bpscountdowntimer").innerHTML = countdownCompleted;

} else {

if (futureTime > currentTime) {
document.getElementById("bpscountdowntimer").innerHTML = dayFloor + " Days " + hourFloor + " Hours " + minuteFloor + " Minutes " + secondFloor + " Seconds ";
}
}
}
/* ]]> */
</script>

Viewing all articles
Browse latest Browse all 12479

Trending Articles