js---08函数 定时器 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
// 数字、字符串、布尔、函数、对象（元素\数组\json\null）、未定义
alert( fn1().length );//5
alert( typeof fn1() ); //string
function fn1(){
    // return 100;
    return 'miaov';
}

alert( fn2() );//返回函数体 function (b){alert(a+b);};
fn2(20)(10);
function fn2(a){
    return function (b){
        alert(a+b);    //30        
    };
}

fn3().onload = function (){
    document.body.innerHTML = 123;
};
function fn3(){
    return window;
}

alert(fn4());
function fn4(){
    // return ;   不加return，返回未定义
}

alert( fn5() );
function fn5(){
    return 123;
    alert(520);//不再执行
}
</script>


<script>
window.onload = function (){
    // var oBtn = document.getElementById('btn1');
    // var oDiv = document.getElementById('div1');
    $('btn1').onclick = function (){
        alert( $('div1').innerHTML );
    };
};
function $( id ){
    return document.getElementById( id );
}
</script>


<script>
fn1( 1,2,3 );            
function fn1( a,b,c ){}
function fn1(){//不写形参名字，也传进来了，arguments里面，
    //arguments => [ 1,2,3 ] —— 实参的集合
    alert( arguments );//object
    alert( arguments.length );
    alert( arguments[arguments.length-1] );
}

// 当函数的参数个数无法确定的时候：用 arguments
alert( sum( 1,2,3 ) );    // 6
alert( sum( 1,2,3,4 ) );// 10
function sum (){
    var n = 0;
    for( var i=0; i<arguments.length; i++ ){
        n += arguments[i];
    }
    return n;
}

var a = 1;
function fn2( a ){
    arguments[0] = 3;
    alert(a);// 3
    var a = 2;
    alert( arguments[0] );// 2
}
fn2(a);
alert(a);// 1                     
</script>




<script>
window.onload = function (){
    var miaov = document.getElementById('miaov');
    //定时执行的嵌套，2秒后出来，3秒后关闭
    setTimeout( function(){
        miaov.style.display = 'inline-block';
        setTimeout(function(){
            miaov.style.display = 'none';
        }, 3000);
        
    },  2000);
};
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('pic');
    var oImg = oDiv.getElementsByTagName('img')[0];
    var oSpan = oDiv.getElementsByTagName('span')[0];
    var oP = oDiv.getElementsByTagName('p')[0];
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    
    var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
    var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
    var num = 0;

    var timer = null;
    function autoPlay(){
        timer = setInterval(function(){
            num++;
            num%=arrText.length;
            fnTab();
        }, 1000);
    }
    // autoPlay();
    setTimeout( autoPlay, 2000 );
    oDiv.onmouseover = function (){
        clearTimeout( timer );//移开停止定时器
    };
    oDiv.onmouseout = autoPlay;//移上去执行定时器，autoPlay不要加括号，加括号表示返回值，
    for( var i=0; i<arrUrl.length; i++ ){
        oUl.innerHTML += '<li></li>';
    }
    // 初始化
    function fnTab(){
        oImg.src = arrUrl[num];//初始化为0张图片
        oSpan.innerHTML = 1+num+' / '+arrUrl.length;
        oP.innerHTML = arrText[num];//初始化为0个文字
        for( var i=0; i<aLi.length; i++ ){
            aLi[i].className = '';
        }
        aLi[num].className = 'active';
    }
    fnTab();
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].index = i;            // 索引值
        aLi[i].onclick = function (){
            num = this.index;
            fnTab();
        };
    }
};
</script>
</head>

<body>

<div id="pic">
    <img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
#qq { width:200px; height:400px; background:#F9C; }
#title { width:240px; height:180px; background:#FC6; position:absolute; top:10px; left:220px; display:none; }
</style>
<script src="miaov.js"></script>
<script>
$(function(){
    var qq = $('qq');
    var title = $('title');
    var timer = null;
    
    qq.onmouseover = show;
    qq.onmouseout = hide;
    
    title.onmouseover = show;
    title.onmouseout = hide;
    
    function show(){
        clearInterval( timer );//前面定时器开了，现在要关，不关显示不出来
        title.style.display = 'block';
    }
    function hide(){
        timer = setTimeout(function(){
            title.style.display = 'none';
        }, 200);
    }
});
</script>
</head>

<body>

<div id="qq"></div>
<div id="title"></div>

</body>
</html>

 

posted @ 2017-05-09 16:31  无天666  阅读(279)  评论(0)    收藏  举报