<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<head>
<title>Analog Clock</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body onLoad="startclock()">
<div id="hodiny">
<div class="clock">
<h2>Lorem ipsum <br>dolor sit amet</h2>
<div class="analog-clock">
<svg width="140" height="125">
<circle id="clock-face" cx="70" cy="70" r="50" />
<line id="h-hand" x1="70" y1="70" x2="70" y2="45" />
<line id="m-hand" x1="70" y1="70" x2="70" y2="33" />
<line id="s-hand" x1="70" y1="70" x2="70" y2="31" />
<line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
</svg><h3>20%</h3><h4>Lorem ipsum dolor sit amet</h4>
<hr align="center" color="#5d5d5d" id="cara">
<h5>Lorem! ipsum dolor sit</h5>
<img id="obrazek" src="hodiny.png"height="129" width="127">
<SCRIPT>
function showTime() {
var today = new Date();
var BigDay = new Date("august 30, 2015, 16:25:00")
var msPerDay = 24 * 60 * 60 * 1000;
var timeLeft = (BigDay.getTime() - today.getTime());
if (timeLeft < 0) {
return;
}
var daysLeft = Math.floor(timeLeft / msPerDay);
timeLeft -= daysLeft * msPerDay;
var hrsLeft = Math.floor(timeLeft / msPerDay * 24);
timeLeft -= hrsLeft * msPerDay / 24;
var minsLeft = Math.floor(timeLeft / msPerDay * 24 * 60);
timeLeft -= minsLeft * msPerDay / 24 / 60;
var secLeft = Math.floor(timeLeft / 1000);
var display = '';
if (daysLeft > 0) {
display += daysLeft + ' d ';
}
if (hrsLeft > 0) {
display += hrsLeft + ' h ';
}
if (minsLeft > 0) {
display += minsLeft + ' m ';
}
if (secLeft > 0) {
display += secLeft + ' s ';
}
document.getElementById('vysledek').innerHTML = display;
timerID = setTimeout(showTime, 1000);
}
function stopClock() {
if (timerID) {
clearTimeout(timerID);
timerID = null;
}
}
function startClock() {
stopClock();
showTime();
}
var timerID = null;
</script>
<p><form name="frm" id="timer"><span id="vysledek" </span></form></p>
</div>
</div>
</div>
</body>
</html>