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、验证码、密码、用户名、地址等操作,可以节省更多的代码和思维,它的特点就是,开头和结尾都是用一根 / 斜杠的,里面则是正则内容,用做判断特别给力。
 
上代码,老师做一个初学者能看到的加减乘除法:
 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS实现一个加减乘除</title>
</head>
<body>
<h3>加减乘除法</h3>
<input placeholder="第一个数字" id="num1" type="text"/>
<select name="fuhao" id="fuhao">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input placeholder="第二个数字" id="num2" type="text"/>
<button onclick="yunsuan()">运算</button>
<input placeholder="得出结果" id="num3" type="text"/> <script>
function yunsuan(){
//点击事件运行后,获取相关的所有元素id
var num1 = document.getElementById("num1");
var num2 = document.getElementById("num2");
var num3 = document.getElementById("num3");
var fuhao = document.getElementById("fuhao");
// 下面这个是正则表达式,下面这个意思则是,只能输入数字,字数必须有一个及以上
var zhengze = /^[0-9]{1,}$/;
//这里面则是用判断,使用正则的格式,来判断 num1 和num2格式是否正确
if(!zhengze.test(num1.value)){
//老师判断力用了一个 !(叹号),意思是取相反,它本身成立则会变成不成立
alert('只能输入整数,数字哟');
//判断如果不成立,弹出提示并让代码停止运行,就不往下面走了
return false;
}else if(!zhengze.test(num2.value)){
//else if意思是 否则如果,是在if下面使用的一个判断语句
alert('只能输入整数,数字哟');
return false;
}
//先用判断,判断它的运算符号
//value 是获取它的文本框里的值 select是下拉列表,也可以当做是文本框哦
if(fuhao.value == '+'){
//一个等号是赋值,两个等号才是平常我们作比较说的“等于”
//在JS里,+号不是两个数字相加,而是‘拼接’,将两个数字或者字符串拼接在一起
//这里我们做数字运算,就要用到parseInt方法,就它转化成数字才能相加得出结果
num3.value = parseInt(num1.value)+parseInt(num2.value);
}else if(fuhao.value == '-'){
num3.value = parseInt(num1.value)-parseInt(num2.value);
}else if(fuhao.value == '*'){
num3.value = parseInt(num1.value)*parseInt(num2.value);
}else if(fuhao.value == '/'){
num3.value = parseInt(num1.value)/parseInt(num2.value);
}
}
</body>
</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. 使用Statement执行DML和DQL语句

    import com.loaderman.util.JdbcUtil; import java.sql.Connection; import java.sql.DriverManager; impor ...

  2. Android百分比支持布局库的使用和源码分析

    Android-percent-support这个库 描述下这个support-lib. 这个库提供了: 两种布局供大家使用: PercentRelativeLayout.PercentFrameLa ...

  3. split切割.号的字符串

    excel中的日期为下图所示,利用io读取到后,调试发现值为“12.10.2019”,需要将其转换为“2019-10-12” 用split方法以.号切割时,需要用转移字符“\\.”,代码如下 pack ...

  4. .net分流抢票助手

    官方网站: http://www.12306bypass.com/作者:Cheney.小风分流抢票基于.Net4.0框架开发,在Windows7之后的操作系统可直接打开.其他操作系统如打不开或者打开报 ...

  5. 【.NET】由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。

    前言 上段时间做项目时,遇到如题之类问题,如今过去有一段时间了,具体出现的情形忘了,当时虽然找到了解决方法,但是依旧没有弄明白出现此种情况是何种原因,后来在微软的帮助支持中心找到了答案,特此记录,以防 ...

  6. Redis客户端信息的存取

    字符串的存: set name xxx 字符串的取: get name Hashes的存: HMSET xxx xxx xxx Hashes的取: HGETALL xxx Lists的存: lpush ...

  7. 【学习笔记】APP页面,随机选择一个选项

    如下页面,一个测评功能,30个题目,每题的答案选项一样: 要实现每题自动随机选择一个答案 方法一:定义一个5个选项的列表,循环30次,然后使用random.shuffle打乱列表顺序,根据列表元素定位 ...

  8. Leetcode之广度优先搜索(BFS)专题-133. 克隆图(Clone Graph)

    Leetcode之广度优先搜索(BFS)专题-133. 克隆图(Clone Graph) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tree ...

  9. Win10黑色白色主题切换

    打开设置面板 选择个性化  -> 颜色 -> 选择默认应用模式 然后选择亮和暗就好了. (这还是看404说的我才知道.)

  10. ASP.NET Core EFCore 之DBFirst 自动创建实体类和数据库上下文

    通过引用Nuget包添加实体类 运行 Install-Package Microsoft.EntityFrameworkCore.SqlServer 运行 Install-Package Micros ...