今天在项目中遇到了一个求平均值的需求,大致需求就是,页面上面有四个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. 开始学javascript基础

    JavaScript非常值得我们学习. 1)所有主浏览器都支持JavaScript. 2) 目前,全世界大部分网页都使用JavaScript. 3) 它可以使网页呈现各种动态效果. 4)作为一个Web ...

  2. C# 操作 AppSettings节点

    1.实例 //1.简单获取内容 string value = ConfigurationManager.AppSettings["one"] as string; Console. ...

  3. 《第一行代码》学习笔记20-广播接收器Broadcast_Receiver(3)

    1.强制用户下线的逻辑并不是写在MainActivity里的,而是应该写在接收这条广播的广播接收器里面,这样强制下线的功能就不会 依附于任何的界面,不管是在程序的任何地方,只需要发出一条广播,就可以完 ...

  4. 在Fedora20上安装Oracle 12c

    本文将引导大家在Fedora20的环境下成功安装Oracle12c. 安装前的准备 编辑/etc/hosts文件,添加本机名称 编辑/etc/selinux/config文件 编辑/etc/redha ...

  5. 数据库分库分表(sharding)系列(二) 全局主键生成策略

    本文将主要介绍一些常见的全局主键生成策略,然后重点介绍flickr使用的一种非常优秀的全局主键生成方案.关于分库分表(sharding)的拆分策略和实施细则,请参考该系列的前一篇文章:数据库分库分表( ...

  6. poj2456 二分逼近寻找正确答案

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10078   Accepted: 4988 ...

  7. Freemarker日期函数处理【转】

    Freemarker日期函数处理[转] (2012-08-01 14:32:13) 转载▼ 标签: 杂谈   string(当和一个日期值一起使用) 这个内置标签用指定的格式把日期转换成字符串,(把默 ...

  8. 【Nutch基础教程之七】Nutch的2种运行模式:local及deploy

    在对nutch源代码运行ant runtime后,会创建一个runtime的目录,在runtime目录下有deploy和local 2个目录. [jediael@jediael runtime]$ l ...

  9. Eclipse开发Python项目

    最近倒腾python自带的开发工具idle,用的很不习惯,还是用Eclipse编写python项目方便(自动补齐,智能报错,调试方便),下面就说说怎么用Eclipse编写python代码吧~ 1.安装 ...

  10. 集合:在我的世界里,你就是唯一 - 零基础入门学习Python027

    集合:在我的世界里,你就是唯一 让编程改变世界 Change the world by program 好,上课之前小甲鱼考考大家还记不记得上节课的内容?上节课我们讲Python中的"字典& ...