第十四篇 JS实现加减乘除 正则表达式
JS实现加减乘除
<!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>
第十四篇 JS实现加减乘除 正则表达式的更多相关文章
- Spring Cloud第十四篇 | Api网关Zuul
本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...
- 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）
解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...
- 第十四篇 Integration Services：项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- Python之路【第十四篇】：AngularJS --暂无内容-待更新
Python之路[第十四篇]:AngularJS --暂无内容-待更新
- 【译】第十四篇 Integration Services：项目转换
本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...
- 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用
SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...
- SpringBoot第二十四篇：应用监控之Admin
作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言 前一章(S ...
- Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）
第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...
- Hibernate（十四篇）
(一)Hibernate简介 (二)hibernate配置管理 (三)Hibernate对象-关系映射文件 (四)Hibernate API详解 (五)Hibernate一级缓存 (六)Hiberna ...
随机推荐
- 注意机制CBAM
这是一种用于前馈卷积神经网络的简单而有效的注意模块. 给定一个中间特征图,我们的模块会沿着两个独立的维度(通道和空间)依次推断注意力图,然后将注意力图乘以输入特征图以进行自适应特征修饰. 由于CBAM ...
- 浏览器端-W3School-HTML：HTML DOM rows 集合
ylbtech-浏览器端-W3School-HTML:HTML DOM rows 集合 1.返回顶部 1. HTML DOM rows 集合 HTML DOM Table 对象 定义和用法 rows ...
- flutter shared_preferences 异步变同步
前言 在开发原生iOS或Native应用时,一般有判断上一次安装的版本和当前版本是否是同一个版本,如果不是同一个版本,则要显示引导页,这个过程是把版本号持久化存储起来,在每一次启动时进行判断,这个过程 ...
- C++的学习笔记1
一: 为了惯例具有指针成员的类,必须定义三个复制控制成员:复制构造函数.赋值操作符和析构函数. 复制构造函数分配新元素并从被复制对象处复制值,赋值操作符撤销所保存的原对象并从右操作数向左操 ...
- php中应用memcached
PHP连接Memcached 先安装php的memcache扩展 # wget http://ip/data/attachment/forum/memcache-2.2.3.tgz# tar zxf ...
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_3 响应之返回值是void类型
定义先的标签 返回void 测试默认的跳转 虽然是404但是方法执行了. 默认请求了 testVoid.jsp这个页面.请求路径叫什么 就访问哪个jsp页面. 使用request请求转发 抛出的异常 ...
- linux网络管理命令"ip"用法
Linux的ip命令和ifconfig类似,但前者功能更强大,并旨在取代后者.使用ip命令,只需一个命令,你就能很轻松地执行一些网络管理任务. ip help命令: 显示ip相关命令的帮助: # i ...
- form modelform formset modelformset的各种用法
form modelform formset modelformset的各种用法 首先上结论: form适用于对单个表单的操作,并且需要对每个字段的验证规则自定义. modelform:适用于对用 ...
- wpf 父控件和子控件 各自触发鼠标按下事件
父控件 PreviewMouseDown子控件 MouseDown
- bazel编译im2txt的问题
问题: 原本可以正常运行的程序,出现找不到tensorflow的问题.打印出来sys.version和sys.path,发现python版本并不是conda环境的版本 (tensorflow) yua ...