Javascript Konami Code,FadeIn/FadeOut Div
问题描述:
JavaScript的优点吗?我有一个div,在输入konami代码后我已经淡入,还有一个按钮,您可以点击淡出div,但我必须刷新才能重新输入konami代码。我希望能够在不刷新页面的情况下持续输入konami代码。理想情况下,我想删除按钮,但我似乎无法使用if语句来运行。Javascript Konami Code,FadeIn/FadeOut Div
这是我到目前为止有:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type= "text/javascript">
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0)
{
$(document).unbind('keydown',arguments.callee);
$(document).ready(function()
{
$(".konami").fadeIn(1000);
});
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$(".konami2").fadeOut(1000);
});
});
</script>
<div class ="konami" style="display: none">
<p class ="konami2">
Hello! Type "bye" to remove!
</p>
<button class="btn1">Fade out</button>
</div>
答
如果空当用户在键输入你的按键历史数组,应该让这个进程重复。所以,与其
$(document).unbind('keydown',arguments.callee);
您可以简单地这样做
kkeys = [];
当然,你应该决定什么时候会发生什么在代码的用户类型的第二次。这是一个版本,切换你的div的可见性。请注意,我升级了您的jquery版本以支持fadeToggle函数。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
var kkeys = [];
var konami = "38,38,40,40,37,39,37,39,66,65,13";
$(document).keydown(function(e) {
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0)
{
kkeys = [];
$(".konami").fadeToggle(1000);
}
});
</script>
<div class="konami" style="display: none">
<p class="konami2">
Hello! Type the code again to remove!
</p>
</div>
答
我给它一个尝试,我希望这是有益的:
$(document).ready(function(){
//why do you need to press enter btw? "13" keyCode
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65,13";
var bkeys = []; var bye = "66,89,69";
$(this).keydown(function(e) {
// if konami
kkeys.push(e.keyCode);
if (kkeys.toString().indexOf(konami) >= 0)
{
$(".konami").fadeIn(1000);
kkeys = [];
}
// "bye"
bkeys.push(e.keyCode);
if (bkeys.toString().indexOf(bye) >= 0)
{
$(".konami").fadeOut(1000);
bkeys = [];
}
});
// manual fade out using button click
// no need to type to hide stuff
$(".btn1").click(function(){
$(".konami").fadeOut(1000);
});
});
+0
就“13”键码而言,我觉得Konami Code应该包含enter作为“开始”按钮。这个工作也很好,但是没有这个按钮让事情看起来更整齐一些。 非常感谢您的建议。 – Rich 2011-05-14 07:59:11
这一个效果很好。我甚至没有意识到我正在使用旧的JQuery。谢谢一堆。我真的只是计划显示一个小的.gif动画,但我希望能够在显示后隐藏它。 fadeToggle绝对看起来比fadeIn和fadeOut更好。 – Rich 2011-05-14 07:58:52
非常感谢...这是我在网上找到的最好/最简单的实现。 – 2012-11-24 05:59:49