I am using html from another clock theme but don't like the hands I want image based hangs not the ones in this code. Already have the images which are named minute.png, second.png and hour.png would like help in to which part of the code to remove and what to add.
Here is the code.
Here is the code.
Code:
<html>
<head>
<title>Doctor Who Clock</title>
<style type="text/css">
@font-face {
font-family: 'GeoSansLight';
src: url('geosanslight-webfont.eot');
src: url('geosanslight-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'GeoSansLight', sans-serif;
font-size: 50%;
background:url('bg.png');
background-size: 100%;
}
#clock {
font-size:1em;
position:relative
}
#frame {
position:relative;
width:18em;
height:18em;
margin:5em auto;
border-radius:15em;
background:url('uhr.png') center center no-repeat;
background-size: 105%;
box-shadow:rgba(0,0,0,.6) 0em 0em 0.5em;
}
#clock-hour {
width:.8em;
height:5.5em;
background:#323232;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -.8em -.4em;
-webkit-transform-origin:0.4em 4.7em;
}
#clock-minute {
width:.7em;
height:8.5em;
background:#323232;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -1.5em -.4em;
-webkit-transform-origin:0.4em 7em;
}
#clock-second {
width:0.3em;
height:8.5em;
border-radius:.1em .1em 0 0/10em 10em 0 0;
background:#c00;
position:absolute;
bottom:50%; left:50%;
margin:0 0 -2em -.1em;
box-shadow:rgba(0,0,0,.8) 0 0 .2em;
-webkit-transform-origin:0.1em 6.5em;
}
#clock-second:after {
content:'';
width:1.2em;
height:1.2em;
box-shadow:rgba(0,0,0,.8) 0 0 .2em;;
border-radius:.7em;
background:inherit;
position:absolute;
left:-.5em; top:-.1em;
}
#clock-second:before {
content:'';
width:.6em;
height:.6em;
box-shadow:rgba(0,0,0,.8) 0 0 .2em;;
border-radius:.7em;
background:inherit;
position:absolute;
left:-.20em; bottom:1.65em;
}
.hidden {
display: none;
}
div#time-container{
font-size: 30px;
color: #fff;
text-align: center;
text-shadow: rgba(0,0,0,.3) 0 0 .1em;
}
p#time-placeholder {
margin: 2px 0 0 0;
}
#clock-container {
margin: 10px 0 0 0;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
</head>
<body id="body">
<div id="clock-container">
<div id="clock">
<div id="frame"></div>
<div id="clock-hour"></div>
<div id="clock-minute"></div>
<div id="clock-second"></div>
</div>
</div>
<div id="time-container" class="hidden">
<p id="time-placeholder"></p>
<p id="date-placeholder"></p>
</div>
<script type="text/javascript">
function getHourAngle() {
var currentDate = new Date();
return Math.round((currentDate.getHours() * 30) + (currentDate.getMinutes() / 2) + (currentDate.getSeconds() / 120));
}
function getMinuteAngle() {
var currentDate = new Date();
return Math.round((currentDate.getMinutes() * 6) + (currentDate.getSeconds() / 10));
}
function getSecondAngle() {
var currentDate = new Date();
return Math.round((currentDate.getSeconds() * 6));
}
function updateClock() {
document.getElementById("clock-hour").setAttribute("style", "-webkit-transform: rotate(" + getHourAngle() + "deg);");
document.getElementById("clock-minute").setAttribute("style", "-webkit-transform: rotate(" + getMinuteAngle() + "deg);");
document.getElementById("clock-second").setAttribute("style", "-webkit-transform: rotate(" + getSecondAngle() + "deg);");
}
String.prototype.format = function() {
var formatted = this;
for (var i = 0; i < arguments.length; i++) {
var regexp = new RegExp('\\{'+i+'\\}', 'gi');
formatted = formatted.replace(regexp, arguments[i]);
}
return formatted;
};
function calculateTime() {
var Make_It_12_Hour = false;
var currentTime = new Date();
var day = currentTime.getDate();
var year = currentTime.getYear() + 1900;
var month = currentTime.getMonth() + 1;
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var outputTemplate = "";
if (Make_It_12_Hour) {
hours = hours % 12;
hours = hours ? hours : 12;
// 'murica mode. I really don't know who came up with this ********
dateoutputTemplate = "{1}.{0}.{2}";
} else {
dateoutputTemplate= "{0}.{1}.{2}";
}
timeoutputTemplate = "{0}:{1}";
if (day < 10) { day = "0" + day; }
if (month < 10) { month = "0" + month; }
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
document.getElementById("time-placeholder").innerText = timeoutputTemplate.format(hours, minutes);
document.getElementById("date-placeholder").innerText = dateoutputTemplate.format(day, month, year);
}
function showTime() {
document.getElementById('time-container').setAttribute("class", "");
}
function hideTime() {
document.getElementById('time-container').setAttribute("class", "hidden");
}
updateClock();
calculateTime();
setInterval(updateClock, 1000);
setInterval(calculateTime, 1000);
document.getElementById('clock-container').addEventListener('touchstart', showTime, false);
document.getElementById('clock-container').addEventListener('touchend', hideTime, false);
</script>
</body>
</html>