Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi thanh_rossi, 19/8/12.

Lượt xem: 6,895

  1. thanh_rossi Thành viên cấp 2

    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.
    [​IMG]
    Đồ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àn PhongHổ Báo VietDesigner thích bài viết này.
  2. Hổ Báo VietDesigner

    Hổ Báo VietDesigner Huyền Thoại VietDesigner

    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à :x
  3. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Đâ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ổ
    Hổ Báo VietDesigner thích bài viết này
  4. banbaonylong

    banbaonylong Ko phải assmin

  5. thanh_rossi

    thanh_rossi Thành viên cấp 2

    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)
    trungsuper thích bài viết này
  6. boyplay

    boyplay Thành viên cấp 3

    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 ^^!
  7. cuongbenki

    cuongbenki Thành viên cấp 3

    css đơn giản, :x, hiệu quả. good :x
  8. mrsontg

    mrsontg Mới đăng kí

    DEMO lỗi rùi bạn, hiz

Ủng hộ diễn đàn