Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/clock.js

Last active September 22, 2015 03:44
Show Gist options
  • Save kevincolten/2c711e24d3d4fc7ed51a to your computer and use it in GitHub Desktop.
Save kevincolten/2c711e24d3d4fc7ed51a to your computer and use it in GitHub Desktop.
Download ZIP
Clock
Raw
clock.js
function displayTime() {
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var meridiem = "AM";
if( (h > 7) && (h < 19) ) {
// document.body.style.backgroundColor="#80d4ea";
$('body').css('background-color', "#80d4ea");
} else {
// document.body.style.backgroundColor="#000099";
$('body').css('background-color', "#000099");
}
if ( h >= 12 ) {
h = h - 12;
meridiem = "PM";
}
if ( h === 0 ) {
h = 12;
}
if ( h > 12 ) {
h = h - 12;
}
if ( m <= 9 ) {
m = '0' + m;
}
if ( s <= 9 ) {
s = '0' + s;
}
// var clockTime = document.getElementById('clock-time');
var $clockTime = $('#clock-time');
// clockTime.innerText = h + ':' + m + ':' + s + ' '+ meridiem;
$clockTime.text(h + ':' + m + ':' + s + ' '+ meridiem);
}
displayTime();
setInterval("displayTime()", 1000);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<title>Clock</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="clock-time"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="./clock.js"></script>
</body>
</html>
Raw
style.css
#clock {
height: 100px;
width: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding-top: 70px;
text-align: center;
color: white;
font-size: 110px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment