<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. Spring Cloud学习笔记【一】Eureka服务注册与发现

    Spring Cloud Eureka 是 Spring Cloud Netflix 微服务套件的一部分,基于 Netflix Eureka 做了二次封装,主要负责完成微服务架构中的服务治理功能,服务 ...

  2. 洛谷 P1716 双调序列

    P1716 双调序列 题目描述 电脑组的童鞋们经常玩一些智力PK小游戏,某月某日,发源于小朋友又发明了一种新的序列:双调序列,所谓的双调呢主要是满足如下条件描述: 假定有n(n<=1000)个整 ...

  3. Rails + rabl

    当我们使用rails generate scaffold的方式生成MVC的时候,rails会自己主动给我们生成一系列的文件,包含了怎样用json显示model的view.这样事实上默认了你的系统是一个 ...

  4. 关于Maven报错的一些解决办法（别处贴的）

    1.警告:The tag handler class for "s:form"(org.apache.struts2.views.jsp.ui.FormTag) was not f ...

  5. C# 将引用的DLL文件放到指定的目录下

    原文:C# 将引用的DLL文件放到指定的目录下 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sweety820/article/details/2 ...

  6. LightOJ 1063 Ant Hills

    Ant Hills Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on LightOJ. Original ...

  7. jquary依据td中button的元素属性删除tr行(删选出想删除的行)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVveXVhbnlp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  8. WIN8.1的安装和打开＂这台电脑＂速度很慢的解决办法

    WIN8.1的安装和打开＂这台电脑＂速度很慢的解决办法 对于非服务器用的电脑,如果电脑的内存在2G或更高,首推的操作系统是 WINDOWS8.1 64位企业版,用了就知道,没有比这流畅懂事的操作系统. ...

  9. activity-启动动画的设定（下面弹出出现，弹入下面消失）

    1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...

  10. 求第k大的数(用到快速排序算法的思想)

    //下面两种part效率比较:相同运算量下part比part2快5倍左右,part2写法简单但是效率低 #include "stdafx.h" #include <iostr ...