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

话不多说，上代码：

<!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. $().ready()与window.onload的不同

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...

  2. LOJ#105. 文艺平衡树（FHQ Treap）

    题面 传送门 题解 \(FHQ\ Treap\)比起\(Splay\)还是稍微好写一点--就是老是忘了要下穿标记-- //minamoto #include<bits/stdc++.h> ...

  3. Amoeba读写分离（MySQL）

    实验操作环境: centos服务器  三台机器 role: 192.168.189.129  master-主 192.168.189.130  master-从 192.168.189.131    ...

  4. MySQL基于 amoeba.xml的读写分离

    1.准备两台服务器  centos7 192.168.52.35 192.168.52.36 2.关闭防火墙 [root@localhost ~]# systemctl stop firewalld ...

  5. 讲课专用——线段树——BSS

    题目链接:http://codevs.cn/problem/3981/ 题解: 线段树求GSS模板题 一.一段长的区间的 GSS 有三种情况:>1 完全在左子区间>2 完全在右子区间> ...

  6. Java 并发系列之一：java 并发体系

    1.  java 并发机制的底层原理实现 1.1 volatile 1.2 synchronized 1.3 原子操作 2. java 内存模型(JMM) 3. java并发基础线程 4. java ...

  7. Windows_pycharm下安装numpy

    https://blog.csdn.net/haishu_zheng/article/details/77489309 一.下载在网站https://pypi.python.org/pypi/nump ...

  8. Bash cat EOF

    cat <<EOF > ciphers.txt> ECDHE-ECDSA-AES128-GCM-SHA256> ECDHE-RSA-AES128-GCM-SHA256&g ...

  9. 使用MobaXterm配置ssh隧道(port forwarding)

    背景描述:如图所示,本地与远程服务器之间存在防火墙,防火墙只允许SSH端口通过,为访问远程服务器,我们可以借助MobaXterm来与SSH服务器建立隧道,使得防火墙外的用户能够访问远程服务器 具体配置 ...

  10. python虚拟环境切换无效问题

    使用pycharm创建新项目,使用虚拟环境,但是进入到项目的cainiao_guoguo_health\venv\Scripts目录启动虚拟环境后,安装第三方库,却还是安装到其他环境中去了, 检查ac ...