Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Sep 16, 2014, 10:50 AM   #1
Jimmac1971
macrumors newbie
 
Join Date: Sep 2014
Analog Clock

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.
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>

Last edited by Jimmac1971; Sep 16, 2014 at 02:15 PM. Reason: code tags added
Jimmac1971 is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Will a new Apple Watch have an analog and digital clock illuminated in dark? deafphillymac Apple Watch 1 Sep 11, 2014 03:13 AM
Analog Clock Icon iOS 7 sparkles61785 iPhone 19 Oct 17, 2013 12:59 AM
beautiful analog clock for iPad monajafi iPad Apps 2 Mar 2, 2013 03:15 PM
Apple Licenses Swiss Railway Clock Design for iPad's iOS 6 Clock App MacRumors MacRumors.com News Discussion 289 Oct 18, 2012 12:08 PM

Forum Jump

All times are GMT -5. The time now is 11:44 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC