tiện ích online

TIỆN ÍCH ONLINE

Tin tức cập nhật

Thống kê

  • truy cập   (chi tiết)
    trong hôm nay
  • lượt xem
    trong hôm nay
  • thành viên
  • thống kê truy cập

    free counters

    HỌP MẶT VIOLET OPEN HÈ 2017

    Gốc > Những vấn đề về CNTT > Mã HTML >

    HƯỚNG DẪN TẠO ĐỒNG HỒ CHO WEBSITE BẰNG JAVASCRIPT

    Bài viết này sẽ hướng dẫn bạn tạo một chiếc đồng hồ số 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. Chỉ mất 5 phút để tạo ra ứng dụng này. 

    Để tạo ra ứng dụng này bạn không cần phải biết nhiều về JavaScript, bạn có thể làm theo các bước sau đây: 

    1/Chèn đoạn JavaScript này vào web của bạn: 

    Quote
    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>'+today+' | '+nowTime+'</span>'; 

    document.getElementById("clock").innerHTML=tmp; 

    clocktime=setTimeout("time()","1000","JavaScript"); 
    function checkTime(i) 

    if (i<10) 

    i="0" + i; 

    return i; 

    }


    Ở đoạn code trên, tùy vào ý muốn, bạn có thể thay đổi vị trí hiển thị ngày hoặc thời gian bằng cách đảo vị trí các biến có trong chuỗi lấy kết quả. 

    2/Bước tiếp theo bạn tìm đến thẻ body của file HTML và thêm như sau: 

    Quote
    <body onload="time()"> 


    3/Bước này bạn thêm một thẻ HTML với id là “clock” ở vị trí mà bạn muốn hiển thị, với ví dụ này sử dụng thẻ div: 

    Quote
    <div id="clock"></div> 

    4/Done – vậy là bạn đã có 1 ứng dụng đồng hồ cho website của mình. Bạn có thể tham khảo demo hoặc download về làm theo mẫu. Chúc bạn thành công. 


    Nhắn tin cho tác giả
    Đỗ Thanh Dương @ 20:27 23/11/2015
    Số lượt xem: 462
    Số lượt thích: 0 người
     
    Gửi ý kiến

    HỖ TRỢ QUẢN TRỊ WEBSITE

    Thay tên website / Chọn thư mục / Mở ra
    Giao diện Module Thư mục Thành viên Tài nguyên Xóa Code
    http://