您当前位置：首页 > web前端 > jscript > JavaScript实现按键控制网页效果

JavaScript实现按键控制网页效果

来源：程序员人生发布时间：2014-03-09 23:27:41 阅读次数：2439次

　　网(LieHuo.Net)教程这篇文章之后感觉挺有意思的，就自己写了个网页彩蛋原文提供的代码很简洁，实际使用中自己又增加了一点控制部分，比如显示一定时间后消失，刷新之后清空变量值，重新开始记录键值。程序的原理就是检测按键的键值，当达到预定条件时执行规定的函数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript实现按键控制网页效果 - 网 - 关注站长，建设互联网！</title><style type="text/css">.bg{ background:url(http://www.wfuyu.com/uploads/userup/92/liehuo_back.gif) repeat;}p{ text-align:center; color:#d00; font-weight:bold; padding:10px 0; }h1{ text-align:center; font-size:80px; color:#000; line-height:120px;}</style></head><body><p> </p><p> </p><p>请顺序敲击下列按键，你就会看到效果了！</p><p> ↑ ↑ ↓ ↓ ← ← → → </p></body><script type="text/javascript"> function trick(e){ if(typeof window.k=="undefined"){ window.k="" } var e=e||event; //alert(e.keyCode); if(e.keyCode==116) window.k=""; window.k+=e.keyCode+","; if(window.k=="38,38,40,40,37,37,39,39,") { play(); window.k=""; } } function play(){ var bdy=document.getElementsByTagName("body")[0]; var p=bdy.getElementsByTagName("p")[0]; var h1=document.createElement("h1"); h1.innerHTML="欢迎访问网 www.wfuyu.com"; bdy.className="bg"; p.style.display="none"; bdy.appendChild(h1); window.setTimeout("clean()",6000); } function clean(){ var bdy=document.getElementsByTagName("body")[0]; var p=bdy.getElementsByTagName("p")[0]; bdy.className=""; p.style.display=""; var h1=bdy.getElementsByTagName("h1")[0]; bdy.removeChild(h1); } document.onkeydown=trick;</script></html>
提示：可修改后代码再运行!

代码和注释：

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 javascript 判断ie与非ie浏览器的几种方法

下一篇 详细分析网站运营策划的方方面面

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点