<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. jQuery和JavaScript的点击事件区别

    // $("#indexPage").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("indexP ...

  2. 如何获取repeater某行第一列的值

    <div> <asp:Repeater ID="Repeater1" runat="server" DataMember="Defa ...

  3. [React] Controlling Form Values with React

    In this lesson we'll talk about controlling the value for inputs, textareas, and select elements. We ...

  4. POJ 1328 Radar Installation 贪心题解

    本题是贪心法题解.只是须要自己观察出规律.这就不easy了,非常easy出错. 一般网上做法是找区间的方法. 这里给出一个独特的方法: 1 依照x轴大小排序 2 从最左边的点循环.首先找到最小x轴的圆 ...

  5. vue methods 方法中 方法 调用 另一个方法。

    vue在同一个组件内: methods中的一个方法调用methods中的另外一个方法. 可以在调用的时候 this.$options.methods.test(); this.$options.met ...

  6. Oracle定义变量、常量

    1 定义变量 declare var_countryname varchar2(50):='中国'; 2 定义常量 con_day constant integer:=365;

  7. JavaScript--数据结构与算法之二叉树

    树是一种非线性的数据结构,以分层的方式存储数据. 二叉树:查找非常快,而且二叉树添加或者删除元素也非常快. 形象的可以描述为组织结构图,用来描述一个组织的结构.树是由边连接的点组成.树的一些基本概念: ...

  8. 解决Docker容器内访问宿主机MySQL数据库服务器的问题

    懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...

  9. 【2017 Multi-University Training Contest - Team 5】Rikka with Subset

    [Link]: [Description] 给你a数组的n个数的所有2^n个子集的2^n个子集元素的和; 子集元素的和最大为m; 告诉你各个子集元素的和出现的次数; 如 1 2 则0出现1次,1出现1 ...

  10. ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件

    转自原文 ORA-01653 无法在表空间扩展的解决办法 -- 增加表空间大小或给表空间增加数据文件 当前系统的数据量越来越大的,昨天还运行正常的数据库,突然无法使用了.经过定位发现是"OR ...