js技巧（二）

1.封装获取id：

function show(Id){

        var aa=document.getElementById(Id);

        return aa;

    }

调用：console.log(show("nu"));

2.生肖判断if，else，显示对应的图片

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    #box{

        font-size:150px;

        color:#ff00ff;

    }

  </style>

 </head>

 <body>

    <h1>生肖判断</h1>

    <form action="" >

        <p><input type="text" id="fm"></p>

        <p><input type="button" value="点击" onclick="sheng()"></p>

        <p><div id="box"></div></p>

    </form>

 </body>

 <script>

     function sheng(){

         var fm=document.getElementById("fm").value;

         var box=document.getElementById("box");

         var info;

         if(fm>2016||fm<0){

             info="重新输入";

         }

         else {

             fm=fm%12

             if(fm==0){

                 info="猴";

             }

             else if(fm==1){

                 info="鸡";

             }

             else if(fm==2){

                 info="狗";

             }

             else if(fm==3){

                 info="猪";

             }

             else if(fm==4){

                 info="鼠";

             }

             else if(fm==5){

                 info="牛";

             }

             else if(fm==6){

                 info="虎 ";

             }

             else if(fm==7){

                 info="兔";

             }

             else if(fm==8){

                 info="龙";

             }

             else if(fm==9){

                 info="蛇";

             }

             else if(fm==10){

                 info="马";

             }

             else if(fm==11){

                 info="羊";

             }

         }

         box.innerHTML=info;

     }

 </script>

</html>

或者用switch--case

function check(){

        var con=document.getElementById("content").value;

        var info;

        if (con>2016||con<0){

            info="你别闹了好吗";

        }

        else{

            con=con%12;

            switch(con){

                case 0:info="猴";break;

                case 1:info="鸡";break;

                case 2:info="狗";break;

                case 3:info="猪";break;

                case 4:info="鼠";break;

                case 5:info="牛";break;

                case 6:info="虎";break;

                case 7:info="兔";break;

                case 8:info="龙";break;

                case 9:info="蛇";break;

                case 10:info="马";break;

                case 11:info="羊";break;

            }

        }

    document.getElementById("boo").innerHTML=info;

    }

3.数组

创建数组的方式：

第一种： var a = [] ;

第二种: var b = new Array();

4.数组添加和删除

添加：

利用数组的长度，在数组的尾部插入新元素 length

push() 在数组的最后添加一个元素依然是有序数组

unshift() 在数组的最开始位置添加一个元素，依然是有序数组。

删除

　　改变数组长度删除其他元素，如果想要清空数组，可以将length设置为0

　　 pop() 删除数组的最后一个元素

　　shift () 删除数组的第一个元素

　　 delete 运算符不推荐使用，因为会变成稀疏数组

5.全选反选全不选

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

    aaa<input type="checkbox">

    aaa<input type="checkbox">

    aaa<input type="checkbox">

    aaa<input type="checkbox">

    aaa<input type="checkbox">

    aaa<input type="checkbox">

   <button onclick="alla()">全选</button>

    <button onclick="oppo()">反选</button>

    <button onclick="norn()">全不选</button>

</body>

<script>

    function getTag(tag){

        return document.getElementsByTagName(tag);

    }

    function alla(){

        for(var i=0;i<getTag("input").length;i++){

            getTag("input")[i].checked=true;

        }

    }

    function oppo(){

        for(var i=0;i<getTag("input").length;i++){

            // if(getTag("input")[i].checked==false){

            //     getTag("input")[i].checked=true;

            // }else{

            //     getTag("input")[i].checked=false;

            // }

            getTag("input")[i].checked=!getTag("input")[i].checked;

        }

    }

    function norn(){

        for(var i=0;i<getTag("input").length;i++){

            getTag("input")[i].checked=false;

        }

    }

</script>

</html>

查看数组索引值:

Object.keys(attr)

7.callee用法：

Tip：因为callee 是属于arguments的一个属性，所以在使用的时候前面必须要arguments.callee

　　callee是arguments对象的一个成员表示对函数对象本身的引用它有个length属性（代表形参的长度）

//callee可以打印其本身

function calleeDemo() {

    alert(arguments.callee);

}

//用于验证参数

function calleeLengthDemo(arg1, arg2) {

    if (arguments.length == arguments.callee.length) {

        window.alert("验证形参和实参长度正确！");

        return;

    } else {

        alert("实参长度：" + arguments.length);

        alert("形参长度： " + arguments.callee.length);

    }

}

//递归计算

var sum = function (n) {

    if (n < = 0)

        return 1;

    else

        return n ＋arguments.callee(n - 1)

}

caller
返回一个对函数的引用，该函数调用了当前函数。

functionName.caller

functionName 对象是所执行函数的名称。

说明
对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由 Javascript 程序的顶层调用的，那么 caller 包含的就是 null 。

function callerDemo() {

    if (arguments.caller) {

        var a = callerDemo.caller.toString();

        alert(a);

    } else {

        alert("this is a top function");

    }

}

function handleCaller() {

    callerDemo();

}

handleCaller();

function calleeDemo() {

    alert(arguments.callee);

}

calleeDemo();

巴特西

js技巧（二）

最新文章

热门文章