20xd6/WebClock
1
0
Fork 0
Code Issues Pull Requests Releases 2 Wiki Activity

Added the ability to change the timezone of the clock.

Browse Source 
Previously it was only posiable to use the browers default timezone.
To be done:
	Add more timezones to the list of possiable ones.
	Clean up the formating of the updating clock to match the php
		generated inishal date string.
This commit is contained in:
efrick 2020-04-09 13:56:48 -04:00
parent a53376f57e
commit c63c654ead
2 changed files with 80 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
clock.js
View File

@ -1,4 +1,6 @@
/*Clock functionality. When the page is loaded it starts a one second
* long loop to update the time displayed on the page.
*/
window.onload = startInterval; window.onload = startInterval;
function startInterval(){ function startInterval(){
setInterval("startTime();",1000); setInterval("startTime();",1000);
@ -6,9 +8,20 @@ function startInterval(){
function startTime(){ function startTime(){
var current_time = new Date(), var current_time = new Date(),
our_tz = current_time.getTimezoneOffset,
formated_time = current_time.getHours() + ":" formated_time = current_time.getHours() + ":"
+ current_time.getMinutes() + ":" + current_time.getMinutes() + ":"
+ current_time.getSeconds(); + current_time.getSeconds();
document.getElementById('time_title').innerHTML = "Time is: " + formated_time; document.getElementById('time_title').innerHTML = "Time is: "
document.getElementById('time_body').innerHTML = Date(); + formated_time.toLocaleString(
{timeZone: current_tz},
{dateStyle: "full"},
{hour12: "false"})
+ " " + current_tz;
//document.getElementById('time_title').innerHTML = current_tz;
document.getElementById('time_body').innerHTML = current_time.toLocaleString(
{timeZone: current_tz},
{dateStyle:"long"},
{hour12: "false"});
document.getElementById('JStz').innerHTML = current_tz;
} }

90
clock.php
View File

@ -1,28 +1,66 @@
<!DOCTYPE html>
<?php
/* Catches the form post to update the timezone.
* If there is no form submission it will just inishilize the
* timezone variables to be passed to the JS.
*/
if(isset($_POST['formSubmit'])){
$selectedTimezone = $_POST['userTimezone'];
if(!isset($selectedTimezone)){
//I don't have any error message set here. It will just reload the page.
} else{
date_default_timezone_set($selectedTimezone);
$scriptTZ = date_default_timezone_get();
}
} else{
$selectedTimezone = date_default_timezone_get();
//date_default_timezone_set("America/Los_Angeles");
$scriptTZ = date_default_timezone_get();
}
?>
<html> <html>
<head> <head>
<title id='time_title'> <title id='time_title'>
<?php <?php
echo "Time is: " . date("H:i:s"); echo "Time is: " . date("H:i:s e");
?> ?>
</title> </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="efrick"/> <meta name="author" content="efrick"/>
<link href="/styles.css" type="text/css" rel="stylesheet"/> <link href="/styles.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="clock.js"></script> <script>var current_tz=<?php echo json_encode($scriptTZ);?></script>
</head> <script type="text/javascript" src="clock.js"></script>
<body> </head>
<h1> <body>
Date and Time <h1>
</h1> Date and Time
<div class="body"> </h1>
<?php <div class="body">
echo "The full date and time:". <?php //Print default time and date values for the JS to update.
"<br>". echo "The full date and time:".
"<p id='time_body'>". "<br>".
date("D M d Y H:i:s") . "<p id='time_body'>".
" GMT" . date("O") . " (" . date("T") . ")"."</p>"; date("D M d Y H:i:s") .
?> " GMT" . date("O") . " (" . date("T") . ")"."</p>\n\t\t";
</div> echo '<p>The user timezone is now set to ' . $selectedTimezone . "</p>\n\t\t";
</body> echo '<p>The system timezone is now set to ' . $scriptTZ . "</p>\n";
?>
<div class="tz_select">
<p>
If the detcted timezone is not correct selct your timezone from the dropdown below.
</p>
</div>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<select name="userTimezone" class="tz_select">
<option value="" disabled selected class="invisable">Timezone</option>
<option value="EDT">EDT</option>
<option value="UTC">UTC</option>
<option value="America/Los_Angeles">PDT</option>
</select><br/>
<input type="submit" name="formSubmit" value="Update" >
</form>
<p id="JStz">JS Timezone</p>
</div>
</body>
</html> </html>