<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> // 数字、字符串、布尔、函数、对象（元素数组json ull）、未定义 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 { 400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; } #pic img { 400px; height:500px; } #pic ul { 40px; position:absolute; top:0; right:-50px; } #pic li { 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; 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 { 200px; height:400px; background:#F9C; } #title { 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>