menator01
Gold Coder
Just thought it was kind of cool that this can be done with an html table.
index.php
clock.js
index.php
HTML:
<?php
class Pages
{
public $page;
function get_page($page)
{
switch ($page) {
case 'link 1':
echo 'This has some stuff about link 1. Could be anything.';
break;
case 'link 2':
echo 'A bunch of jibberish stuff talking about link 2.';
break;
case 'link 3':
echo 'Another link again? This is link 3 stuff.';
break;
case 'about':
echo 'This is all about you know, the site.';
break;
default:
echo 'Home page';
}
}
}
$page = new Pages();
?>
<!DOCTYPE html>
<html lang='us'>
<head>
<title>My Page</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="clock.js"></script>
</head>
<body>
<table>
<tr>
<th colspan="3">
<img class="logo" src="images/ratt.svg" width="80px">
My Page Heading
</th>
</tr>
<tr class="midrow">
<td class="left">
<h3>Menu</h3>
<ul>
<li><a href="index.php">Home</li>
<li><a href="index.php?page=link 1">Link 1</li>
<li><a href="index.php?page=link 2">Link 2</li>
<li><a href="index.php?page=link 3">Link 3</li>
<li><a href="index.php?page=about">About</li>
</ul>
</td>
<td class="mid">
<p>
<?php
$page->get_page($_GET['page']);
?>
</p>
</td>
<td class="right">
<h3>Current Date / Time</h3>
<div class="date">
<span id="date"><?php echo date("m / d / Y"); ?></span>
/
<span id="clock"></span>
</div>
<script>
currentTime();
</script>
</td>
</tr>
<tr>
<td colspan="3" class="footer">Gaming-Rat Productions ©: 11/06/2022</td>
</tr>
</table>
</body>
</html>clock.js
JavaScript:
function currentTime() {
let date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";
if (hh == 0) {
hh = 12;
}
if (hh > 12) {
hh = hh - 12;
session = "PM";
}
hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;
let time = hh + ":" + mm + ":" + ss + " " + session;
document.getElementById("clock").innerText = time;
let t = setInterval(function () {
currentTime()
}, 1000);
}
