首页 > 代码库 > JS基础闯关大作战

JS基础闯关大作战

2024-07-22 13:06:08   220人阅读

第一关：
<script type ="text/javascript">

     //声明一个函数，求两个数的和，测试你声明的函数
     function sum(a ,b){
         return a+b ;
    }
    document.write (sum(2,3 ));

</script>


第二关：
<script type ="text/javascript">

     //声明一个函数，求任意个数的和，测试你声明的函数
    document.write (sum(2,3 ,7)+"<br />" );
    document.write (sum(2,3 ,7,4,3 ,1)+"<br />" );
    document.write (sum("Hello" ," ","Tom" )+"<br />");
    
     function sum () {
         var result = 0;
         //函数实际调用执行时传入的参数，可以从 arguments伪数组中获取
         for(var i = 0 ; i < arguments.length ; i++) {
            result += arguments [i];
         }
         return result;
    }

</script>


第三关：

<script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return [23,true ,"恭喜通过第 03关!" ];
    }
    
     //如何得到"恭喜通过第 03关!" ？
    document.write (fun01()[2]);

</script>

第四关：
<script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return {
            stuName : "Tom",
            stuAge : 12,
            stuWords : "恭喜通过第 04关!"
         };
    }
    
     //如何得到"恭喜通过第 04关!" ？
    document.write (fun01().stuWords);

</script>



第五关：

<script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return function (){
             return " 恭喜通过第 05关!" ;
         };
    }
    
     //如何得到"恭喜通过第 05关!" ？
    document.write (fun01()());

</script>


第六关：

<script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return {
            sayHello : function (){
                 return " 恭喜通过第 06关!" ;
             }
         };
    }
    
     //如何得到"恭喜通过第 06关!" ？
    document.write (fun01().sayHello());

</script>

第七关：
  <script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return "abc" ;
    }
    
    fun01.subFun = function(){
         return " 恭喜通过第 07关!" ;
    }
    
     //如何得到"恭喜通过第 07关!" ？
    document.write (fun01.subFun ());

</script>   


第八关：
<script type ="text/javascript">

     //已有函数如下
     function fun01(){
         return "abc" ;
    }
    
    fun01.subObj = {
        subFun : function (){
             return " 恭喜通过第 08关!" ;
         }
    };
    
     //如何得到"恭喜通过第 08关!" ？
    document.write (fun01.subObj.subFun ());

</script>

第九关：
<script type ="text/javascript">

     //已有函数如下
    (function (w ){
        w.jQuery = function(){
             return " 恭喜通过第 09关!" ;
         };
    })(window);
    
     //如何得到"恭喜通过第 09关!" ？
    document.write (window.jQuery ());

</script>

第十关：
<script type ="text/javascript">

     //已有函数如下
    (function (w ){
        w.$ = function(){
             return {
                text : function(){
                     return " 恭喜通过第 10关!" ;
                 }
             };
         }
    })(window);
    
     //如何得到"恭喜通过第 10关!" ？
    document.write ($().text());

</script>





第十一关；
<script type ="text/javascript">

     //已有函数如下
    (function (w ){
        w.$ = function(){
             return function(){
                 return " 恭喜通过第 11关!" ;
             };
         }
    })(window);
    
     //如何得到"恭喜通过第 11关!" ？
    document.write (window.$()());

</script>

第十二关：【boss来了···】
<script type ="text/javascript">

     //已有函数如下
    (function (w ){
        w.$ = function(f){
             return f();
         }
    })(window);
    
     function sayHello(){
         return " 恭喜通过第 12关!" ;
    }
    
     //如何得到"恭喜通过第 12关!" ？不允许直接调用 sayHello
    document.write (window.$(sayHello));

</script>


第十三关：
<script type ="text/javascript">
     //已有函数如下
    (function (w ){
        w.$ = function(id){
             return core(document.getElementById (id));
         }
        
         function core(dom ){
             var obj = {
                    element : dom,
                    text : function () {
                         return this.element.firstChild.nodeValue;
                     }
                 };
            obj.text ();
             return obj;
         }
        
    })(window);

    window.onload = function(){
        
         //如何得到"恭喜通过第 13关!" ？
        alert ($("btn" ).text ());
    }

</script>
</head>
<body>

    <button id="btn"> 恭喜通过第13关 !</button>

</body>
</html>


第十四关：【大boss】

<script type ="text/javascript">
     //已有函数如下
    (function (w){
        w.$ = function(argument){
             if(argument instanceof Function){
                window.onload = argument ;
             }else if(argument instanceof String || typeof argument == "string"){
                 var ele = document.getElementById(argument );
                 return $(ele );
             }else if(argument instanceof Element){
                 return {
                    ele : argument ,
                    text : function(){
                         return this.ele.firstChild.nodeValue;
                     }
                 };
             }
         }
    })(window);
    
     //如何在页面加载完成时得到“恭喜通过第 14关! ”？
    $(function (){
        alert ($("btn" ).text ());
    });
    
     /* window.onload = function(){
        alert("ttt");
    }; */

</script>
</head>
<body>

    <button id="btn"> 恭喜通过第14关 !</button>

</body>






第十四关：【终极boss】

<script type ="text/javascript">
     //已有函数如下
    (function (w){
        w.$ = function(argument){
             if(argument instanceof Function){
                window.onload = argument ;
             }else if(argument instanceof String || typeof argument == "string"){
                 var ele = document.getElementById(argument );
                 return $(ele );
             }else if(argument instanceof Element){
                 return {
                    ele : argument ,
                    text : function(){
                         return this.ele.firstChild.nodeValue;
                     },
                    click : function(callBack){
                        this.ele.onclick = callBack ;
                     }
                 };
             }
         }
    })(window);
    
     //如何在点击按钮后弹出“恭喜通过第 15关! ”？
    $(function (){
        $ ("btn" ).click (function(){
            alert ($(this ).text ());
             //this.firstChild.nodeValue;
         });
         /* ele.onclick = function(){
            
        }; */
    });

</script>


------恭喜你顺利通关！----


JS基础闯关大作战


联系
我们