[jQuery] Làm đồng hồ điện tử bằng CSS và JavaScript

Bài viết này hướng dẫn các bạn làm đồng hồ điện tử, sử dụng CSS và jQuery. Có thể là nó chưa đẹp, nhưng đây sẽ giúp các bạn có ý tưởng cho các giao diện đẹp hơn.

đồng hồ điện tử bằng CSS và JavaScript - jQuery

đồng hồ điện tử bằng CSS và JavaScript – jQuery

[button link=”http://cosmospham.com/demo/clock-css-jquery-01/” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo[/button]

[button link=”https://dl.dropbox.com/u/1098296/Demo/clock-01.zip” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Source Code[/button]

Chuẩn bị HTML cho đồng hồ

Đầu tiên các bạn khai báo thư viện jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Sau đó soạn đoạn HTML sau:

<p id="txthour">#</p> : <p id="txtmin">#</p> : <p id="txtsec">#</p>
<div id="container">
	<div id="sec"></div>
	<div id="min"></div>
	<div id="hour"></div>
</div>
<script type="text/javascript">
	clock();
</script>

Sang phần CSS định dạng đồng hồ

Các bạn định dạng cho các “kim” giờ, phút, giây, khung chứa:

div {
	height: 10px;
	width: 200px;
}

#min {
	background: red;
}

#sec {
	background: blue;
}

#hour {
	background: silver;
}

#container {
	width: 300px;
	height: 30px;
	border: 1px solid green;
}

p {
	display: inline;
}

Cuối cùng là JavaScript – jQuery:

function clock() {
	var d = new Date();
	var s = d.getSeconds();
	var m = d.getMinutes();
	var h = d.getHours();
	$("#sec").css("width",s*300/60+"px");
	$("#min").css("width",m*300/60+"px");
	$("#hour").css("width",h*300/24+"px");
	$("#txthour").html(h);
	$("#txtmin").html(m);
	$("#txtsec").html(s);

	setTimeout("clock()", 1000);
}

Chúng ta chia theo tỉ lệ để maximum của các kim lúc 12/24 giờ, 60 phút, 60 giây đều cùng một độ dài.

Dùng hàm setTimeout để gọi đệ quy chính hàm lấy ngày giờ và gán độ dài cho các kim.

[button link=”http://cosmospham.com/demo/clock-css-jquery-01/&#8221; color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo[/button]

[button link=”https://dl.dropbox.com/u/1098296/Demo/clock-01.zip&#8221; color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Source Code[/button]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s