Đồng hồ điện tử bằng CSS và JQuery

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​

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

Code:

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

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

Code:

<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
Các bạn định dạng cho các “kim” giờ, phút, giây, khung chứa:

Code:

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:

Code:

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.
Demo,Soure code

Nguồn :Cosmos Phạm blog