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

话不多说，上代码：

<!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. sqlyog 下载

    https://www.cnblogs.com/givemelove/p/7777975.html

  2. centos7+docker 安装和部署crawlab分布式爬虫平台,并使用docker-compose管理docker

    1.先决条件centos7+docker最新版本 sudo yum updat 2.配置一下镜像源,创建/etc/docker/daemon.conf文件,在其中输入如下内容 { "regi ...

  3. git blame （10）

    git blame system_server.c 每一行提交的sha ,作者,提交的日期及提交的信息

  4. Pandas | 05 基本功能

    到目前为止,我们了解了三种Pandas数据结构以及如何创建它们.接下来将主要关注数据帧(DataFrame)对象,因为它在实时数据处理中非常重要,并且还讨论其他数据结构. 一.系列基本功能 编号 属性 ...

  5. ESA2GJK1DH1K基础篇: Android实现MQTT封装源码使用说明

    说明 这一节说明一下基础篇APP源码里面MyMqttCilent.java这个文件的使用 新建工程 安装MQTT的jar包 implementation 'org.eclipse.paho:org.e ...

  6. 网络协议 18 - CDN

    到现在为止,我们基本上已经了解了网络协议中的大部分常用协议,对于整个 HTTP 请求流程也较为熟悉了.从无到有后,我们就要考虑如何优化“有”这个过程,也就是我们常见的请求优化.而现在的技术栈中,CDN ...

  7. csv文件快速转存到mysql

    目录 csv文件快速转存到mysql 连接数据库 读取csv文件内容: 创表: csv数据导入样式: 完整脚本: csv文件快速转存到mysql 连接数据库 连接数据库: con = pymysql. ...

  8. javascript中的作用域和变量提升

    js的运行主要分两个阶段:js的预解析和运行,预解析阶段所有的变量声明和函数定义都会提前,但是变量的赋值不会提前.

  9. python实现栈结构

    # -*- coding:utf-8 -*- # __author__ :kusy # __content__:文件说明 # __date__:2018/9/30 17:28 class MyStac ...

  10. [转帖]算法精解：DAG有向无环图

    算法精解:DAG有向无环图 https://www.cnblogs.com/Evsward/p/dag.html DAG是公认的下一代区块链的标志.本文从算法基础去研究分析DAG算法,以及它是如何运用 ...