首页 > 网络编程 > JavaScript > javascript技巧 > 网页彩蛋

JS 网页彩蛋实现代码

2009-09-07 21:01:25 作者：

显示一定时间后消失，刷新之后清空变量值，重新开始记录键值。程序的原理就是检测按键的键值，当达到预定条件时执行规定的函数。

<!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></title> 
<style type="text/css"> 
.bg{ background:url(http://nba.titan24.com/focus/kikx/images/sp.gif) repeat;} 
p{ text-align:center; color:#d00; padding:10px 0; } 
h1{ text-align:center; font-size:80px; color:#f06; line-height:120px;}

</style> 
</head>

<body> 
<p>按 &uarr; &uarr; &darr; &darr; &larr; &larr; &rarr; &rarr; </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="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; 
</script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JS 网页彩蛋 实现代码

JS 网页彩蛋实现代码