Skip to content

Instantly share code, notes, and snippets.

@astronomersiva

astronomersiva/timeColor.html

Created June 25, 2015 07:32
Show Gist options
  • Save astronomersiva/371b1f7343d26d268e56 to your computer and use it in GitHub Desktop.
Save astronomersiva/371b1f7343d26d268e56 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
timeColor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="sivasubramanyam,sivasubramanyam.me" name="keywords">
<meta content="Sivasubramanyam A" name="author">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Sivasubramanyam A</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel=
'stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet">
<link href=
"http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet" type='text/css'>
<link href=
"css/custom.css"
rel="stylesheet" type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&amp;subset=latin,cyrillic-ext,latin-ext,cyrillic">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700"
rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class = "container-fluid">
<p id = "timeNow"></p>
</div>
<div class = "container-fluid describe">
<div class = "row">
Changes the website's background color every
second based on the hex-color code generated
from the time.
</div>
</div>
</body>
<script>
setInterval(function (){
var date = new Date()
var hours = date.getHours();
var mins = date.getMinutes();
var secs = date.getSeconds();
if (hours<=9) {
hours = '0'+hours
};
if (mins<=9) {
mins = '0'+mins
};
if (secs<=9) {
secs = '0'+secs
};
var color = '#'+hours+mins+secs;
$("body").css("background-color", color );
$("p#timeNow").text(color);
}, 1000);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment