Đồ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

 

Hổ mù về mấy cái này - chắc hôm nào cắp cặp đi học bác thanh_rossi quá hà

 

Đây là bài trên blog thằng bạn t vừa viết hôm qua, tuy nhiên chỉ cần biết một tí kiến thức cơ bản về jquery,js,css là làm đc thôi bác Hổ

 

Chủ yếu muốn cho mọi người hiểu code thôi chứ plugin clock thì nhiều lắm bác ơi (sơ sơ cũng vài chục)

 

Chắc phải kêu a Dư thêm cái bbcode iframe vào nữa để chạy mấy cái demo cho nhiều bạn chưa bik về cái này xem ^^!

 

css đơn giản, , hiệu quả. good