Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Bài tập Jquery: Random số ngẫu nhiên
Bài tập Jquery: Random số ngẫu nhiên
Nguyễn Trung Hiếu
Share Code Web Company 2014

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

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. Làm sao để code quay số ngẫu nhiên đơn giản? 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 random quay số

Nhìn vào đề bài, để đơn giản, mình làm random quay 4 số ngẫu nhiên thôi nhé, còn 6 số thì 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 idgetit.

Sử dụng Jquery tạo code quay số ngẫu nhiên

Trước tiên ta tạo một hàm IsNumeric() để kiểm tra xem có phải số hay không? Hàm này sẽ kiểm tra số nhập vào trước khi thực hiện thủ tục Random quay số.

Ở trong đoạn code này, mình giới hạn các giá trị quay số chỉ từ 1 -> 9. Các bạn có thể thay đổi giá trị này với hai biến là numLownumHigh.

Còn lại là thủ tục tính toán random.

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

Style css

Code bên trên mình chỉ style đơn giản. Bạn có thể style lại cho đẹp hơn nhé! Hoặc có thể tham khảo một vài mẫu style tại đây:
Code CSS đẹp

Download

Bạn có thể tham khảo ngay tại link này mình đỡ phải upload file lên nhé. Rất dễ phải không nào!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}
%d bloggers like this: