今天給大家介紹js ECMA中幾個封裝的小函數以及一些常用的函數小案例； 1，找重覆的函數 2 隨機數函數 3 補零的函數 4 求和 5 獲取非行間樣式的函數.html 下麵再給大家介紹幾個使用的案例 1 雙色球 2 升級版全選（類似於購物車的效果） 3 升級版本的選項卡 好了 今天就給大家分享到這 ...
今天給大家介紹js ECMA中幾個封裝的小函數以及一些常用的函數小案例；
1，找重覆的函數
<script>
//在數組裡面找重覆；
function findInArr(n,arr){
for(var i=0; i< arr.length; i++){
if(arr[i]==n){
return true;
}
}
return false;
}
</script>
2 隨機數函數
<script>
function rnd(n,m) {
return parseInt(Math.random()*(m-n)+n)
}
</script>
3 補零的函數
<script>
function addZero(n){
return n<10 ? '0'+n : ''+n;
}
</script>
4 求和
<script>
function sum(){
var res=0;
for(var i=0;i<arguments.length;i++){
res+=arguments[i];
}
return res;
}
alert(sum(1,2,5,7,9))
</script>
5 獲取非行間樣式的函數.html
<script>
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
</script>
下麵再給大家介紹幾個使用的案例
1 雙色球
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;background: red;color: white;font-weight: bold;font-size: 35px;
border-radius:50%;
text-align: center;
line-height: 100px;
float: left;
margin:10px;
}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random()*(m-n)+n);
}
function findInArr(n,arr){
for(var i=0;i<arr.length;i++){
if(arr[i]==n){
return true;
}
}
return false;
}
function addZero(n){
return n<10 ? '0'+n : ''+n;
}
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
var oBtn=document.getElementById('btn');
var timer=null;
tab();
oBtn.onclick=function(){
clearInterval(timer);
timer=setInterval(tab,10);
setTimeout(function tab(){
clearInterval(timer);
},1000)
};
function tab(){
var arr=[];
while(arr.length<8){
var n=addZero(rnd(1,34));
if(findInArr(n,arr)==false){
arr.push(n);
}
}
for(var i=0;i<aDiv.length;i++){
aDiv[i].innerHTML=arr[i];
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div style="background: blue"></div>
<input type="button" value="搖號" name="" id="btn">
</body>
</html>
2 升級版全選（類似於購物車的效果）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn');
var aInput=document.getElementsByTagName('input');
var iNow=0;
oBtn.onclick=function(){
for(var i=1;i<aInput.length;i++){
if(oBtn.checked==true){
aInput[i].checked=true;
iNow=aInput.length-1;
}else{
aInput[i].checked=false;
iNow = 0;
}
}
document.title=iNow;
};
for(var i=1;i<aInput.length;i++){
aInput[i].onclick=function(){
if(this.checked==true){
iNow++;
}else{
iNow--;
}
document.title=iNow;
if(iNow==aInput.length-1){
oBtn.checked=true;
}else{
oBtn.checked=false;
}
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="" id="btn"/>
<hr>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
<input type="checkbox" name="" id=""/>
</body>
</html>
3 升級版本的選項卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oBtn=document.getElementById('btn'); var aInput=document.getElementsByTagName('input'); var iNow=0; oBtn.onclick=function(){ for(var i=1;i<aInput.length;i++){ if(oBtn.checked==true){ aInput[i].checked=true; iNow=aInput.length-1; }else{ aInput[i].checked=false; iNow = 0; } } document.title=iNow; }; for(var i=1;i<aInput.length;i++){ aInput[i].onclick=function(){ if(this.checked==true){ iNow++; }else{ iNow--; } document.title=iNow; if(iNow==aInput.length-1){ oBtn.checked=true; }else{ oBtn.checked=false; } } } } </script> </head> <body> <input type="checkbox" name="" id="btn"/> <hr> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> <input type="checkbox" name="" id=""/> </body> </html>
好了 今天就給大家分享到這裡，明天再繼續給大家分享別的小方法以及函數；謝謝大家！
Never too old to learn.
