<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. CCF模拟题 窗口

    窗口 时间限制: 1.0s 内存限制: 256.0MB   问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的 ...

  2. win10 WmiPrvSE.exe WMI Provider 占用CPU过高的问题

    重启 Windows Management Instrumentation 服务 重启 WMI service.   + ,输入: "services.msc" ,按 . 在 服务 ...

  3. [Python] Manage Dependencies with Python Virtual Environments

    Virtual Environments ensure that dependencies from one Python application don’t overwrite the depend ...

  4. bzoj2938【Poi2000】病毒

    2938: [Poi2000]病毒 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 345  Solved: 176 [Submit][Status][ ...

  5. 在kafka/config/目录下面有3个配置文件参数说明（producer.properties。consumer.properties。server.properties）

    (1).producer.properties:生产端的配置文件 #指定kafka节点列表,用于获取metadata,不必全部指定 #需要kafka的服务器地址,来获取每一个topic的分片数等元数据 ...

  6. Elasticsearch之shield（权限）插件安装之后的浏览详解

    前期博客 Elasticsearch-2.4.3的3节点安装(多种方式图文详解)(含 head.kopf.marvel.shield和watcher插件安装和使用) 访问es:-u es_admin ...

  7. Android Error:(1, 0) Gradle version 2.2 is required. Current version is 3.4.1.

    我们在使用Android Studio的时候新建项目没什么问题的,但是当我们下载一份Github上的项目导入进去的时候却没法正常使用,其原因主要是gradle配置问题.而由于gradle这个玩意儿版本 ...

  8. mysql字符设置乱码问题

    在操作系统中对于任意一个字符而言是没有编码格式概念的:同样的字母在不同的编码集里面可能代表不同的东西:关键在于你用什么样的软件打开它,软件本身是以什么样的编码格式来显示你的字符,那么你的字符当前就是什 ...

  9. 洛谷——P2590 [ZJOI2008]树的统计

    https://www.luogu.org/problem/show?pid=2590#sub 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这 ...

  10. x264代码剖析（八）：encode()函数之x264_encoder_close()函数

    x264代码剖析(八):encode()函数之x264_encoder_close()函数 encode()函数是x264的主干函数.主要包含x264_encoder_open()函数.x264_en ...