最近在准备专升本，抽一点时间敷衍一下大家！！！嘿嘿嘿！！！

话不多说，上代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>求和练习</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .cal-sum {

            width: 500px;

            margin: 100px auto;

        }

        .cal-sum input {

            width: 200px;

            height: 20px;

            padding: 0 5px;

            margin-right: 5px;

        }

        .cal-sum button {

            margin-top: 30px;

            width: 100px;

            height: 20px;

        }

        .cal-sum p {

            margin-top: 30px;

            font-size: 30px;

            color: red;

        }

    </style>

    <script type="text/javascript">

        window.onload = () => {

            const sumInput = document.getElementById('sum_input');

            const sumBtn = document.getElementById('sum_btn');

            const sumValue = document.getElementById('sum_value');

            // 确保输入框只能输入半角‘,’和数字

            // keyup事件，键盘抬起事件

            sumInput.addEventListener('keyup', () => {

                sumInput.value = sumInput.value.replace(/[^(\d)|(,)]/,"");

            });

            sumBtn.addEventListener('click', () => {

                let sum = 0;

                let inputNum = sumInput.value.split(',');

                for (let num in inputNum) {

                    sum += parseInt(inputNum[num]);

                }

                sumValue.innerHTML = sum;

            });

        }

    </script>

</head>

<body>

    <div class="cal-sum">

        <div><input type="text" value="1,2,3,4,5,6" id="sum_input"><span>求数字之和，数字之间用半角‘,’分隔</span></div>

        <button id="sum_btn">求和</button>

        <p><strong id="sum_value"></strong></p>

    </div>

</body>

</html>

[注]在正则表达式中，^ 在 [] 中代表否定，在这个练习中意思就是：只要不是 ^ 和 数字，当键盘输入抬起后，会自动替换为没有，现象即自动会退回

放假了，也要抽点时间学习呀~~~~

JS项目练习之求和（包含正则表达式验证）的更多相关文章

  1. JS中的match和test正则表达式验证密码或用户名的一种规则

    match语法:字符串.match(正则表达式)有符合的:返回符合的数组无符合的:返回null test语法:正则表达式.test(字符串)有符合的:返回true无符合的 :返回false 该文的密码 ...

  2. 项目常用Javascript分享,包含常用验证和Cookie操作

    function IsEmail(str) { var r = /^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; if (r.test(str)) ...

  3. Js用正则表达式验证字符串

    js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...

  4. Android 正则表达式验证手机号、姓名（包含少数民族）、身份证号

    最近项目中新增的功能,需要对手机号.姓名.身份证号等一些信息进行验证,最好的方法是通过正则表达式来验证,网上查了一些资料,写了这几个工具方法. 1.验证手机号 规则:第一位只能是1,第二位为3-8中的 ...

  5. 基于 Token 的身份验证：JSON Web Token（附：Node.js 项目）

    最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强, ...

  6. js正则表达式验证（化繁为简）

    以前用js写正则表达式验证,每一个文本框后面都要添加一个onblur函数,验证的信息少,也没体会到有多繁琐,这次项目中的页面比较多,页面中的信息也比较多,如果每个文本框都加一个验证函数的话,js验证代 ...

  7. JS正则表达式验证账号、手机号、电话和邮箱

    JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...

  8. js正则表达式验证

    有时候会要验证自己写的正则表达式是否正确 所以写了这个小东西: demo:js正则表达式验证 html: <h3>绿色表示匹配,红色表示不匹配</h3> <label&g ...

  9. Python 使用正则表达式验证密码必须包含大小写字母和数字

    校验密码是否合法的程序. 输入一个密码 1.长度5-10位 2.密码里面必须包含,大写字母.小写字母和数字 3.最多输入5次 ===================================== ...

随机推荐

  1. wordpress怎么用AMP加速器呢

    AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...

  2. 20-C#笔记-接口

    # 1 接口的使用示例 使用interface,关键字 接口的实现和使用,和继承类似. 在使用之前,要实现接口. using System; interface IMyInterface { // 接 ...

  3. Git的小疑惑

    ①怎么理解Git clone ssh://...git     和 Git remote add [shortname] [url]:Git fetch [shorename];的区别:为什么已经把远 ...

  4. Scrapy笔记06- Item Pipeline

    Scrapy笔记06- Item Pipeline 当一个item被蜘蛛爬取到之后会被发送给Item Pipeline,然后多个组件按照顺序处理这个item. 每个Item Pipeline组件其实就 ...

  5. struts2学习1

    struts2使用优势 自动封装参数 参数校验 结果的处理(转发|重定向) 国际化 显示等待页面 表单的防止重复提交 struts2具有更加先进的架构以及思想 使用拦截器 struts2的历史 str ...

  6. MapReduce 程序mysql JDBC驱动类找不到原因及学习hadoop写入数据到Mysql数据库的方法

    报错 :ClassNotFoundException: com.mysql.jdbc.Driver 需求描述: hadoop需要动态加载个三方jar包(比如mysql JDBC 驱动包),是在MR结束 ...

  7. haproxy 配置文件详解 之 WEB监控平台

    HAProxy 虽然实现了服务的故障转移,但是在主机或者服务出现故障的时候,并不能发出通知告知运维人员,这对于及时性要求很高的业务系统来说,是非常不便的,不过,HAProxy 似乎也考虑到了这一点,在 ...

  8. linux .pid文件简述

    PID全称是Process Identification. PID是进程的代号,每个进程有唯一的PID编号.它是进程运行时系统随机分配的,并不代表专门的进程.在运行时PID是不会改变标识符的,但是你终 ...

  9. terminal使用kubectl.exe delete pod podname删不掉

    今天通过kubernetes的dashboard进行删除有问题或者重启次数太多的pod,发现删不掉,然后就在本地尝试使用terminal进行删除 先获取指定namespace下的所有的pod,根据st ...

  10. Unity开发：5.0+版本标准资源包无内置问题

    一.问题如下: 在Unity中,一般都会内置有基础的资源包,可以在Assets->Import Package中,点击其下的子项进行导入: 但是我发现,5.0版本与之前的4.x版本相比,安装包变 ...