今天给大家介绍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. ubutu之qq安装

    1.压缩包下载链接 http://pan.baidu.com/s/1nvlgsGh 2.安装教程(引用自百度经验) 如何在Ubuntu中安装QQ

  2. php运行出现Call to undefined function curl_init()的解决方法

    解决方法如下: 1.在php.ini中找到extension=php_curl.dll,去掉前面的分号;,然后将php.ini拷贝到c:\windows. 2.重启IIS服务,或回收应用程序池即可.

  3. 用jQuery编的一个分页小代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. maven项目如何使用jetty启动？

    1.在pom.xml文件中插入下面的片段 <build> <plugins> <plugin> <groupId>org.eclipse.jetty&l ...

  5. imageable.touch

    使用 callback 确保创建,更新和删除 Picture 时,touch 关联的 imageable,使得其缓存能正确过期 这个update的方法用来把update时间强制更新成当前时间 http ...

  6. 跟着百度学PHP[4]-OOP面对对象编程-2-属性和方法

    简单的说 变量就是成员属性函数就是成员方法(方法有三:构造方法[即为__construct].成员方法.析构方法[__destruct]) 成员方法和成员属性都是可以加修饰词.比如封装性的方法或者属性 ...

  7. 数据流图DFD画法

    数据流图(DFD- Data Flow Diagram)让系统分析者弄清楚"做什么"的问题,其重要性就不言而喻了.那么我们怎么画数据流图呢?数据流图与系统流程图又有什么区别呢? 步 ...

  8. Configuration

    package edu.fzu.ir.util; import java.io.File; import java.io.FileInputStream; import java.io.FileNot ...

  9. 5.2---小数的二进制表示（CC150）

    public static String printBin(double num) { StringBuffer str = new StringBuffer(); str.append('0'); ...

  10. apscheduler 绿色版

    由于依赖EntryPoint,因此apscheduler在离线的方式(直接拷贝然后引用)使用时,会报错. 错误信息类似: No trigger by the name “interval/cron/d ...