今天在项目中遇到了一个求平均值的需求,大致需求就是,页面上面有四个input框,失去焦点就计算平均值,结果保留两位小数,并输出在页面上。不多说了,直接奉上代码,如有更好思路或者想法,都欢迎大家和我讨论。代码如下:

html:

<div id="par">
    <input id="test1" class="err" type="text" placeholder="测试信息" value="" />
    <input id="test2" class="err" type="text" placeholder="测试信息" value="" />
    <input id="test3" class="err" type="text" placeholder="测试信息" value="" />
    <input id="test4" class="err" type="text" placeholder="测试信息" value="" />
    <div id="test5"></div>
</div>

js:

function handler(arr,avgId){
    var l = arr.length,num = 0,sum=0;
    for(var i=0;i<l;i++){
        sum += getValue(arr[i]);
    }
    function getValue(id){
        var t = typeof id == "object"?id:$("#"+id),val = t.val();
        if(!isNaN(val)&&val!=""){
            num+=1;
            val = Number(val);
        }else{val=0;t.val("")};
        return val;
    }
    avgId = typeof avgId =="object"?avgId:$("#"+avgId);
    num == 0 ? avgId.text("") : avgId.text((sum/num).toFixed(2));
}

var myArr = ["test1","test2","test3","test4"];
$("#par").on("change",".err",function(){
    handler(myArr,$("#test5"));
})

/**

*注意:代码依赖jQuery,使用前,请先引入

*/

转载请注明出处:http://www.cnblogs.com/callmesummer/p/3940222.html

拿出手机扫一扫,希望大家能支持一下:

js实现求平均数功能的更多相关文章

  1. Hadoop阅读笔记(二)——利用MapReduce求平均数和去重

    前言:圣诞节来了,我怎么能虚度光阴呢?!依稀记得,那一年,大家互赠贺卡,短短几行字,字字融化在心里:那一年,大家在水果市场,寻找那些最能代表自己心意的苹果香蕉梨,摸着冰冷的水果外皮,内心早已滚烫.这一 ...

  2. 原生JS实现购物车结算功能代码+zepto版

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

  3. poj 1004:Financial Management(水题,求平均数)

    Financial Management Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 126087   Accepted: ...

  4. C++求平均数

    题目内容:求若干个证书的平均数. 输入描述:输入数据含有不多于5组的数据,每组数据由一个整数n(n<=50)打头,表示后面跟着n个整数. 输出描述:对于每组数据,输出其平均数,精确到小数点后3位 ...

  5. 使用JS来实现验证码功能

    最近想为自己的Django博客添加验证码功能,本来想使用第三方库来实现的,不过考虑到添加第三方库对性能的影响,以及第三方库是否安全可靠的问题,还是用自己的代码来实现吧.反正用JS来实现验证码功能又不是 ...

  6. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  7. JS 实现百度搜索功能

    今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. Js元素拖拽功能实现

    Js元素拖拽功能实现 需要解决的问题 最近项目遇到了一个问题,就是用户某个操作需要弹出一个自定义的内容输入框,但是有个缺点,当浏览太大的时候没办法点击确认和取消按钮,应为这个弹出框是采用绝对定位的,取 ...

  9. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

随机推荐

  1. compass模块----Utilities

    引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color" ...

  2. HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理。

    异常信息: 解决方案:        检查一下ASP.NET有没有安装: 控制面板>程序和功能>打开或关闭Windows功能 > Internet信息服务 > 万维网服务 &g ...

  3. (转)CSS 禁止浏览器滚动条的方法

    1.完全隐藏 在里加入scroll="no",可隐藏滚动条:    这个我用的时候完全没效果,不知道是什么原因!不过好多人说这么用可以,大概是用的位置不一样吧   2.在不需要时隐 ...

  4. js获取上传文件扩展名

    File_box.value.substring(File_box.value.lastIndexOf(".") + 1);

  5. CSS 设计模式一 元素

    1.background  内置 是一种CSS内置设计模式,支持在元素下显示图片 HTML <!DOCTYPE html> <html lang="en"> ...

  6. 网站飘窗js代码

    <SCRIPT> var imagepath="/${res}/images/geren.jpg" ; var imagewidth=178 ;//这两行写图片的大小 ...

  7. BestCoder Round #36 (hdu5199)Gunner(水题)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Gunner Time Limit: 8000/4000 MS (Java/Oth ...

  8. WDCP LNMPA和LNMP 504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定.当我以为安装完成以后便 ...

  9. [转]详解AppDelegate/UIApplication

    一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序. (2)每一个应用都有自己的UIApplica ...

  10. gridview中判断隐藏还是现实

    <asp:TemplateField HeaderText="呼出" HeaderStyle-Width="60px" HeaderStyle-Horiz ...