程序员人生 网站导航

JavaScript实现按键控制网页效果

栏目：jscript时间：2014-03-09 23:27:41

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


提示：可修改后代码再运行!

代码和注释：

function trick(e){
        if(typeof window.k=="undefined"){
            window.k=""
        }
        var e=e||event;
        //alert(e.keyCode);
        if(e.keyCode==116) window.k=""; //F5 清空重新计数
        window.k+=e.keyCode+",";
        if(window.k=="38,38,40,40,37,37,39,39,") {
            play();
            window.k=""; //执行play 同时清空
        }        
    }
    
    function play(){
        var bdy=document.getElementsByTagName("body")[0];
        var p=bdy.getElementsByTagName("p")[0];
        var h1=document.createElement("h1");
        h1.innerHTML="Hello!!!!!";
        bdy.className="bg";
        p.style.display="none";
        bdy.appendChild(h1);
        window.setTimeout("clean()",5000); //延时清理
    }
    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; //记录键值执行函数

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

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

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

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

最新技术推荐

1深入浅出Fetch API 带你入解应用场景及适用问题 2网页禁止复制内容的方法 3JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题 4js如何立即退出函数 5javascript事件：获取事件对象getEvent函数 6Firefox下frameset取不到值的解决方法 7JavaScript数组实例：点击逐条读取文字