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

Sử dụng Jquery

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

Bạn có thể style lại cho đẹp hơn nhé!

Download

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

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

http://sharecodeweb.net/?s={search_term_string}