Javascript clock with server time PHP [duplicate] - javascript

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>

Related

echo time doesn't work

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>

Multiple Countdown using PHP and Javascript

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; ?>';)

PHP and jquery countdown

I just got a tutorial that integrate PHP date function and jQuery.
i want to customize the script so on specific time reach its redirect to another page.
i tried to do my self but its not working correctly. I have included the tutorial link here.
Tutorial LInk
PHP code to fetch date from server
<?php
date_default_timezone_set('GMT');
$currentTime = date('H:i:s');
$currentDay = date('w');
$delTimeStart = '00:00:00';
$delTimeEnd = '14:30:00';
if ($currentTime >= $delTimeStart && $currentTime < $delTimeEnd && $currentDay > 0 && $currentDay < 6){
$css = 'display: block;';
} else {
$css = 'display: none;';
}
?>
JS script
<script type="text/javascript">
$('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '%H Hours '
+ '%M Minutes '
+ '%S Seconds'
));
});
</script>
Try this - gleaned from the source:
FIDDLE
$('#countdowntimer').countdown('<?php $date = strtotime("+1 day"); echo date('Y/m/d', $date); ?> 14:30:00')
.on('update.countdown', function(event) {
$(this).html(event.strftime(''
+ '%H Hours '
+ '%M Minutes '
+ '%S Seconds'
));
})
.on('finish.countdown', function(event) {
location.replace("someurl");
});

Javascript clock?

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>

Showing a 'Now Playing' in HTML and PHP

I have been trying to use some PHP and HTML code (with a bit of js) to create a 'now playing' spotify viewer for my website. I just cannot get it working. I have tried all the possibilities such as renaming files, changing the HTML and PHP and JS versions but nothing seems to work. Below is my HTML code (js) and PHP code.
<script src="jquery-1.11.0.min.js"></script>
<!--Begin Spotify Scrobble-->
<SCRIPT TYPE="text/javascript">function get_spotify() {
$.ajax({
type: 'POST',
url: '/public_html/Spotify.php',
data: { request: 'true' },
success: function(reply) {
$('.now-playing').html("<p>" + reply + "</p>");
}
});
}
</script>
<!--End Spotify Scrobble-->
PHP
?php
// Account & API Account Information
$user = "USERNAME"; // <---- Your username goes here
$key = "KEY"; //<-- Your API key goes here
+
// The URL of the request to API Service
$url = "http://ws.audioscrobbler.com/2.0/? method=user.getrecenttracks&user=USERNAME&api_key=APIKEY&forma t=json";
+
// Enable Shortening
$short_titles = false;
+
// Setup cURL for request
$ch = curl_init( $url );
-// Options for cURL
$options = array(
CURLOPT_RETURNTRANSFER => true
);
curl_setopt_array($ch, $options);
-// Execute cURL and save return to $json
+
+// Execute cURL
$json = curl_exec($ch);
-// Close the connection
curl_close($ch);
-// Decode JSON response to array.
$data = json_decode($json,true);
+
// Get only the latest track information
$last = $data['recenttracks']['track'][0];
+
// Is now playing attribute present?
if (isset($last['#attr']['nowplaying'])) {
- // Echo now playing information.
+
$output = "I am currently listening to " . $last['name'] . ' by ' . $last['artist']['#text'] . " on Spotify.";
+
if ($short_titles) {
$output = sTrim($output);
}
+
echo trim($output);
} else {
- // Collect info on when this was last played and get the current UNIX time.
$played = $last['date']['uts']; $now = time();
- // Get the difference
$diff = abs($now - $played);
- // format hours
+
+ // Time formatting
$hours = intval(intval($diff) / 3600);
- // format minutes
$minutes = intval(($diff / 60) % 60);
- // IF hours is empty(equal to zero)
+
+ // String formatting based on time
if (!empty($hours)) {
- if ($hours > 24) // Is it more than 1 day?
+ if ($hours > 24)
$time = "over a day ago";
else
$time = $hours . " hours and " . $minutes . " minutes ago";
} else
$time = $minutes . " minutes ago";
+
$output = "I last listened to " . $last['name'] . ' by ' . $last['artist'] ['#text'] . " $time on Spotify";
+
if ($short_titles) {
$output = sTrim($output);
}
+
echo trim($output);
}
+
exit();
function sTrim($output) {

Categories

Resources