Faid's Blog™: Jam Analog Tanpa Gambar (Analog Clock Without Image) HTML

Daripada nganggur bikin ginian aja, karena males bikin script lagi untuk gerakan jam dan logika pasaran (hari jawa) kopas dari Post Lama Saya dengan sedikit penambahan.
WARNING: Tidak bekerja di IE, untuk IE pake aja Raphaël—JavaScript Library
Source Code
<!DOCTYPE html>
<html>
	<head>
		<title>Jam Analog</title>
		<style>
			.circleBase {
				border-radius: 50%; /* lingkaran */
				width: 20px;
				height: 20px;
				background: #ff0000;
			}
			.clockBody {
				width: 400px;
				height: 400px;
				background: #dcdcff;
				border: 16px solid #00afff;
			}
			.clockLine {
				width: 4px;
				height: 20px;
				background: #00afff;
				position: absolute;
				transform-origin: 50% 100%;
			}
			.clockFont {
				font-family: arial;
				font-size: 40px;
				font-weight: bold;
				width: 280px;
				background: #dcdcff;
				color: #00afff;
				position: absolute;
			}
			.hourHand {
				width: 12px;
				height: 156px;
				background: #0000ff;
				position: absolute;
				margin-top: 44px;
				margin-left: 194px;
				transform-origin: 50% 136px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
			}
			.minHand {
				width: 8px;
				height: 188px;
				background: #00cc00;
				position: absolute;
				margin-top: 24px;
				margin-left: 196px;
				transform-origin: 50% 156px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
			}
			.secHand {
				width: 4px;
				height: 216px;
				background: #ff0000;
				position: absolute;
				margin-top: 4px;
				margin-left: 198px;
				transform-origin: 50% 176px;
				border-radius: 50% 50% 0 0; /* setengah lingkaran */
				outline: 1px solid transparent;
				transition-duration: 100ms;
			}
		</style>
	</head>
	<body>
		<div class="circleBase clockBody"> <!-- elemen utama (lingkaran jam) -->
			<center>
			<!-- elemen didalam jam -->
					<div class="clockLine" style='position: relative;'></div>
					<div class="clockLine" style='margin: 4px 288px; transform: rotate(30deg);'></div>
					<div class="clockLine" style='margin: 70px 354px; transform: rotate(60deg);'></div>
					<div class="clockLine" style='margin: 160px 378px; transform: rotate(90deg);'></div>
					<div class="clockLine" style='margin: 250px 354px; transform: rotate(120deg);'></div>
					<div class="clockLine" style='margin: 316px 288px; transform: rotate(150deg);'></div>
					<div class="clockLine" style='margin: 360px 198px;'></div>
					<div class="clockLine" style='margin: 316px 108px; transform: rotate(210deg);'></div>
					<div class="clockLine" style='margin: 250px 42px; transform: rotate(240deg);'></div>
					<div class="clockLine" style='margin: 160px 18px; transform: rotate(270deg);'></div>
					<div class="clockLine" style='margin: 70px 42px; transform: rotate(300deg);'></div>
					<div class="clockLine" style='margin: 4px 108px; transform: rotate(330deg);'></div>
					<div class="clockFont" id='digiDate' style='margin: 40px 60px; font-size: 24px;'></div>
					<div class="clockFont" style='margin: 108px 60px; font-size: 20px;'>
						<a href='http://faid-alfarisi.blogspot.com' target='_blank' style='color: #00afff;'>
							&copy; 2015 Faid Alfarisi
						</a>
					</div>
					<div class="clockFont" id='digiClock' style='margin: 264px 60px;'></div>
					<div class="hourHand" id='hrHnd'></div>
					<div class="minHand" id='mnHnd'></div>
					<div class="secHand" id='scHnd'></div>
					<div class="circleBase" style='position: absolute; margin: 170px 190px;'></div>
					<!-- elemen didalam jam -->
			</center>	
		</div>
	</body>
	<script>
		var dN = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"]; //hari
		var mN = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nop", "Des"]; //bulan
		var pN = ["Legi", "Pahing", "Pon", "Wage", "Kliwon"]; //pasaran (hari jawa)

		function refreshClock() {
			//ambil waktu saat ini
			dtCl = new Date(); //fungsi Date()
			hrCl = dtCl.getHours(); //jam
			mnCl = dtCl.getMinutes(); //menit
			scCl = dtCl.getSeconds(); //detik
			dyCl = dtCl.getDate(); //tanggal
			mtCl = dtCl.getMonth(); //bulan
			yrCl = dtCl.getFullYear(); //tahun
			//ambil waktu saat ini

			//putar elemen menit dan jam
			hrHnd.style.transform = "rotate(" + ((30 * hrCl) + (mnCl / 2)) + "deg)";
			mnHnd.style.transform = "rotate(" + ((6 * mnCl) + (scCl / 10)) + "deg)";
			//putar elemen menit dan jam

			//putar dan haluskan gerakan detik
			if (scCl == 0) {
				if (scHnd.style.transform != "rotate(0deg)") {
					scHnd.style.transform = "rotate(360deg)";
					setTimeout(function() {
						scHnd.style.transitionDuration = "0ms";
						scHnd.style.transform = "rotate(0deg)";
					}, 100);
				}
			} else {
				if (scHnd.style.transitionDuration != "100ms") {
					scHnd.style.transitionDuration = "100ms";
				}
				scHnd.style.transform = "rotate(" + (6 * scCl) + "deg)";
			}
			//putar dan haluskan gerakan detik

			//penambahan 0 didepan bila angka < 10 (mis. 9 menjadi 09)
			if (dyCl < 10) {
				dyCl = "0" + dyCl;
			}
			if (hrCl < 10) {
				hrCl = "0" + hrCl;
			}
			if (mnCl < 10) {
				mnCl = "0" + mnCl;
			}
			if (scCl < 10) {
				scCl = "0" + scCl;
			}
			//penambahan 0 didepan bila angka < 10 (mis. 9 menjadi 09)

			//tampilan jam dan tanggal digital
			pScL = (((new Date(yrCl, mtCl, dyCl).getTime() - new Date(100, 0, 1).getTime()) / (24 * 60 * 60 * 1000)) % 5); //hitung pasaran
			digiClock.innerHTML = hrCl + ":" + mnCl + ":" + scCl; //jam digital
			digiDate.innerHTML = dyCl + "&nbsp;" + mN[mtCl] + "&nbsp;" + yrCl + "<br/>" + dN[dtCl.getDay()] + "&nbsp;" + pN[Math.ceil(pScL)]; //tanggal + pasaran
			//tampilan jam dan tanggal digital

			setTimeout("refreshClock();", 250); //panggil fungsi (untuk hasil terbaik buat waktu timeout < 1000ms dan > 100ms)
		}

		refreshClock(); //panggil fungsi
	</script>
</html>
Faid's Blog™

My Blog Menu

Friday, March 20, 2015

Jam Analog Tanpa Gambar (Analog Clock Without Image) HTML

No comments:

Post a Comment
