index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 id="clock">00:00:00</h1>
<p id="color">#000000</p>
<script src="script.js"></script>
</body>
</html>
style.css
body {
font-family: "Open Sans";
margin-top: 300px;
text-align: center;
color: white;
}
#clock {
font-weight: 300;
font-size: 120px;
}
script.js
var clock = document.getElementById('clock');
var color = document.getElementById('color');
function hexoClock() {
var time = new Date();
var h = (time.getHours() % 12).toString();
var m = time.getMinutes().toString();
var s = time.getSeconds().toString();
if(h.length < 2) {
h = '0' + h;
}
if(m.length < 2) {
m = '0' + m;
}
if(s.length < 2) {
s = '0' + s;
}
var clockString = h + ':' + m + ':' + s;
var colorString = '#' + h + m + s;
clock.textContent = clockString;
color.textContent = colorString;
document.body.style.background = colorString;
}
hexoClock();
setInterval(hexoClock, 1000);
Комментариев нет:
Отправить комментарий