Hướng dẫn Sử dụng JavaScript để tạo đồng hồ cho website

Thảo luận trong 'JavaScript/jQuery' bắt đầu bởi PVS, 12/05/2017.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,824
    Đã được thích:
    6,582
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Sử dụng JavaScript để tạo đồng hồ cho website

    Chắc các bạn đã từng vào những trang web mà thấy có một chiếc đồng hồ nằm ở trên top head hay bên phải, bên trái hoặc ở bất kỳ nơi nào. Vậy đã bao giờ các bạn thắc mắc làm thế nào để có được một chiếc đồng hồ tương tự như vậy không?

    Bài viết hôm nay mình sẽ hướng dẫn các bạn cách Tạo đồng hồ cho website bằng JavaScript với đầy đủ ngày giờ và sẽ có “kim” giây chạy theo thời gian thực của máy tính.

    dong-ho.jpg
    Để tạo được một chiếc đồng hồ bằng JavaScript thì các bạn thực hiện theo những bước như sau:

    Bước 1: Chèn đoạn code JavaScript sau vào web của bạn (Tốt nhất chèn trong thẻ <head>)
    Mã:
    <script type="text/javascript">
    function time() {
       var today = new Date();
       var weekday=new Array(7);
       weekday[0]="Sunday";
       weekday[1]="Monday";
       weekday[2]="Tuesday";
       weekday[3]="Wednesday";
       weekday[4]="Thursday";
       weekday[5]="Friday";
       weekday[6]="Saturday";
       var day = weekday[today.getDay()];
       var dd = today.getDate();
       var mm = today.getMonth()+1; //January is 0!
       var yyyy = today.getFullYear();
       var h=today.getHours();
       var m=today.getMinutes();
       var s=today.getSeconds();
       m=checkTime(m);
       s=checkTime(s);
       nowTime = h+":"+m+":"+s;
       if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = day+', '+ dd+'/'+mm+'/'+yyyy;
    
       tmp='<span class="date">'+today+' | '+nowTime+'</span>';
    
       document.getElementById("clock").innerHTML=tmp;
    
       clocktime=setTimeout("time()","1000","JavaScript");
       function checkTime(i)
       {
          if(i<10){
         i="0" + i;
          }
          return i;
       }
    }
    </script>
    Ở trên bạn có thể tùy ý điều chỉnh cách thức hiển thị của chiếc đồng hồ theo ý muốn của bạn bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả.

    Bước 2: Tiếp theo bạn tìm đến thẻ <body> của file HTML và thêm như sau:
    Mã:
    <body onload="time()">
    Bước 3: Cuối cùng các bạn muốn chiếc đồng hồ hiện chỗ nào thì thêm một thẻ HTML với id =”clock” ở vị trí mà bạn muốn hiển thị. Ở đây mình dùng thẻ <div> còn các bạn muốn dùng thẻ khác cũng được.
    Mã:
    <div id="clock"></div>
    Như vậy là chúng ta đã tạo được một chiếc đồng hồ cho web bằng JavaScript đơn giản nhưng rất hiệu quả. Hy vọng sẽ giúp ích nhiều cho các bạn.

    Chúc các bạn thành công.


    Nguồn: tuhocphp.com​
     
    Quan tâm nhiều
    Bài viết mới

Chia sẻ trang này