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

话不多说，上代码：

<!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. Docker Hello-World镜像运行测试

    一.命令:docker run hello-world 命令解释:以docker客户端命令的方式运行hello-world镜像 命令运行结果: hadoop@Docker:/opt/docker$ d ...

  2. ESA2GJK1DH1K微信小程序篇: 小程序连接MQTT简单的Demo

    前言 这节让大家知道小程序是怎么连接的MQTT 其实,小程序就是网页实现MQTT 使用的是下面这个包 新建一个工程 一,把包放到util里面 二,编写连接函数 三,调用连接函数 订阅主题显示接收的消息 ...

  3. OD(lfdnb)

    由于一场意外,D死了,在此开一个新坑 2019.11.13 考前焦虑 智商为负 有点担心考试状态 2019.11.12 上午考试简直心态爆炸 T1看了一个小时不会 然后看T2,这时候wxy聚聚已经切了 ...

  4. bfc与浮动元素的关系

    首先说明两个特性: 1,浮动元素兄弟元素的布局规则 当html中存在浮动元素时,其兄弟元素的布局遵循如下规则: (1)块级元素的渲染无视浮动元素 (2)文本内容或者是行内元素的渲染会考虑到浮动元素的存 ...

  5. React_01_ECMAScript6

    ECMAScript6 1.ES6简介 1.1.什么是ES6 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了.它的目 ...

  6. Vue.js之入门

    1.What is Vue.js? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架,通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 2.引入 ...

  7. Thrift源码分析（二）-- 协议和编解码

    协议和编解码是一个网络应用程序的核心问题之一,客户端和服务器通过约定的协议来传输消息(数据),通过特定的格式来编解码字节流,并转化成业务消息,提供给上层框架调用. Thrift的协议比较简单,它把协议 ...

  8. Linux安装vim,解决vim: command not found

    1,输入rpm -qa|grep vim 命令, 如果 vim 已经正确安裝,会返回下面的三行代码: root@server1 [~]# rpm -qa|grep vim vim-enhanced-7 ...

  9. 【技术博客】Laravel5.1文件上传单元测试

    Laravel5.1文件上传单元测试 作者:ZGJ 在软工第三阶段中,我彻底解决了上一阶段一直困扰我的文件上传单元测试问题,在这里做一个总结. 注:下文介绍中,方法一方法二实现简单但有一定的限制条件( ...

  10. Kubernetes集群之清除集群

    清除K8s集群的Etcd集群 操作服务器为:192.168.1.175/192.168.1.176/192.168.1.177,即etcd集群的三台服务器.以下以192.168.1.175为例子. 暂 ...