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>
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;
}
