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

            oBtn.onclick=function(){

                 for(var i=;i<aInput.length;i++){

                     if(oBtn.checked==true){

                         aInput[i].checked=true;

                         iNow=aInput.length-;

                     }else{

                         aInput[i].checked=false;

                         iNow = ;

                     }

                 }

                document.title=iNow;

            };

            for(var i=;i<aInput.length;i++){

                aInput[i].onclick=function(){

                    if(this.checked==true){

                        iNow++;

                    }else{

                        iNow--;

                    }

                    document.title=iNow;

                    if(iNow==aInput.length-){

                        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的更多相关文章

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

    大家好!今天继续给大家写一下ECMA中的剩下的小函数以及实用的实例: 首先先给大家说一下字符串.数组.数学方法以及json的一点小知识点: 字符串方法: str.length str.charAt(i ...

  2. JS_ECMA基本语法中的几种封装的小函数

      先来回顾一下我们的字符串: 字符串方法: str.length str.charAt(i):取字符串中的某一个; str.indexOf('e');找第一个出现的位置;找不到返回-1; str.l ...

  3. axios在vue项目中的一种封装方法

    记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...

  4. SQL中的5种常用的聚集函数

    首先你要知道 where->group by->having->order by/limit  ,这个就是写sql语句时的顺序  常用的5个聚集函数: Max             ...

  5. MySQL存储过程中的3种循环,存储过程的基本语法,ORACLE与MYSQL的存储过程/函数的使用区别，退出存储过程方法

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...

  6. Shell中的(),{}几种语法用法-单独总结

    shell中的(),{}几种语法用法 查看脚本语法是否有错误: bash -n modify_suffix.sh 跟踪执行 sh -x modify_suffix.sh aaa 1. ${var} 2 ...

  7. 探究JavaScript中的五种事件处理程序

    探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务 ...

  8. 【转】UML中的几种关系详细解析

    UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...

  9. C++ 炼气期之基本结构语法中的底层逻辑

    1. 前言 从语言的分类角度而言,C++是一种非常特殊的存在.属于高级语言范畴,但又具有低级语言的直接访问硬件的能力,这也成就了C++语言的另类性,因保留有其原始特性,其语法并不象其它高级语言一样易理 ...

随机推荐

  1. crontab用法与实例

    导读 在Linux系统的实际使用中,可能会经常碰到让系统在某个特定时间执行某些任务的情况,比如定时采集服务器的状态信息.负载状况:定时执行某些任务/脚本来对远端进行数据采集等.这里将介绍下cronta ...

  2. phpcms 根据条件调取内容

    asdasdsd <script> 正则 截取 function getUrlParam(name) { var reg = new RegExp("(^|&)" ...

  3. iOS 简单音乐播放器 界面搭建

    如图搭建一个音乐播放器界面,具备以下几个简单功能: 1,界面协调,整洁. 2,点击播放,控制进度条. 3.三收藏歌曲,点击收藏,心形收藏标志颜色加深. 4,左右按钮,切换歌曲图片和标题. 5,点击中间 ...

  4. Opencv CamShift+Kalman目标跟踪

    #include "stdio.h" #include "string.h" #include "iostream" #include &q ...

  5. HDU 1710 二叉树三种遍历

    Binary Tree Traversals Problem Description A binary tree is a finite set of vertices that is either ...

  6. Octopress博客使用

    在C:\DevKit\octopress目录下 执行如下指令 rake preview 打开浏览器 http://localhost:4000/ 重新生成 rake generate 部署 rake ...

  7. 使用Gitosis搭建Git服务器

    使用Gitosis搭建Git服务器 作者: JeremyWei | 可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明 网址: http://weizhifeng.net/build- ...

  8. kill新号专题

    一.在tomcat启动脚本中看到,kill  -3

  9. 【Networking】go get 失败，代理配置

    推荐VPN: https://vpnso.com/   如果还是有问题,比如: 重新编译Git,使用openssl替换gnutls,方法如下: http://askubuntu.com/questio ...

  10. 【leetcode】Integer to Roman

    Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...