I get the GMT time in PHP and I would like to make it count, like the clocks.
<?php $time = gmdate('H:i:s'); ?>
<script>var time = <?php echo($time) ?>;
setInterval(function() {
time += 1;
$("#timediv").text("Current time (GMT): " + time);
//somehow convert it to 11:44:31 AM ??
}, 1000);
</script>
Can seomeon help me?
First of all, relying on setTimeout/setInterval accuracy for displaying time is not a good idea. There are multiple reasons for them not being that accurate, like CPU slowdowns. That's why you should rather use Date object, which uses actual clock.
This is what I do when I want to use my server's time on the client side:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- dateFormat plugin for nice and easy time formatting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-dateFormat/1.0/jquery.dateFormat.min.js"></script>
<script>
var clientTime = (new Date()).getTime(),
serverTime = <?php echo time() ?> * 1000,
difference = clientTime - serverTime;
setInterval(function () {
var now = new Date();
now.setTime(now.getTime() - difference);
$("#timediv").text("Current time (GMT): " + $.format.date(now, "hh:mm:ss a"));
}, 1000);
</script>
The key concept behind it is to calculate the difference between server time and client time. Then, you normalize your client side (created each time with new Date()) with the difference. We are still using setInterval, but even if it's delayed or accelerated for some reason, the time displayed is still correct.
I would not follow motanelu's answer but change it to this:
<script>var time = Date.parse('<?php echo($time) ?>');
setInterval(function() {
time.setSeconds(time.getSeconds() + 1);
$("#timediv").text("Current time (GMT): " + time);
//somehow convert it to 11:44:31 AM ??
}, 1000);
</script>
This creates a Date object which can you can format with for example time.toLocaleTimeString();
Replace
<?php $time = gmdate('H:i:s'); ?>
with
<?php $time = gmdate('h:i:s A'); ?>
Thank you guys, I made it:
PHP:
$time = gmdate('H:i:s');
$time = preg_replace("/^([\d]{1,2})\:([\d]{2})$/", "00:$1:$2", $time);
sscanf($time, "%d:%d:%d", $hours, $minutes, $seconds);
$timeInSeconds = $hours * 3600 + $minutes * 60 + $seconds;
Javascript:
<script>
function fromSeconds(sec){
var d=new Date(0,0,0);
d.setSeconds(+sec);
return (d.getHours() ? d.getHours()+":" : "")+d.getMinutes()+":"+d.getSeconds();
}
var time = <?php echo($timeInSeconds) ?>;
var newTime = 0;
setInterval(function() {
time += 1;
var newTime = fromSeconds(time);
$("#timediv").text("The current GMT time is: " + newTime);
}, 1000);');
?>
</script>
Related
I am developing an online examination system in PHP and MySQL. Each exam has got its own period which is stored in the database, and the system shows one question at a time. When the submit button is pressed, it submits the question then displays the next one.
I tried to use the below code for the timer, and it appears for the student but once the first question is submitted and the second one appears the timer starts from the beginning again. For example, if the time was twenty minutes, it starts again from twenty minutes when the second question appears.
This is the code that I used:
<html>
<head></head>
<body>
<?php
$db = mysql_connect("localhost", "root", "");
mysql_select_db("exam", $db);
$result = mysql_query("SELECT * FROM test");
while($row = mysql_fetch_array($result)) {
$min = $row['minutes'];
}
?>
<div id="quiz-time-left"></div>
<script type="text/javascript">
var min = '<?php echo $min;?>';
var total_seconds = 60 * min;
var c_minutes = parseInt(total_seconds / 60);
var c_seconds = parseInt(total_seconds % 60);
function CheckTime() {
document.getElementById("quiz-time-left").innerHTML = 'Time Left: ' + c_minutes + 'minutes' + c_seconds + 'seconds';
if (total_seconds <= 0) {
setTimeout('document.quiz.submit()', 1);
} else {
total_seconds = total_seconds - 1;
c_minutes = parseInt(total_seconds / 60);
c_seconds = parseInt(total_seconds % 60);
setTimeout("CheckTime()", 1000);
}
}
setTimeout("CheckTime()", 1000);
</script>
<form name=quiz method="post" action="process.php"></form>
I want to echo the time of the server, or the time in Europe/London or Europe/Lisbon.
This is my code but for some reason it's displaying the time on the system or something. I mean, in my PC I see the correct time but in a tablet which is an hour late it shows the time of the tablet o.O
here's the code:
<?php
$date = new DateTime("now", new DateTimeZone('Europe/Lisbon') );
$today = getdate($date); ?>
<script>
var d = new Date(Date.UTC(<?php /*echo $today['year'].",".$today['mon'].",".$today['mday'].",".$today['hours'].",".$today['minutes'].",".$today['seconds'];*/ echo $date->format('Y,m,d,H,i,s'); ?>));
setInterval(function() {
d.setSeconds(d.getSeconds() + 1);
$('#timer').text((d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() ));
}, 1000);
</script>
<p><div id="timer"></div></p>
You can do it using JavaScript
Example:
setInterval(function() {
var date = new Date();
var H = date.getHours();
var M = date.getMinutes();
var S = date.getSeconds();
$('#timer').text(H+':'+M+':'+S);
},1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="timer"></div>
<?php
$date = new DateTime("now", new DateTimeZone('Europe/Lisbon');
$today = $date->format('Y-m-d H:i:s');
?>
<div id="timer"></div>
<script>
var d = new Date('<?php echo $today ?>');
setInterval(function() {
d.setSeconds(d.getSeconds() + 1);
document.getElementById('timer').innerHTML=(d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() );
}, 1000);
</script>
I am currently stuck on a problem and not sure how to solve it. I am new to php and javascript coding so do please correct me if there is an easier way to do this.
My problem is that I am trying to get a countdown timer working for multiple data in mysql database. I have already made a successful countdown time function that only works with one data using the if statement in php, but when I try to do it with multiple data using the while statement in php it doesn't work.here is my php code
//TODAY'S DATE
$today = time();
//FETCHES DATE AND TIME FOR THE EVENT FROM DATABASE
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
$title = $row['title'];
$cname = $row['cname'];
$team = $row['team'];
$description = $row['description'];
$endtime = $row['endtime'];
echo "<tr>";
echo "<td width='16%'><strong>Title:</strong></td>";
echo "<td width='16%'>$title</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Client name:</strong></td>";
echo "<td width='16%'>$cname</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Team:</strong></td>";
echo "<td width='16%'>$team</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Description:</strong></td>";
echo "<td width='16%'>$description</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>End time:</strong></td>";
echo "<td width='16%'>$endtime</td>";
echo "</tr><tr>";
echo"</BR>";
echo"</BR>";
}
$conn->close();
below is my javascript that suppose to run the count down
<script language="JavaScript">
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function pad(n) {
// utility function to pad a number to 2 digits:
return ('0' + n).substr(-2);
}
function timer() {
var todaySeconds = Math.floor(new Date().getTime() / 1000);
// collect the html first in an array
var html = [];
// keep track whether there are still counters not yet zero:
var allDone = true;
// go through the list of dates:
endDatesInSeconds.forEach(function (endDateSeconds) {
var totalSeconds = endDateSeconds - todaySeconds;
var days = Math.floor(totalSeconds/24/60/60);
var seconds = Math.floor(totalSeconds - days*86400);
var hours = Math.floor(seconds/3600);
seconds = Math.floor(seconds - hours*3600);
var minutes = Math.floor(seconds/60);
seconds = seconds % 60;
// add a part of html
html.push(
totalSeconds <= 0
? 'project time Completed'
: days + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds));
// when at least one counter is not complete, we are not done:
allDone = allDone && totalSeconds <= 0;
});
// now put the html in the document:
document.getElementById('countdown').innerHTML = html.join('<br/>');
if (allDone) {
clearInterval(countdownTimer);
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
the javascript run the countdown by getting it value from the php (var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';)
This question already has answers here:
javascript clock with server time [duplicate]
(4 answers)
Closed 8 years ago.
I struggling with server time. I need timer on my website (count every second) but not client side time but server. But my script operating only with client time:
<script>
setInterval(function() {
var d = new Date();
$('#timer').text((d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() ));
}, 1000);
</script>
<label id="timer"></label>
Script above work fine.
How I can integrate server time and update very one second?
Get the date from the server, convert it to a javascript date, then increment it yourself.
<?php $today = getdate(); ?>
<script>
var d = new Date(Date.UTC(<?php echo $today['year'].",".$today['mon'].",".$today['mday'].",".$today['hours'].",".$today['minutes'].",".$today['seconds']; ?>));
setInterval(function() {
d.setSeconds(d.getSeconds() + 1);
$('#timer').text((d.getHours() +':' + d.getMinutes() + ':' + d.getSeconds() ));
}, 1000);
</script>
<label id="timer"></label>
EDIT: JSFiddle with example PHP echoed in.
I worked on a code for count down using the server time . You can use something similar to this for your code
<?php
$now = date('d-m-Y');
$end= "01-01-2013"
$date = strtotime($end) - strtotime($now);
$days = date('d', $date);
$monthes= date('m', $date);
$years= date('Y', $date);
?>
<script>
var days = "<?= $days ?>";
var monthes= "<?= $monthes?>";
var years= "<?= $years?>";
document.getElementById('countdown').innerHTML = days+ ' days';
document.getElementById('countdown').innerHTML += monthes+ ' monthes';
document.getElementById('countdown').innerHTML += years+ ' years';
</script>
I have a container div which loops through items in a PHP array to generate repeating element divs all with a unique ID.
I am using a countdown plugin (http://keith-wood.name/countdown.html) to apply to a date on each element and it worked out in PHP.
This all works fine until I load more elements into the page using AJAX /PHP. The countdown isn't applied to the new items and I am struggling to figure out how I would do this.
echo "<div class=\"item\" id=\"item_$id\">
<h4 class=\"name\">$Name</h4>
<p>$Cat</p>";
if ($expires != '') {
$year = date('Y', strtotime($discount['expires']));
$month = date('n', strtotime($discount['expires']));
$day = date('d', strtotime($discount['expires']));
$hour = date('H', strtotime($discount['expires']));
$minute = date('i', strtotime($discount['expires']));
$secs = date('s', strtotime($discount['expires']));
$countdown_html = '<div class="defaultCountdown" id="countdown_' . $id . '" data-year="'. $year .'" data-month="'. $month .'" data-day="'. $day .'" data-hour="'. $hour .'" data-minute="'. $minute .'" data-secs="'. $secs .'"></div>';
echo "<script type=\"text/javascript\">
$(window).load(function(){
var year = $('#countdown_$id').attr('data-year');
var month = $('#countdown_$id').attr('data-month');
var day = $('#countdown_$id').attr('data-day');
var hour = $('#countdown_$id').attr('data-hour');
var minute = $('#countdown_$id').attr('data-minute');
var secs = $('#countdown_$id').attr('data-secs');
$('#countdown_$id').countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
</script>";
}
echo "</div>\n";
}
function loadMoreItems(getQuery, page) {
//load items
$.get(getQuery, null, function(data) {
var container = $(data).find('#container');
if (container) {
var newItemsHTML = "";
newItemsHTML = $(container).html();
var $newItems = $(newItemsHTML);
$container.isotope('insert', $newItems, true);
//add jquery effects to new elements
$newItems.find('.hcaption').hcaptions({effect: "fade"});
$newItems.find(".live-tile").liveTile({pauseOnHover: true});
$('.defaultCountdown').each( function() {
var year = $(this).attr('data-year');
var month = $(this).attr('data-month');
var day = $(this).attr('data-day');
var hour = $(this).attr('data-hour');
var minute = $(this).attr('data-minute');
var secs = $(this).attr('data-secs');
$('#' + this.id).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
}
}, 'html');
}
After your ajax function returns, just call the jquery to initialise the countdowns again.
Instead of using php to echo the values into the jQuery call - add them to the div itself, e.g
<div class="defaultCountdown" data-year="2013" data-month="11">
Then to initialise it would be:
$('div.defaultCountdown').each( function() )
{
year = $(this).attr('year');
...
$(this).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});
Add some way of checking if an element has already been processed. You could create the elements initially with class="unprocessed"
<div class="defaultCountdown unprocessed">
The countdown initialise function would then be:
$('div.defaultCountdown.unprocessed').each(function(){...})
After the countdown has been initialised remove the 'unprocessed' class name
$(".element").each(function() {
var item_id = "#" + this.id;
if(this.id != 'discount_0'){
container.find(discount_id).remove();
}
$(element_id).countdown({until: new Date($year, $month - 1, $day, $hour, $minute, $secs)});
});
when you are applying countdown you are calling on $(element_id), it should be
$(item_id)
and you are using $year, $month - 1, $day, $hour, $minute, $secs all these are php variables,you cannot use them as jquery variables