JS实现加减乘除

这节课，将会继续使用到if判断，会让同学们再看到一个新的，else if判断语句，意思是：否则如果，是基于if下的判断语句，就是说，if不成立则再来判断else if，可以这样，假如a=1,if(a=2){我是2}else if(a=1){我是1}else{我是3}，就是这样的关联，但有的同学问，直接用if一直判断就好了，不需要用else if，是这样的，程序运行，else if是基于if的对吧，那么它就是一条语句，如果相同的判断语句多了，全用if，程序就会一个一个去执行，量就会加大，就会影响程序速度。
这节课其实最难的是，“正则表达式”，它特别厉害哦，它可以很简单的来做，手机、IP、验证码、密码、用户名、地址等操作，可以节省更多的代码和思维，它的特点就是，开头和结尾都是用一根 / 斜杠的，里面则是正则内容，用做判断特别给力。
 
上代码，老师做一个初学者能看到的加减乘除法：
 
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>JS实现一个加减乘除</title>
  6. </head>
  7. <body>
  8. <h3>加减乘除法</h3>
  9. <input placeholder="第一个数字" id="num1" type="text"/>
  10. <select name="fuhao" id="fuhao">
  11.     <option value="+">+</option>
  12.     <option value="-">-</option>
  13.     <option value="*">*</option>
  14.     <option value="/">/</option>
  15. </select>
  16. <input placeholder="第二个数字" id="num2" type="text"/>
  17. <button onclick="yunsuan()">运算</button>
  18. <input placeholder="得出结果" id="num3" type="text"/>
  19.  
  20. <script>
  21. function yunsuan(){
  22.     //点击事件运行后，获取相关的所有元素id
  23.     var num1 = document.getElementById("num1");
  24.     var num2 = document.getElementById("num2");
  25.     var num3 = document.getElementById("num3");
  26.     var fuhao = document.getElementById("fuhao");
  27.     // 下面这个是正则表达式，下面这个意思则是，只能输入数字，字数必须有一个及以上
  28.     var zhengze = /^[0-9]{1,}$/;
  29.     //这里面则是用判断，使用正则的格式，来判断 num1 和num2格式是否正确
  30.     if(!zhengze.test(num1.value)){
  31.         //老师判断力用了一个 !(叹号)，意思是取相反，它本身成立则会变成不成立
  32.         alert('只能输入整数,数字哟');
  33.         //判断如果不成立，弹出提示并让代码停止运行，就不往下面走了
  34.         return false;
  35.     }else if(!zhengze.test(num2.value)){
  36.         //else if意思是 否则如果，是在if下面使用的一个判断语句
  37.         alert('只能输入整数,数字哟');
  38.         return false;
  39.     }
  40.     //先用判断，判断它的运算符号
  41.     //value 是获取它的文本框里的值 select是下拉列表，也可以当做是文本框哦
  42.     if(fuhao.value == '+'){
  43.         //一个等号是赋值，两个等号才是平常我们作比较说的“等于”
  44.         //在JS里，+号不是两个数字相加，而是‘拼接’，将两个数字或者字符串拼接在一起
  45.         //这里我们做数字运算，就要用到parseInt方法，就它转化成数字才能相加得出结果
  46.         num3.value = parseInt(num1.value)+parseInt(num2.value);
  47.     }else if(fuhao.value == '-'){
  48.         num3.value = parseInt(num1.value)-parseInt(num2.value);
  49.     }else if(fuhao.value == '*'){
  50.         num3.value = parseInt(num1.value)*parseInt(num2.value);
  51.     }else if(fuhao.value == '/'){
  52.         num3.value = parseInt(num1.value)/parseInt(num2.value);
  53.     }
  54. }
  55. </body>
  56. </html>
这里面的代码还可以再节省一点，但老师先做出这样，让入门的同学更加看得懂。那么怎么节省呢，有兴趣的同学自己去想一下咯！
这里老师只用了支持整数，还有小数呢...
这里老师每一个运算符一行代码，就是4行，再加上判断if就又是几行，数学运算符不止这四个，那么我们就再一直无线延伸下去写代码吗？那就太费事了，有办法能做到，直接获取运算符，然后得出结果，老师不吹牛，一行代码直接搞定，那么有兴趣的同学，自己去开发咯！
 

第十四篇 JS实现加减乘除 正则表达式的更多相关文章

  1. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  2. 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）

    解剖SQLSERVER 第十四篇    Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...

  3. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  4. Python之路【第十四篇】：AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  5. 【译】第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  6. 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用

    SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...

  7. SpringBoot第二十四篇：应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  8. Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）

    第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...

  9. Hibernate（十四篇）

    (一)Hibernate简介 (二)hibernate配置管理 (三)Hibernate对象-关系映射文件 (四)Hibernate API详解 (五)Hibernate一级缓存 (六)Hiberna ...

随机推荐

  1. ZT：我们身边大多数的事都是暂时性的

    1. 家庭放在首位. 2. 戒酒能有助于身体健康. 3. 经常跑步以及运动有益于身心健康. 4. 保证心胸开阔.让爱自动来到你的身边,而不需要你自己去拼命寻找. 5. 区分优秀的导师和老师.不断提升自 ...

  2. 代码实现:当我们下载一个试用版软件,没有购买正版的时候,每执行一次就会提醒我们还有多少次使用机会用学过的IO流知识,模拟试用版软件,试用10次机会,执行一次就提示一次您还有几次机会,如果次数到了提示请购买正版

    package com.loaderman.test; import java.io.BufferedReader; import java.io.FileReader; import java.io ...

  3. 使用EasyPrint实现不预览直接打印功能_非JS打印

    插件地址 github 下载插件,安装后将在注册表中添加EasyPrint的协议 随后可以在开始->运行中输入EasyPrint://1&test 进行测试  参数分为两部分使用[&am ...

  4. WPF 键盘全局接收消息

    1.========================================================================== 在c#中怎样禁用鼠标左键的使用,其实我们可以通 ...

  5. openstack部署keystone

    环境: 免密钥,域名解析 cat /etc/hosts 192.168.42.120 controller 192.168.42.121 compute 192.168.42.122 storage ...

  6. Head First HTML 与 CSS 学习笔记

    总的来说,这本书作为入门HTML和CSS还是不错的,讲解生动有趣,这也是Head First系列书籍的特点.缺点就是讲解的不够全面~ 第三章 一般来讲,如果要引用一段或者多段文字, 就要使用<b ...

  7. Kubernetes中的PV和PVC

    K8S引入了一组叫作Persistent Volume Claim(PVC)和Persistent Volume(PV)的API对象,大大降低了用户声明和使用持久化Volume的门槛.在Pod的Vol ...

  8. react native 传值方式之 ：子组件通过调用 其父组件传来的方法 传值回其父组件

  9. 【HANA系列】SAP HANA SQL截取字符串

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL截取字符 ...

  10. mysql数据库为什么要分表和分区？

    一般下载的源码都带了MySQL数据库的,做个真正意义上的网站没数据库肯定不行. 数据库主要存放用户信息(注册用户名密码,分组,等级等),配置信息(管理权限配置,模板配置等),内容链接(html ,图片 ...