JS一起学04：函数返回值、定时器、随机数、自动播放的幻灯片

一、函数返回值----将相应的值返回到函数调用的地方

1. 可以不写返回值

2. 可以没有return，如果不返回，默认返回undefined

3. 本函数内，renturn之后的JS语句不再执行，跳出

4. 可以返回任意类型

例一：

window.onload=function() { 

 function fn() { 

      var a=4;

      alert(123);

      return a+1;

      alert(456);

 };

 //默认返回undefined

 alert( fn() );

};

例二：

function fn(){ 

    var a=4; 

    return [a];

}

var n=fn();

alert()n[0];

例三：

 function fn(){

      var a=4;

      return function(){

           alert(a);

      };

 };

 //默认返回undefined

 //var n=fn(); //闭包

 fn()();

5. 函数预解析，函数可以先用后定义---->同一个作用域下

var oBtn=document.getElementById('btn');

oBtn.onclick=function(){

    fn(3);

}

function fn(a){     //预解析

    alert(a);

}

6. 局部函数也会预解析：当JS执行到这个函数的时候才会预解析。

fn();

function fn(){

    fn2();

    function fn2(){

        alert(444);

    }

}    

7. 变量也会预解析,可以理解为提前设定 var a; 只有var，才会预解析

8. return时函数就结束了，return 后面的代码不会执行。没有return 时，返回undefined

例一：

var a=5;

function fn(){

    alert(a);

    var a=4;

    alert(a);

}

fn(a);

alert(a);   //全局变量不受局部影响

例二：

var a=5;

function fn(){

    alert(a);   //5

    a=4;

    alert(a);  //4

}

fn();

alert(a);   //4

9. 一个函数应该只返回一种类型的值

        function show(a,b){

            return a+b;

        }

        alert(show(11,12));

变量、参数、返回值——可以装任何东西（数字、字符串、元素、数组、函数）

二、定时器

定时器---同一个对象 ： 每次用之前先清掉上一次

定时器中不能用this

1. 开启定时器

  (1) setInterval  间隔型

  (2) setTimeout 延时型

            可以在函数内部调用函数自己

                function f(){

                    alert(123)

                    setTimeout(f,1000);

                }

                setTimeout(f,1000);

2. 停止定时器

clearInterval / clearTimeout

    var oBtn1=document.getElementById('btn1');

    var oBtn2=document.getElementById('btn2');

    oBtn1.onclick=function(){

        timer=setInterval(function(){

            alert('a')

        },3000);

    }

     oBtn2.onclick=function(){

        clearInterval(timer);

    }

3. var oBox=document.getElementById('box');

    function f(){

        alert(123);

    }

    // setInterval('alert(11)',500);   //第一个参数也可以放字符串，相当于eval

    setInterval(f,500);

4.闪烁提醒

    var timer; 

    oBtn.onclick=function(){

        oDiv1.style.display=oShadow.style.display='block';

    }

    oShadow.onclick=function(){

        clearInterval(timer);

        timer=setInterval(function(){

            var n=0;

            n++;

            n%2==0?oH1.style.background='#ccc':oH1.style.background='#f00';

            n=20&&clearInterval(timer);

        },50);

    }

5. 双色球

function findSame(arr,n){

     for(var i=0;i<arr.length;i++){

          if(arr[i]==n){

               return false;

          }

          return true;

     }

}

function rnd(n,m){

     return parseInt(Math.random()*(m-n+1)+n);

}

function toDou(n){

     if(n<10){

          return '0'+n;

     }

     return ''+n;

}

window.onload=function(){

     var oBtn=document.getElementById('btn');

     var oBox=document.getElementById('box');

     var arr=[];

     oBox.innerHTML='';

     oBtn.onclick=function(){

          while(arr.length<6){

               var number=rnd(1,33);

               if(findSame(arr,number)){

                    arr[arr.length]=toDou(number);

               }

           }

            arr[arr.length]=toDou(rnd(1,16));

            for(var i=0;i<arr.length;i++){

                var Class=i==arr.length-1?'blue':'';

                oBox.innerHTML+='<span class="'+Class+'">'+arr[i]+'</span>';

           };

      }

}

6. 延时提示框

    (1) 移除延时隐藏----移入下面的div后，还是隐藏了

    (2) 简化代码----把长得像的变成长得一样的。合并两个相同的mouseover和mouseout。连等。

三、随机数

1. Math：处理数学任务

 0    <=   Math.random()   <1

0     <=   Math.random()*100  <100

2. 公式：求n-m(不会出现m)        Math.random()*(m-n)+n

              求n-m(出现m)               Math.random()*(m-n+1)+n

              Math.random()*（大-小）+小

例一：随机数

window.onload=function(){

    for(var i=0;i<100;i++){

       //0-1      document.write(Math.random()+'<br />');

      //0-100   document.write(Math.random()*100+'<br />');

     //10-30   document.write(Math.random()*20+10+'<br />');

     //5-20包括20  document.write(Math.random()*(20-5+1)+5+'<br />');

    }

}

例二：随机颜色

window.onload=function(){

    var oBox=document.getElementById('box');

    oBox.onclick=function(){

        var r=rnd(0,255); 

        var g=rnd(0,255); 

        var b=rnd(0,255); 

        this.style.background='rgb('+r+','+g+','+b+')';

    }

} 

function rnd(n,m){

    return parseInt(Math.random()*(m-n)+n);

}

例三：彩票

function rnd(n,m){

    return parseInt(n+Math.random()*(m-n));

}

var arr=[];

var num;

while(arr.length<6){

    num=rnd(1,33);

    if(findInArr(n,m){

        arr.push(num);

    }

}

alert(arr);

function findInArr(arr,n){

    for(var i=0;i<arr.length;i++){

        if(arr[i]==n){

            return false;

        }

    }

    return true;

}

四、自动播放的幻灯片

var oBox=document.getElementById('box');

var aBtn=oBox.getElementsByTagName('input');

var aDiv=oBox.getElementsByTagName('div');

for(var i=0;i<aBtn.length;i++){

     aBtn[i].index=i;

     aBtn[i].onclick=function(){

          for(var i=0;i<aBtn.length;i++){

               aBtn[i].className='';

               aDiv[i].className='';

          }

          this.className='active';

          aDiv[this.index].className='show';

     }

     if(aBtn[i].className=='active') iNow=i; 

}

function f(){

    iNow++;

    if(iNow==aBtn.length)iNow=0;

    for(var i=0;i<aBtn.length;i++){

        aBtn[i].className='';

        aDiv[i].className='';

    }

    aBtn[iNow].className='active';

    aDiv[iNow].className='show';

}

var timer=setInterval(f,1000);

oBox.onmouseover=function(){

    clearInterval(timer);

}

oBox.onmouseout=function(){

    timer=setInterval(f,1000);

}