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

话不多说，上代码：

<!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. C#中Equals 与== 的区别

    这个问题听说是大公司面试都会问的问题,以前不怎么了解,好奇心勾引我来研究一下 首先从值类型分析,先写几句简单的代码供测试用,二行语句输出的都是true, 说明＝＝与Equals功能是相同的, 判断的都 ...

  2. 自动化测试框架：jmeter + maven+ jenkins

    原理:jenkins驱动maven执行,maven驱动jmeter执行 前提条件:windows安装了jmeter.maven.tomcat.jenkins 安装方法参考汇总目录中对应的博文:http ...

  3. phpcms邮箱smtp配置163企业邮测试可用

    前面我们给phpcms加了https,但是修改邮箱smtp配置一直提交不了,提示请填写接口地址,格式为:http://www.abc.com,结尾不包含"/",找了一下phpsso ...

  4. USACO Protecting the Flowers

    洛谷 P2878 [USACO07JAN]保护花朵Protecting the Flowers 洛谷传送门 JDOJ 1009: 护花 JDOJ传送门 Description FJ出去砍木材去了,把N ...

  5. hdu1005-Number Sequence-（循环节）

    题意:已知f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7,给出A,B,n,求f(n) 题解:n巨大,循环肯定超时,在模7的 ...

  6. ToDoList--HttpMediaTypeNotSupportedException

    org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-url ...

  7. Lotus words

    We are going to memorize a lot of words in the fourth grade of primary school. It's very difficult f ...

  8. django -- 模版语言之过滤器Filters和for循环

    前戏 在前面写的图书管理系统中,我们对模版语言应该已经不陌生了,使用{{ }}包裹起来的就是模版语言,只需要记住两种就可以了 {{ 变量名 }}            变量相关的 {% %}      ...

  9. django -- 实现ORM登录

    前戏 上篇文章写了一个简单的登录页面,那我们可不可以实现一个简单的登录功能呢?如果登录成功,给返回一个页面,失败给出错误的提示呢? 在之前学HTML的时候,我们知道,网页在往服务器提交数据的时候,都是 ...

  10. LOJ6625 时间复杂度（min_25筛）

    本人在LOJ的第三题(前两题太水不好意思说了QwQ),欢迎大家踩std. 题目链接:LOJ 题目大意:定义函数 $f$:($minp$ 表示最小质因子) $$f(x)=\begin{cases}0&a ...