Skip to content

Instantly share code, notes, and snippets.

@billyeh

billyeh/clock.html

Last active January 9, 2017 22:29
Show Gist options
  • Save billyeh/2212820d078d4d0c1bd5423fe4583aab to your computer and use it in GitHub Desktop.
Save billyeh/2212820d078d4d0c1bd5423fe4583aab to your computer and use it in GitHub Desktop.
Download ZIP
Clock with seconds and carousel of background images
Raw
clock.html
<html>
<body onload="main()" style="margin:0; background-color:black; font-family:sans-serif;">
<div id="body" style="width:100%; height:100%; background-image:url(image1.jpg); background-size:cover">
<div style="position:absolute; top:50%; color:white; margin-left:3%">
<div>
<span id="time"></span>
<span id="secs"></span>
</div>
<div id="date"></div>
</div>
</div>
</body>
<script>
var fileNumber = 1; //parseInt(prompt("How many image files will you cycle through (must be jpg, see example files)?", 1));
var interval = 0; //prompt("How long to remain on each image, in seconds?", 5);
var monthNames = [
"January", "February", "March",
"April", "May", "June", "July",
"August", "September", "October",
"November", "December"
];
var dayNames = [
"Lord's Day", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"
];
var currentTime = new Date();
var currentImage = 0;
var time = document.getElementById("time");
var date = document.getElementById("date");
var secs = document.getElementById("secs");
var body = document.getElementById("body");
function main() {
setInterval(displayTime, 1000);
//setInterval(changeImage, 1000*interval);
var height = window.innerHeight;
time.style.fontSize = height / 6;
date.style.fontSize = height / 15;
secs.style.fontSize = height / 6;
}
function changeImage() {
currentImage++;
var img = currentImage % fileNumber + 1;
body.style.backgroundImage = "url(image" + img + ".jpg)";
}
function displayTime() {
currentTime = new Date();
var hours = formatHour(currentTime.getHours());
var minutes = formatMinutes(currentTime.getMinutes());
var seconds = formatMinutes(currentTime.getSeconds());
var dateOfYear = currentTime.getDate();
var month = currentTime.getMonth();
var day = currentTime.getDay();
time.innerHTML = hours + ":" + minutes + ":" + seconds + " ";
secs.innerHTML = amOrPm(currentTime.getHours());
date.innerHTML = dayNames[day] + ", " + monthNames[month] + " " + dateOfYear;
}
function formatHour(hour) {
hour = hour % 12;
if (hour === 0) {
hour = 12;
}
return hour;
}
function amOrPm(hour) {
if (hour >= 12) {
return "PM";
}
return "AM";
}
function formatMinutes(minutes) {
if (minutes < 10) {
minutes = "0" + minutes;
}
return minutes;
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment