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>
View Code

或者用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;
    }
View Code

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>
View Code

 6.

查看数组索引值:

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();
View Code

 

posted @ 2017-03-15 23:16  江山代有才人出  阅读(118)  评论(0编辑  收藏  举报
第一,有梦想。一个人最富有的时候是有梦想,有梦想是最开心的。第二,要坚持自己的梦想。有梦想的人非常多,但能够坚持的人却非常少。阿里巴巴能够成功的原因是因为我们坚持下来。在互联网激烈的竞争环境里,我们还在,是因为我们坚持,并不是因为我们聪明。有时候傻坚持比不坚持要好得多。——马云