i have this in php file
<body>
<span id="time"></span>
</body>
<?php $var0 = 1; ?>
and this in javascript
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
if(minutes <= 0){
display.textContent = seconds + "s";
}else{
display.textContent = minutes + "m " + seconds + "s";
}
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * <?php echo $var0; ?>,
display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};
it works perfectly but i need to display this in a loop for example i have 2 variables and i want to display two times with new line .. or when i have n variables i got n new line with the time of the variables that will hold the information from database.. thank you
Here's 5 spans updated on the fly...
<html>
<head>
<title>Multiple Spans</title>
<script type="text/javascript">
var items = 5;
function addSpans() {
var element = document.getElementById("container");
for (var i = 1; i < items; i++)
{
var div = document.createElement('div');
var para = document.createElement('span');
para.id = 'span' + i;
div.appendChild(para);
element.appendChild(div);
}
}
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
var displayElement = document.getElementById("span" + display);
if(minutes <= 0){
displayElement.textContent = seconds + "s";
}
else {
displayElement.textContent = minutes + "m " + seconds + "s";
}
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
addSpans();
var fiveMinutes = 60;
for (var i = 1; i < items; i++) {
startTimer(fiveMinutes, i);
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
finally I solved the problem and I used this code I integrated with the table with here I can develop further
<table width="100%" cellspacing="0">
<tr>
<th class="topLine">Item(poza)</th>
<th class="topLine">Owner</th>
<th class="topLine">Ultimu Licitator</th>
<th class="topLine">Pret</th>
<th class="topLine">Timp</th>
<th class="topLine"> </th>
</tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<?php
$i =0;
foreach($auctions_inf as $auctions_information){
$test = $auctions_information['date_expired'];
if($i%2==0)
{$class= "thell-a";}
else{$class="tdunkel-a";}
?>
<tr class="thedata ">
<td class="<?php echo $class; ?>">Poza mea</td>
<td class="<?php echo $class; ?>">Zorke</td>
<td class="<?php echo $class; ?>">Tot el</td>
<td class="<?php echo $class; ?>">1200 yang</td>
<td class="<?php echo $class; ?>">
<span id="countdown<?php echo $i;?>" class="timer"></span><br>
<script>
var countDownDate<?php echo $i;?> = new Date("<?php echo $test;?>").getTime();
var x<?php echo $i;?> = setInterval(function() {
var now = new Date().getTime();
var distance<?php echo $i;?> = countDownDate<?php echo $i;?> - now;
var hours = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance<?php echo $i;?> % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance<?php echo $i;?> % (1000 * 60)) / 1000);
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
document.getElementById('countdown<?php echo $i;?>').innerHTML = hours +"h "+ minutes + "m " + seconds + "s ";
if (distance<?php echo $i;?> < 0){
clearInterval(x<?php echo $i;?>);
document.getElementById('countdown<?php echo $i;?>').innerHTML = "Expirat";
}
}, 1000);
</script>
</td>
<td class="<?php echo $class; ?>"> <button> Licitează </button></td>
</tr>
<?php
$i++;
}
?>
</table>
Related
I have 2 coupons showing, they both have the .new-coupon when in fact one should say .new-coupon and one should say .old-coupon. It seems to apply the same class for every element on the page with that class instead of calculating which class it should be for each element.
jQuery(document).ready(function($) {
// Set the date we're counting down to
var deadlineYear = $("#clockdiv .year").attr("rel");
var deadlineMonth = $("#clockdiv .month").attr("rel");
var deadlineDay = $("#clockdiv .days").attr("rel");
var deadlineHour = $("#clockdiv .hours").attr("rel");
var deadlineMinute = $("#clockdiv .minutes").attr("rel");
var deadlineSecond = $("#clockdiv .seconds").attr("rel");
var couponExpired = $("#clockdiv").attr("rel");
var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML= seconds;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
}
var startDate = $("#clockdiv .start").attr("rel"); //2018/09/28 17:00:00
var startDateNew = new Date(startDate);
var newOldDate = new Date(startDateNew.setDate(startDateNew.getDate() + 7));
var nowDateNew = new Date(now);
if (days <= 7) {
$('.couponDiv').addClass("old-coupon");
} else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
$('.couponDiv').addClass("new-coupon");
}
}, 1000);
});
HTML used for variables:
<div id="clockdiv" rel="'.$expired.'">
<span class="start" rel="'.$start.'"></span>
<span class="year" rel="'.$year.'"></span>
<span class="month" rel="'.$month.'"></span>
<div><span id="days" class="days" rel="'.$day.'"></span><div class="smalltext">Days</div></div>
<div><span id="hours" class="hours" rel="'.$hour.'"></span><div class="smalltext">Hours</div></div>
<div><span id="minutes" class="minutes" rel="'.$minute.'"></span><div class="smalltext">Minutes</div></div>
<div><span id="seconds" class="seconds" rel="'.$second.'"></span><div class="smalltext">Seconds</div></div>
</div>
HTML used for displaying the coupons on the offers page:
<li>
<?php
$year = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('Y');
$month = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('m');
$day = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('d');
$hour = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('H');
$minute = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('i');
$second = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('s');
$humanDate = DateTime::createFromFormat('Y-m-d H:i:s', get_field('offer_voucher_deadline'))->format('D jS M Y');
$expiredText = get_field('offer_voucher_expired');
?>
<div style="display:none;">
<?php echo do_shortcode('[gw-countdown expired="'.$expiredText.'" year="'.$year.'" month="'.$month.'" day="'.$day.'" hour="'.$hour.'" minute="'.$minute.'" second="'.$second.'" start="'.get_field('offer_voucher_start').'"]');?>
</div>
<div id="couponDiv" class="couponDiv">
<h1><?php the_title();?></h1>
<div class="couponDetails">
<div class="couponView">
<?php $offer = get_field('offer_single_label', 'options'); $offerC = ucwords($offer);?>
<a class="button" href="<?php the_permalink();?>" title="See Offer Details">See <?php echo $offerC;?> Details</a>
</div>
<div class="couponValid">
<p class="bold">Valid Until:</p>
<p class="couponDate"><?php echo $humanDate;?></p>
</div>
</div>
</div>
</li>
Edit
I understand completely where the issue lies, and have updated the code to the following:
$('.couponDiv').each(function() {
var startDate = $("#clockdiv .start").attr("rel"); //2018/09/28 17:00:00
var startDateNew = new Date(startDate);
var newOldDate = new Date(startDateNew.setDate(startDateNew.getDate() + 7));
var nowDateNew = new Date(now);
if (days <= 7) {
$(this).addClass("old-coupon");
} else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
$(this).addClass("new-coupon");
}
});
However, I do not know how to make:
var startDate = $("#clockdiv .start").attr("rel");
Apply to $this so its $this #clockdiv .start because then it will work I believe...
Edit
I have altered a line of code to read:
var startDate = $(this).find("#clockdiv .start").attr("rel");
This now only adds the class to the first offer and not the 2nd offer, I then tried repeating the:
$(this).find()
Around the initial variables and then moved the:
$('.couponDiv').each(function() {
To the top below the document ready function however, this stopped any class being added.
if (days <= 7) {
$('.couponDiv').addClass("old-coupon");
} else if ((nowDateNew.getTime() - newOldDate.getTime()) < 0) {
$('.couponDiv').addClass("new-coupon");
}
In your codes above, you had selected all of .couponDiv to add class old-coupon and once again you select all of .couponDiv to add class new-coupon. The conditions have no meaning here because with any matching you still add class for all elements.
You must separate which elements are belong to "old" and with elements are belong to "new". Then add the respectively class name.
Is this what you need?
var startDate = $(this).find("#clockdiv .start").attr("rel"); //2018/09/28 17:00:00
After some reconstructing and work with $this I was able to get this working:
$('.couponWrap .coupons li').each(function() {
// Set the date we're counting down to
var deadlineYear = $(this).find("div .clockdiv .year").attr("rel");
var deadlineMonth = $(this).find("div .clockdiv .month").attr("rel");
var deadlineDay = $(this).find("div .clockdiv .days").attr("rel");
var deadlineHour = $(this).find("div .clockdiv .hours").attr("rel");
var deadlineMinute = $(this).find("div .clockdiv .minutes").attr("rel");
var deadlineSecond = $(this).find("div .clockdiv .seconds").attr("rel");
var couponExpired = $(this).find("div .clockdiv").attr("rel");
var countDownDate = new Date(deadlineYear + "/" + deadlineMonth + "/" + deadlineDay + " " + deadlineHour + ":" + deadlineMinute + ":" + deadlineSecond).getTime();
var startDate = new Date($(this).find("div .clockdiv .start").attr("rel"));
var self = $(this);
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML= seconds;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("clockdiv").innerHTML = "<p>" + couponExpired + "</p>";
}
//Works but only for 1st start date
//var testDate = $("div .clockdiv .start").attr("rel"); //2018/09/28 17:00:00
var startDateNew = new Date(startDate);
var startDateNewer = new Date(startDate);
var newOldDate = new Date(startDateNewer.setDate(startDateNew.getDate() + 7));
//alert(startDate + ", " + startDateNew + ", " + startDateNewer + ", " + newOldDate);
//This works fine
var nowDateNew = new Date().getTime();
//alert(nowDateNew - newOldDate.getTime());
if (days <= 7) {
self.find('div.couponDiv').addClass("old-coupon");
} else if ((nowDateNew - newOldDate.getTime()) < 0) {
self.find('div.couponDiv').addClass("new-coupon");
}
}, 1000);
});
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<div id='showDate'></div>
Hope so you all will be fine.
Come to the Point, I want to reset the count down that i created using jquery after every 90 hours.
I had written below code yet.
It does not reset after 90 hours means after 3 days and 18 hours.
Kindly Help me.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>
You can try something like following :
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 00; var hours = 00; var minutes = 1; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
if(days == 0 && hours ==00 && minutes == 0 && seconds == 00)
{
minutes = 1;
}
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
}
calculate();
});
</script>
<div id='showDate'></div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
var days = 03; var hours = 18; var minutes = 00; var seconds = 00;
function calculate()
{
setTimeout(calculate, 1000); $('#showDate').html(days + ':' + hours + ':' + minutes + ':' + seconds);
seconds--;
if (seconds < 0) { seconds = 59; minutes--;
if (minutes < 0) { hours--; minutes = 59;
if (hours < 0) { days--; hours = 23;
if (days < 0) { days = 0; hours = 0; minutes = 0; seconds = 0;
}}}}
if((seconds == 0) && (minutes == 0) && (hours == 0) && (days == 0))
{
days = 03;
hours = 18;
minutes = 00;
seconds = 20;
}
}
calculate();
});
</script>
<div id='showDate'></div>
I want to add 5 minute countdown timer which submit a form to my php page.
<form name="myfm" id="myfm" method="post" action="Quiz.php">
<table width=100%> <tr> <td width=30><td></td></td></tr> <table border=0>
<?php $n=$n+1; ?>
<tr><td>Question <?php echo $n." "; echo $row[2]; ?></td></tr>
<tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]" value=1><?php echo $row[3]; ?></td></tr>
<tr><td class=style8> <input type="radio" name="ques['<?php echo $n; ?>'][]" value=2><?php echo $row[4];?></td></tr>
<tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]" value=3><?php echo $row[5];?></td></tr>
<tr><td class=style8><input type="radio" name="ques['<?php echo $n; ?>'][]" value=4><?php echo $row[6];?></td></tr>
<?php
}
echo "<tr><td><input type=submit name=submit id='result' value='Get Result'></form>";
?>
</table></table>
</form>
Please help me..I am doing a quiz page that automatically submit form when countdown ends.Thankyou...
Here is what you want, I used a while ago -
https://jsfiddle.net/v5uc9wfx/3/
function CountDown(duration, display) {
if (!isNaN(duration)) {
var timer = duration, minutes, seconds;
var interVal = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
if (--timer < 0) {
timer = duration;
SubmitFunction();
$(display).empty();
clearInterval(interVal)
}
}, 1000);
}
}
Here -
CountDown(duration, display)
Duration is passed in seconds, i.e. 300 second= 5 Minutes. display is another parameter you want to display where.
You might need to clear interval as well-
clearInterval(interVal)
With form
function CountDown(duration, display) {
if (!isNaN(duration)) {
var timer = duration, minutes, seconds;
var interVal= setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
$(display).html("<b>" + minutes + "m : " + seconds + "s" + "</b>");
if (--timer < 0) {
timer = duration;
SubmitFunction();
$('#display').empty();
clearInterval(interVal)
}
},1000);
}
}
function SubmitFunction(){
$('form').submit();
}
CountDown(300,$('#display'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display">
</div>
<form action="/" >
<lable>Name: <input type="text"></lable>
</form>
/*timer*/
var seconds = 300;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60),
remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(countdownTimer);
//form1 is your form name
document.form1.submit();
} else {
seconds--;
}
}
var countdownTimer = setInterval('secondPassed()', 1000);
.timer {
width: 100px;
font-size: 2.5em;
text-align: center;
}
<div class="timer">
<time id="countdown">5:00</time>
</div>
<form action="index.php" name="form1" id="form1">
you can use Window setTimeout() Method to call submit form after 5 minutes
setTimeout(function submitform()
{
document.myform.submit();
}, 60*1000*5);
setTimeout() will fire a function SubmitForm after 300000 milliseconds = 5 minutes.
function SubmitForm(){
$("form").submit();
};
setTimeout(SubmitForm,300000);//5*60*1000
Hope this helps
var trig = setInterval(timer,1000);
var counter=0;
var min=4;
var sec=60;
function timer(){
sec=--sec;
if(sec===0){
min=--min;
sec=59;
counter=++counter;
}
if(counter===5){
sec=0;
min=0;
clearInterval(trig);
functionSubmit();
document.write("Submitted");
}
document.getElementById("output").innerHTML = min+" : "+sec;
}
<p>Autosubmit in <span id="output"></span></p>
Well, I'm making a game, and in my game I have a countdown script in javascript that receives the date when the building upgrade is over, and makes a countdown, and when the countdown ends, executes a script that upgrades the building to the next level.
But just works in google chrome, and in the other browsers appears like that:
Firefox:
Google Chrome
Just the Javascript:
date_default_timezone_set('europe/lisbon');
$datephp = date('Y-m-d H:i:s');
echo'
<script type="text/javascript">
function cdtd() {
var xmas = new Date("' . $factory_date . '");
var now = new Date();
var timeDiff = xmas.getTime() - now.getTime();
if (timeDiff <= 0) {
clearTimeout(timer);
$("#factory_upgrade").load("/include/factory_upgraded.php");
$("#quantidade_fabricas").load("/include/factory_stats.php");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;' .
"var tempo=('0' + hours).slice(-2)+':'+('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2);"
.
'
document.getElementById("secsBox").innerHTML = tempo;
var timer = setTimeout("cdtd()",1000);
}
</script>
';
Complete function:
function factory_update($get){
$userid = $_SESSION['userid'];
$query00 = "SELECT * FROM factory_upgrading WHERE userid = '$userid'";
$result00 = mysql_query($query00) or die(mysql_error());
while($row00 = mysql_fetch_array($result00)){
$factory_upgrade = $row00['userid'];
}
if(!isset($factory_upgrade)){
echo "Sem melhoramentos.";
return 0;
}
$query01 = "SELECT * FROM factory_upgrading WHERE userid = '$userid'";
$result01 = mysql_query($query01) or die(mysql_error());
while($row01 = mysql_fetch_array($result01)){
$factory_level = $row01['new_level'];
$factory_date = $row01['upgraded'];
}
if ($get == "load")
{
echo '<div class="message_upgrades" ">';
echo '<div class="loading"><img src="/images/loading.gif"></img></div>';
echo '</div>';}
else
{
date_default_timezone_set('europe/lisbon');
$datephp = date('Y-m-d H:i:s');
echo'
<script type="text/javascript">
function cdtd() {
var xmas = new Date("' . $factory_date . '");
var now = new Date();
var timeDiff = xmas.getTime() - now.getTime();
if (timeDiff <= 0) {
clearTimeout(timer);
$("#factory_upgrade").load("/include/factory_upgraded.php");
$("#quantidade_fabricas").load("/include/factory_stats.php");
}
var seconds = Math.floor(timeDiff / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours %= 24;
minutes %= 60;
seconds %= 60;' .
"var tempo=('0' + hours).slice(-2)+':'+('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2);"
.
'
document.getElementById("secsBox").innerHTML = tempo;
var timer = setTimeout("cdtd()",1000);
}
</script>
';
echo '<div class="success_upgrades">';
echo '<div class="upgrade_text"><b>Nivel: </b>' . $factory_level . '</div><div class="div_separator"></div><div class="upgrade_text"><b>Duração:</b>
<div class="secsBox" id="secsBox"></div>
<script type="text/javascript">cdtd();</script></div><div class="div_separator"></div>
';
echo '<div id="close" class="stop_upgrade" ></img></div>';
echo '</div>';
echo '<script>
$(".stop_upgrade").click(function (e) {
e.preventDefault();
$(factory_upgrade2).empty();
setTimeout(function(){
$("#factory_upgrade2").load("/include/upgrade_cancel.php");
$("#factory_upgrade").load("/include/factory_update.php");
$("#load").load("/include/cabecalho_content.php");
$("#industrial").fadeIn();
$(loader1).delay(1000).hide(0);
}, 100);
});
</script>
';
}
}
The format of $factory_date is invalid according to standard JavaScript and Chrome happens to be able to parse it.
For better results, stick to these Date constructors:
new Date();
new Date(value);
new Date(dateString);
new Date(year, month [, day, hour, minute, second, millisecond]);
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
I have this code for a countdown timer. its basically a combination of PHP/Javascript countdown timer which will gets the $end_date from a Mysql table/field.
The problem is that it will stop automatically (which is unwanted) at a certain time.
For example: I set the $end_date to September 19 2013 11:30:00 AM GMT in mysql database.
the countdown starts and works fine and starts counting down as it should. However, when the countdown timer reaches September 19 2013 13:00:00 PM GMT it will stop and it will show the Times Up message! Basically it will stop working or counting down once the $end_date has been changed to 13:00:00 PM.
I cannot see anything in my code that will cause this issue. apart from this line:
if ($now < $exp_date ) {
?>
but again, this line only tells the script when to start counting and as far i can see it shouldn't stop the countdown timer to stop as long as the timer has not reached the $end_date. or am I missing something?
here is my code:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
?>
<?php date_default_timezone_set('GMT'); ?>
<?php
session_start();
// Run a select query to get my letest 6 items
// Connect to the MySQL database
include "config/connect.php";
$dynamicList = "";
$sql = "SELECT * FROM item ORDER BY id";
$query = mysqli_query($db_conx, $sql);
$productCount = mysqli_num_rows($query); // count the output amount
if ($productCount > 0) {
while($row = mysqli_fetch_array($query, MYSQLI_ASSOC)){
$id = $row["id"];
$product_name = $row["product_name"];
$date_added = date("Y-m-d", strtotime($row["date_added"]));
$end_date = date("F d Y H:i:s A T", strtotime($row["end_date"]));
$price = $row["price"];
$dynamicList .= '<div>' . $end_date . '
</div>';
}
} else {
$dynamicList = "No Records";
}
?>
<?php
$date = $end_date;
$exp_date = strtotime($date);
$now = time();
if ($now < $exp_date ) {
?>
<script>
// Count down milliseconds = server_end - server_now = client_end - client_now
var server_end = <?php echo $exp_date; ?> * 1000;
var server_now = <?php echo time(); ?> * 1000;
var client_now = new Date().getTime();
var end = server_end - server_now + client_now; // this is the real end time
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour *24
var timer;
function showRemaining()
{
var now = new Date();
var distance = end - now;
if (distance < 0 ) {
clearInterval( timer );
document.getElementById('countdown').innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor( (distance % _day ) / _hour );
var minutes = Math.floor( (distance % _hour) / _minute );
var seconds = Math.floor( (distance % _minute) / _second );
var countdown = document.getElementById('countdown');
countdown.innerHTML = '';
if (days) {
countdown.innerHTML += 'Days: ' + days + '<br />';
}
countdown.innerHTML += 'Hours: ' + hours+ '<br />';
countdown.innerHTML += 'Minutes: ' + minutes+ '<br />';
countdown.innerHTML += 'Seconds: ' + seconds+ '<br />';
}
timer = setInterval(showRemaining, 1000);
</script>
<?php
} else {
echo "Times Up";
}
?>
<div id="countdown"></div>
any help would be greatly appreciated.
13:00:00 PM is not a valid time. AM and PM are used to indicate which side of the 12-hour cycle the time is. You cannot logically say you're on the 13th hour of the 12 hour side of the clock.
EDIT: For clarity: 13:00 == 1 PM, 13:00 PM == nothing.