Mình tên Triết, 25 tuổi đến từ Tây Ninh. Đã biết internet 6 năm nay rồi mà mới "chơi" blog lần dầu tiên. Khả năng của mình : - Thành thạo HTML - CSS (HTML5 - CSS3).- Một chút Javascript và jQuery.- Một chút PHP + CI Framework.- Một chút vốn tiếng Anh ^^ .. Mục đích mình lập blog này để Việt hóa những từ khóa mình hay dùng để tìm kiếm trên Google - Bing.. Chia sẽ để a/e tìm kiếm trên Internet với ngôn ngữ Mẹ chuẩn xác và nhanh chóng hơn ...
//#pass là input chứa Password #repass là input nhập lại password
$("#repass").change(function(){
var p = $("#pass").val();
if($(this).val() != p){
alert("Nhập lại mật khẩu không chính xác ! Vui lòng kiểm tra lại .");
$("#repass").val("").parent().addClass("has-error");
} else{
$("#repass").parent().removeClass("has-error");
}
})
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="pass">Mật khẩu</label>
<div class="col-md-5">
<input id="pass" name="pass" placeholder="" class="form-control input-md" required="" type="password">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="repass">Nhập lại mật khẩu</label>
<div class="col-md-5">
<input id="repass" name="repass" placeholder="" class="form-control input-md" required="" type="password">
</div>
</div>
animate.css is a bunch of cool, fun, and cross-browser
animations for you to use in your projects. Great for emphasis, home
pages, sliders, and general just-add-water-awesomeness.
Hiệu ứng chuyển động mượt mà, nhiều hiệu ứng để chọn lựa, hỗ trợ Cross-browser tốt..Với jQuery tác giả có ví dụ như thế này :<head> <link rel="stylesheet" href="animate.min.css"> </head>
animated là bắt buộc tiếp theo là tên của hiệu ứng các bạn có thể tham khảo bên dưới...$('#yourElement').addClass('animated bounceOutLeft');
 |
| Giao diện chính khi chơi game. |
<div class="wrap">
<h3 class="start"></h3>
<div class="fruit-show">
</div>
<div class="point-board">
<b>
<span class="point">0</span> pts - Highscore : <span class="high">0</span> pts
</b>
</div>
<div class="time"><img src="" alt=""></div>
<div class="clear"></div>
<div class="fruit-choice">
var hs = localStorage.getItem("highScore");Dùng var để khai báo các biến...
$(document).ready(function(){
$(".high").html(hs);
})
var end; // biến gọi gameover dùng setTimeout
var score = 0; // điểm
var step = 0; // đếm bước nhảy để kiểm tra xem đúng/sai
var n;
var last; // biến chứa giá trị của mảng qF
var aF = ['chanh','dao','dau','dua','nho','tao','xoai']; // 2 mảng aF và qF chứa tên quả, tên ảnh nằm trong thư mục /img/
var qF = ['chanh','dao','dau','dua','nho','tao','xoai'];
var ans = []; // khi user chọn thì đáp án sẽ push vào đây.. để mình kiểm tra..
$(".start").tap(function(){* Khi click vào class start thì class start sẽ addClass [Thêm class] vào chính nó với class name là : "animated zoomOutUp". function này có tác dụng thêm animated vào class start làm nó sinh động hơn.. :D
$(this).addClass("animated zoomOutUp");
start();
})
function start(){
n = (Math.floor(Math.random()*6)+1);
ans.push(qF[n]);
$(".fruit-show").html("<img class='q' src='img/"+qF[n]+".png'>");
$(".q").addClass("animated flipInY");
setTimeout(core,3000);
}
vd : nếu n = 2 => qF[2] console.log(qF[2]) == dau ... đếm từ 0 và 2 là vị trí của Dâu...-Sau khi có được n ta xét tiếp đến dòng : ans.push(qF[n]);
function core(){Nếu bạn để ý sẽ thấy core() không khác gì start() là mấy... vì core() chỉ lặp đi lặp lại như start()... chỉ khác ở vài điểm :
$(".q").addClass("animated flipOutY");
n = (Math.floor(Math.random()*6)+1);
ans.push(qF[n]);
$(".fruit-show").html("<img class='q' src='img/"+qF[n]+".png'>");
$(".q").addClass("animated flipInY");
ask();
step++;
}
function ask(){
$(".fruit-choice").html('');
shuffle(aF);
for(var i = 0; i < 7; i++){
$(".fruit-choice").append("<img class='a' data-value='"+aF[i]+"' src='img/"+aF[i]+".png'>");
}
$(".time img").attr("src",'count.gif');
end = setTimeout(function(){
$(".time img").attr("src",'null');
over();
},3000);
}
.aPhần này chỉ là phụ.. để tạo thêm time cho game.. mình để setTimeout 3giây .. sau 3 giây thì gameover... nếu click sai cũng over() ...
.b
.c
Ta dùng append(".d")..thì ta sẽ được
.a
.b
.c
.d <-- nằm cuối..
$(".time img").attr("src",'count.gif');Mình tạm ngưng ở đây - từ từ mình sẽ update tiếp.. ... nếu có gì thắc mắc có thể ask mình trên fb.. rất vui lòng được giúp đỡ các bạn...ở đây mình nói hơi chung chung nên có thể các bạn khó hiểu.. nhưng bắt tay vào thực hành các phương pháp trên thì các bạn có thể làm những game đơn giản kiểu như vậy... rất dễ phải không ? hẹn gặp lại...
end = setTimeout(function(){
$(".time img").attr("src",'null');
over();
},3000);
Mẫu dùng Switch trong jQuery var cnt = $("#div1 p").length; switch (true) { case (cnt >= 10 && cnt <= 20): alert('10'); break; case (cnt >= 21 && cnt <= 30): alert('21'); break; case (cnt >= 31 && cnt <= 40): break; default: alert('>41'); }