js---08函數 定時器
阿新 • • 發佈：2017-05-09
utf 返回值 right mouseout clear time play nts length
<!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>
js---08函數 定時器