當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
JS一起学04:函数返回值、定时器、随机数、自动播放的幻灯片
生活随笔
收集整理的這篇文章主要介紹了
JS一起学04:函数返回值、定时器、随机数、自动播放的幻灯片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、函數返回值----將相應的值返回到函數調用的地方 1.?可以不寫返回值 2.?可以沒有return,如果不返回,默認返回undefined 3.?本函數內,renturn之后的JS語句不再執行,跳出 4.?可以返回任意類型 例一: window.οnlοad=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.οnclick=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.οnclick=function(){ timer=setInterval(function(){ alert('a') },3000); } oBtn2.οnclick=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.οnclick=function(){ oDiv1.style.display=oShadow.style.display='block'; } oShadow.οnclick=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.οnlοad=function(){ var oBtn=document.getElementById('btn'); var oBox=document.getElementById('box'); var arr=[]; oBox.innerHTML=''; oBtn.οnclick=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.οnlοad=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.οnlοad=function(){ var oBox=document.getElementById('box'); oBox.οnclick=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].οnclick=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.οnmοuseοver=function(){ clearInterval(timer); } oBox.οnmοuseοut=function(){ timer=setInterval(f,1000); }
總結
以上是生活随笔為你收集整理的JS一起学04:函数返回值、定时器、随机数、自动播放的幻灯片的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS一起学03:js组成、下拉+text
- 下一篇: JS一起学05:Date对象、封闭空间、