Bài tập Jquery: Random số ngẫu nhiên

Xem: 3079    Tải: 0   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

0 điểm   ( 6 đánh giá ) File đã được kiểm thử


Hôm vừa rồi mình có nhận được một email hỏi mình giúp đỡ về một bài tập Jquery, nay mới có thời gian ngồi nghịch tí toáy giúp bạn

Nội dung bài tập

Đề bài của bạn ấy gửi cho mình như sau:

Kết quả sổ số

Xây dựng trang cho phép hiển thị 6 số ngẫu nhiên. Khi người dùng nhấn nút quay số, thì 6 số này sẽ liên tục thay đổi. cho đến khi người dùng nhấn 1 lần nữa thì dừng quay và hiển thị 6 số vừa quay ra bên ngoài.

Giải quyết bài toán

Nhìn vào đề bài, để đơn giản, mình sử dụng cho 4 số thôi nhé, còn 6 số chắc tương tự. Hơn nữa, ở đây mình chỉ làm đơn giản, bạn có thể lên mạng tìm một số thư viện javascript giúp đỡ để có thể có thêm hiệu ứng quay số giống như sổ số ấy.

Thiết kế HTML

Như mình đã nói ở trên, chúng ta ở đây sử dụng 4 div với các id từ randomnumber1 tới randomnumber4. Kèm theo một nút quay số với id là getit.

<div id="page-wrap">        
        <div id="randomnumber1"></div>
        <div id="randomnumber2"></div>
        <div id="randomnumber3"></div>
        <div id="randomnumber4"></div>
    <button id="getit">Quay!</button>
 </div>
Sử dụng Jquery
function IsNumeric(n){
    return !isNaN(n);
}
 
$(function(){
    
    $("#getit").click(function() {
    
        var numLow = 1;
        var numHigh = 9;
        
        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
        
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        var numRand1 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        var numRand2 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        var numRand3 = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
        
        if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
            $("#randomnumber1").text(numRand);
            $("#randomnumber2").text(numRand1);
            $("#randomnumber3").text(numRand2);
            $("#randomnumber4").text(numRand3);
        } else {
            $("#randomnumber").text("Careful now...");
        }
        
        return false;
    });
    
    $("input[type=text]").each(function(){
        $(this).data("first-click", true);
    });
    
    $("input[type=text]").focus(function(){
      
        if ($(this).data("first-click")) {
            $(this).val("");
            $(this).data("first-click", false);
            $(this).css("color", "black");
        }
        
    });
    
});

Bạn có thể sử dụng bộ thư viện jquery của GoogleAPI để nhúng jquery vào cũng được, bản của mình sử dụng là 1.7.2 và jQuery UI 1.8.18

Style css

#getit{float:left;}
#randomnumber1,#randomnumber2,#randomnumber3,#randomnumber4{
    padding:5px;
    width:20px;
    height:20px;
    margin:10px;
    float:left;
    text-align:center;
    align:middle;
    font-weight:bold;
}
#randomnumber1{
    background:#333;
    color:white;
}
#randomnumber2{
    background:#ccc;
}
#randomnumber3{
    background:yellow;
}
#randomnumber4{
    background:red;
}
Bạn có thể style lại cho đẹp hơn nhé !
Bạn có thể tham khảo ngay tại link này mình đỡ phải upload file lên nhé.

Bài tập Jquery: Random số ngẫu nhiên

Bài tập Jquery: Random số ngẫu nhiên Đăng ngày 09-09-2014  Nhìn vào đề bài, để đơn giản, mình sử dụng cho 4 số thôi nhé, còn 6 số chắc tương tự. Hơn nữa, ở đây mình chỉ làm đơn giản, bạn có thể lên mạng tìm một số thư viện javascript giúp đỡ để có thể có thêm hiệu ứng quay số giống như sổ số ấy. 5/10 3079

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn