JS_ECMA基本语法中的几种封装的小函数-1

今天给大家介绍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.　

JS_ECMA基本语法中的几种封装的小函数-1

推荐阅读