第十四篇 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 ...
随机推荐
- vmware安装centos虚拟机，没有ip地址
如果centos没有ip地址,就不能通过xshell等工具进行连接,且在上面部署的项目,外部也不能正常访问 两种方式可以解决 第一种,在安装的时候,在INSTALLATION SUMMARY界面的SY ...
- python正则表达式解析(re)
正则表达式的使用方法主要有4种: re.search(进行正则匹配), re.match(从头开始匹配) re.findall(找出所有符合条件的字符列表) re.split(根据条件进行切分) ...
- windows驱动程序
官网文档 https://docs.microsoft.com/zh-cn/windows-hardware/drivers/
- CSS操作表格的边框和表格的属性示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- sql输出表中重复数据
数据: 1 1 2 32 2 2 33 1 2 34 2 2 35 2 1 36 1 1 37 3 2 1 表格查询: SELECT * FROM `t1`; 可以看到,如果界定为 a.b.c 都相同 ...
- CallableStatement获得存储过程多个结果集
这里使用到的数据库为MySQL package com.dz.entity; import java.sql.*; public class Pro_inoutTest { public static ...
- 卷积的三种模式：full、same、valid + 卷积输出size的计算
转自https://blog.csdn.net/u012370185/article/details/95238828 通常用外部api进行卷积的时候,会面临mode选择. 这三种mode的不同点:对 ...
- addEventListener事件委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事 ...
- Java组件介绍
1.String string对象的不变性.被final关键字修饰. 使用charat方法替代startwith/endwith方法(提高性能) 使用buffer(方法同步,性能较差)和builder ...
- Django视图之FBV与CBV
一. CBV与FBV CBV:Class Based View FBV:Function Based View 我们之前写过的都是基于函数的view,就叫FBV.还可以把view写成基于类的,那就是C ...