<style>

    body{font-size: 12px;}

    .outer{

        width: 500px;

        margin: 0 auto;

    }

    span{

        color: #999;

    }

    input{

        width: 220px;

        line-height: 20px;

        border: 1px solid #ccc;

        margin-bottom: 12px;

    }

    p{

        font-size: 20px;

        color: red;

        font-weight: bold;

    }

    </style>

    <script>

    window.onload = function()

    {

        var oBtn = document.getElementsByTagName('button')[0];

        var oTxt = document.getElementsByTagName('input')[0];

        // 在这里获取元素，在点击之后再获取元素的值。不能直接在这获取value，因为输入框的数字是变动的，不能以初始值为准。

        var oP = document.getElementsByTagName("p")[0];

        var oResult = 0;

        // 在鼠标 keyup 输入框的时候，判断输入的内容，除了数字和,逗号，其他的字符不能输入。

        oTxt.onkeyup = function ()

        {

            this.value = this.value.replace(/[^(\d)|(,)]/,"") // 这里用的正则还不熟悉！

        };

        oBtn.onclick = function()

        {

            // var aNum = parseInt(oTxt.value.split(",")) ;  // 不能直接把数组parseInt

            var aNum = oTxt.value.split(",");

            for(var i=0; i<aNum.length; i++)

            {

                oResult += parseInt (aNum[i]);

            };   

            oP.innerHTML = oResult;

            // 这里必须先有对象，innerHTML是DOM用法。 oResult的值是赋给对象的！

        }

    };

    </script>

</head>

<body>

<div class="outer">

    <input type="text" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15">

    <span>输入数字求和，数字之间用半角","号分隔</span>

    <br>

    <button>求和</button>

    <p></p>

</div>

</body>

JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件的更多相关文章

  1. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

  2. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  3. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  4. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  5. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  6. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  7. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

  8. JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; va ...

  9. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...

随机推荐

  1. 洛谷 P1324 矩形分割

    P1324 矩形分割 题目描述 出于某些方面的需求,我们要把一块N×M的木板切成一个个1×1的小方块. 对于一块木板,我们只能从某条横线或者某条竖线(要在方格线上),而且这木板是不均匀的,从不同的线切 ...

  2. MySQL改变表的存储引擎

    MySQL提供了多种数据库存储引擎,存储引擎负责MySQL数据库中的数据的存储和提取.不同的存储引擎具有不同的特性,有时可能须要将一个已经存在的表的存储引擎转换成另外的一个存储引擎.有非常多方法能够完 ...

  3. Android中SQLite应用具体解释

    如今的主流移动设备像Android.iPhone等都使用SQLite作为复杂数据的存储引擎,在我们为移动设备开发应用程序时,或许就要使用到SQLite来存储我们大量的数据,所以我们就须要掌握移动设备上 ...

  4. Android照片墙完整版，完美结合 内存方案 LruCache 和 硬盘方案 DiskLruCache

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/34093441 在上一篇文章当中,我们学习了DiskLruCache的概念和基本用法 ...

  5. Extjs在HtmlEditor的工具栏上插入自定义按钮

    Ext.ns('Ext.ux.form.HtmlEditor');Ext.ux.form.HtmlEditor.HR =Ext.extend(Ext.util.Observable,{ init:fu ...

  6. elasticsearch index 之 Mapping

    Lucene索引的一个特点就filed,索引以field组合.这一特点为索引和搜索提供了很大的灵活性.elasticsearch则在Lucene的基础上更近一步,它可以是 no scheme.实现这一 ...

  7. Material Design控件使用学习 toolbar+drawerlayout+ Snackbar

    效果 1.,导包design包和appcompat-v7 ,设置Theme主题Style为NoActionbar 2.custom_toolbar.xml <?xml version=" ...

  8. BZOJ 1232 Kruskal

    思路: 跟昨天的考试题特别像-.. 就是裸的Kruskal 把边权设为连接的两个点的点权之和加上边权*2 搞定 //By SiriusRen #include <cstdio> #incl ...

  9. OpenCV —— ROI

    通过 cvResetImageRoI 函数释放ROI是非常重要的,否则其他操作将默认在ROI区域中进行 通过巧妙的使用widthStep,可以达到同ROI一样的效果 —— 如果想设置和保持一副图像的多 ...

  10. 【重构】C# VS 配置引用程序集的路径（分离exe和dll从指定路径调用）

    原文:[重构]C# VS 配置引用程序集的路径(分离exe和dll从指定路径调用) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CocoWu892 ...