<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. Linux下安装Go环境

    登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...

  2. Tomcat线程池与NIO配置

    每个web客户端请求对于服务器端来说就一个单独的线程,客户端的请求数量增多将会导致线程数就上去了,CPU就忙着跟线程切换. 而NIO则是使用单线程(单个CPU)或者只使用少量的多线程(多CPU)来接受 ...

  3. 九度 题目1154：Jungle Roads

    题目描写叙述: The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid mon ...

  4. Get Started with Git and Team Services

    https://www.visualstudio.com/en-us/docs/git/gitquickstart Visual Studio查看日志 LocalHistory和Incoming是拆开 ...

  5. 智课雅思词汇---三、aud和auto和bene是什么意思

    智课雅思词汇---三.aud和auto和bene是什么意思 一.总结 一句话总结:aud:听 auto:自己,self bene:good,well 1.anthropo是什么意思? anthropo ...

  6. freeMark

    1. 什么是freemark       Freemaker是一个”模板引擎”,也可以说是一个基于模板技术的生成文本输出的一个通用工具 2.一般的用途: l 能用来生成任意格式的文本:HTML,XML ...

  7. 计算器-- 利用re模块 利用函数封装 第二版

    import re remove_parentheses = re.compile('\([^()]+\)') def Remove_Parentheses(obj, s): # 找到内层的括号并且返 ...

  8. Solr 定义

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  9. hbase xshell

    用Xshell登陆linux主机后,在hbase shell下死活不能使用backspace和delete删除误输的指令,只得不停退出,重登,仔细输..又错了,再退出,再登,仔细输...又错了...又 ...

  10. ssm 框架学习-1

    理论理解 +项目阅读 SpringSpring就像是整个项目中装配bean的大工厂,在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象.Spring的核心思想是IoC(控制反转),即 ...