Advanced Search

Return to Snippet

Revision: 50586
at August 27, 2011 03:08 by jntu_gnec
Initial Code 
<!DOCTYPE html>
<html>
	<head>
		<title>Clock Widget by www.Megawrz.com</title>
		<meta charset="utf-8">
		<style>
		#clock-widget {
			width: 347px;
			height: 143px;

			background-color: #000;
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, #000),
				color-stop(0.75, rgba(0, 0, 0, 0.8))
			);
			background-image: -moz-linear-gradient(
				center bottom,
				rgb(0, 0, 0) 0%,
				rgba(0, 0, 0, 0.8) 75%
			);

			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;

			box-shadow: 0 0 10px #555;
			-webkit-box-shadow: 0 0 10px #555;
			-moz-box-shadow: 0 0 10px #555;
			-o-box-shadow: 0 0 10px #555;

			font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
			font-weight: bold;
		}

		#clock-widget .time {
			width: 228px;
			height: 116px;

			float: left;
			margin: 13.5px;

			background-color: #fff;
			background-image: -webkit-gradient(
				linear,
				left bottom,
				left top,
				color-stop(0, rgb(212, 212, 212)),
				color-stop(0.75, #fff)
			);
			background-color: -moz-linear-gradient(
				center bottom,
				rgb(212, 212, 212) 0%,
				#fff 75%
			);

			border-radius: 5px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-o-border-radius: 5px;

			box-shadow: inset 0 0 7px #555;
			-webkit-box-shadow: inset 0 0 7px #555;
			-moz-box-shadow: inset 0 0 7px #555;
			-o-box-shadow: inset 0 0 7px #555;

			text-shadow: 1px 1px 0 #fff;
			text-align: center;
			line-height: 116px;
			font-size: 5em;
		}

		#clock-widget .date {
			height: 116px;
			padding: 13.5px;

			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 2px 0 rgba(255, 255, 255, 0.15);
			text-align: center;
			line-height: 39px;

			color: #fff;
		}

		#clock-widget .dayofmonth {
			font-size: 4em;
		}
		</style>
	</head>
	<body>

		<div id="clock-widget">
			<div class="time"></div>
			<div class="date">
				<div class="dayofweek"></div>
				<div class="dayofmonth"></div>
				<div class="month"></div>
			</div>
		</div>

		<script>
		var date,
		    days_week = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
		    months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
		    clock_widget = document.getElementById('clock-widget');

		function update_time() {
			date = new Date();
			clock_widget.getElementsByClassName('time')[0].innerHTML = date.getHours() + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
			clock_widget.getElementsByClassName('dayofweek')[0].innerHTML = days_week[date.getDay()];
			clock_widget.getElementsByClassName('dayofmonth')[0].innerHTML = date.getDate();
			clock_widget.getElementsByClassName('month')[0].innerHTML = months[date.getMonth()];
		}

		setInterval(update_time, 1000);
		update_time();
		</script>
		<br>
		<h4> For more Widgets Visit : <a href="http://www.megawrz.com/">Soruce Site</a></h4>
	</body>
</html>
Initial URL 
http://www.megawrz.com/
Initial Description 
This is a CSS3 and JavaScript widget to show the current date and time
Initial Title 
Clock Widget Pure CSS3
Initial Tags 









Initial Language





CSS