软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > JavaScript实现按键控制网页效果

JavaScript实现按键控制网页效果

  烈火网(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; //记录键值执行函数

    相关阅读
    栏目导航
    推荐软件