Nhóm lưu trữ: JavaScript

JavaScript là một ngôn ngữ lập trình, một phần không thể thiếu của các trang web hiện đại. JavaScript được ứng dụng rộng rãi và trở nên phổ biến trong việc xây dựng ứng dụng cho máy tính và web.

Tìm thông tin vị trí (location data) bằng Javascript

Tìm thông tin vị trí (location data) bằng Javascript

Nếu bạn muốn check thông tin vị trí (Location data) bằng Javascript,  bạn chỉ cần thực hiện như sau:

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);  // Vĩ độ
  console.log(location.coords.longitude); // Kinh độ
  console.log(location.coords.accuracy);  // Tính chính xác
});

Đoạn codes Javascript trên sử dụng API data của Geolocation API, bạn có thể vào địa chỉ này để tham khảo thêm.

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

 

Z-Kiwi

hieu-ung-tuyet-roi-cho-trang-web

Hướng dẫn tạo hiệu ứng tuyết rơi cho website

Sau đây là hướng dẫn ngắn gọn giúp website của bạn mang một phong cách mùa đông, phù hợp với không khí mùa Noel. Cụ thể trong hướng dẫn này sẽ giúp bạn tạo hiệu ứng tuyết rơi nhẹ nhàng và đẹp mắt mà không cần tốn nhiều thời gian và công sức.

Đầu tiên là bạn cần download file jquery sau về và chèn vào website bạn:

http://zkiwi.com/libs/js/snow.js

Tiếp theo là bạn download các bông tuyết: img.rar

Bạn có thể xây dựng cấu trúc HTML tương tự như bên dưới:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Your Web</title>
<script src="http://zkiwi.com/libs/js/snow.js" type="text/javascript"></script>
<script type="text/javascript">
   createSnow('http://zkiwi.com/libs/imgs/snow/', 30);
</script>
</head>

<body>
Nội dung trang web của bạn
</body>
</html>

Trong đó có đoạn Javascript createSnow('http://zkiwi.com/libs/imgs/snow/', 30); thực thi hiệu ứng. Bạn nhớ thay đổi đường dẫn chứa hình các bông tuyết và số bông tuyết xuất hiện (ở đây là 30), lưu ý số bông tuyết bạn đừng để quá nhiều vì sẽ ảnh hưởng đến việc load trang. Ngoài ra bạn cũng có thể tự thiết kế các bông tuyết theo ý bạn muốn.

Bạn có thể tham khảo Demo hoặc download toàn bộ filde mã nguồn về xử dùng cho trang web bạn. Chúc bạn thành công.

tab-noi-dung-jquery-html-css

Tabbed nội dung bằng jQuery + HTML + CSS cho Website

Bài viết sau sẽ hướng dẫn bạn sử dụng một chút jQuery, HTML và CSS để tạo ra nội dung dạng Tab (hay Tabbed). Một kiểu show dữ liệu tiết kiệm không gian web và được nhiều website sử dụng. Có một cải tiến đáng lưu ý là ghi nhớ tab được chọn, khi người dùng reload trang sẽ không mất đi trạng thái đang được chọn ở tab đang mở. Sau đây là các bước thực hiện để tạo ra ứng dụng Tabbed nội dung bằng jQuery + HTML + CSS cho Website của bạn.

tao-tab-noi-dung-bang-jquery-html-css

Đầu tiên ta có đoạn HTML và CSS sử dụng cho tab như sau:

<div class="tabbed">
  <ul class="tabnav">
    <li><a href="#tab1">Tab 01</a></li>
    <li><a href="#tab2">Tab 02</a></li>
    <li><a href="#tab3">Tab 03</a></li>
  </ul>
  <div class="tabcont">
    <div id="tab1" class="tabcontent">Nội dung tab 1 </div>
    <div id="tab2" class="tabcontent">Nội dung tab 2</div>
    <div id="tab3" class="tabcontent">Nội dung tab 3</div>
  </div>
</div>

CSS:

<style type="text/css">
.tabbed {
    padding:30px 0 0;
    position:relative;
    width:70%;
    margin:0 auto;
}
.tabbed .tabcont {
    background:#eee;
    padding:20px;
}
.tabbed .tabcont .tabcontent {
    display:none;
    position:relative;
    line-height:20px;
}
.tabbed .tabcont .tabcontent img {
    max-width:100%;
}
.tabbed .tabcont .tabcontent.active {
    display:block;
}
.tabnav {
    position: absolute;
    left:0;
    top:-1px;
    width:100%;
    border-bottom:1px solid #eee;
}
.tabnav li {
    float:left;
}
.tabnav li a {
    height:30px;
    line-height:30px;
    padding:0 14px;
    font-size:18px;
    font-weight:bold;
    border-radius:5px 5px 0 0;
    display:block;
    color:#333;
}
.tabnav li.active a {
    background:#eee;
    color:#376405;
}
</style>

 

Và ta có đoạn Script tạo chức năng tab như sau:

<script type="text/javascript">
$(function(){
    $('.tabbed').find('.tabcontent:first').addClass('active');
    $('.tabbed').find('.tabnav li:first').addClass('active');
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Trong đoạn Script trên, việc xác định Menu và và nội dung được chọn và tạo ra trạng thái active dựa trên việc người dùng click vào menu tab và sau đó dựa trên thuộc tính href của thẻ a mà người dùng vừa click vào.

Tới đây, bạn đã tạo được chức năng tab nội dung. Tuy nhiên, một bất tiện ở đây là khi người dùng click vào 1 tab, nội dung và menu của tab đó đang ở trạng thái active. Nếu người dùng reload trang web lại thì trang thái active đó lại mất đi và trở về với tab active mặc định lúc đầu. Giờ đây yêu cầu là cần phải cho trình duyệt ghi nhớ tab mà người dùng đã click vào, khi reload trang thì trạng thái active vẫn giữ ở tab mà người dùng vừa click. Để thực hiện điều này chúng ta dùng ứng dụng localStorage trong HTML5, và ta có đoạn Script như sau:

<script type="text/javascript">
$(function(){

    if(localStorage.getItem('active'))
    {    
        $('.tabbed').find(localStorage.getItem('active')).addClass('active');
          $('.tabbed').find('a[href='+localStorage.getItem('active')+']').parent().addClass('active');

    }
    else
    {
        $('.tabbed').find('.tabcontent:first').addClass('active');
          $('.tabbed').find('.tabnav li:first').addClass('active');
    }
    $('.tabbed').find('.tabnav li').each(function(){
        $(this).click(function(){
            ntab = $(this).find('> a').attr('href');
            localStorage.setItem('active', ntab);
            $(this).parents('.tabbed').find('.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.tabbed').find(ntab).addClass('active');
            return false;
        });    
    });
})
</script>

Ở đoạn mã trên, ta sử dụng localStorage để lưu trữ thông tin active khi người dùng click vào menu tab. Sau đó, gọi ra thông tin này để xác định tab nào đã được người dùng click chọn. Nếu người dùng, chưa click chọn tab nào thì trang thái active sẽ nằm ở vị trí tab active mặc định.
Lưu ý một điều là chức năng localStorage là ứng dụng của HTML5, vì vậy một số trình duyệt đời cũ sẽ không hỗ trợ chức năng này (IE7).

Đến đây, bạn đã có thể tạo cho website của mình một ứng dụng tab nội dung tối ưu mà không cần mất nhiều thời gian và công sức. Bạn có thể tham khảo Demo trên trong bài viết hoặc download file mẫu về máy. Chúc bạn thành công.

 

dong-ho-cho-web

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:
    
    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:
    <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:
    <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.