制作简易计算器

叶凌牌可乐

已于 2023-04-14 22:29:20 修改

阅读量765

点赞数 1

文章标签： html css 前端

于 2023-04-14 18:30:00 首次发布

本文链接：https://blog.csdn.net/Zq2004211__/article/details/130147147

版权

简易计算器

效果展示图
项目要求
内容分析
涉及函数

效果展示图

效果图展示

项目要求

制作简易计算器，使其能实现简单的加，减，乘，除运算。

1.在两个文本框中分别输入两个数字
2.输入完成后，再次点击加，减，乘，除按钮（即选择哪种运算）
3.在最后的计算结果中显示出，最终的运算结果

内容分析

window.onload()方法用于在网页砸在完成后立即执行的操作，即当HTML文档加载完毕后，立即执行的某个方法
window.onload（）通常用于元素，在页面完全加载后（包括图片，css文件等等）执行脚本代码

isNaN()此函数接受一个参数，该参数可以是任意类型，而函数会帮我们确定这个参数是否‘“不是数值”；isNaN在接收到一个值后，会尝试将这个值转换成数值，如果能成功转换则返回false，否则返回true。

parseFloat() 函数可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

代码展示

window.onload = function() { //延迟加载 先加载静态在加载js
				function pack(num1, Fh, num2) {
					var result = '无法计算！'; //给result 赋初值 
					if(isNaN(parseFloat(num1)) || isNaN(parseFloat(num2))) { //用number无法识别空字符 
						result = result + '请确保输入的是数值！';
					} else {
						switch(Fh) {
							case '+':
							case '-':
								result = eval(num1 + Fh + '(' + num2 + ')');
								break;
							case '×':
								result = parseFloat(num1) * parseFloat(num2);
								break;
							case '÷':
								if(num2 == 0) {
									result = result + '除数不能为0';
								} else {
									result = (parseFloat(num1) / parseFloat(num2)).toFixed(2);
								}
								break;
							default:
								result = result + '请正确使用运算符（+-*/中的任意一个！';
						}
					}

动态内容分析

oBtns[i].onclick = function() 增加鼠标单击事件，保证所有按钮都添加了鼠标单击事件
document.getElementById(id)是javascript中访问某个元素的方法,括号中的id是用来标识某个元素的。

代码展示

	for(var i = 0; i < oBtns.length; i++) {
					oBtns[i].onclick = function() { 
						var num1 = document.getElementById('f1').value;  
						var num2 = document.getElementById('f2').value;
						var Fh = this.innerText;
						document.getElementById('jieG').innerText = pack(num1, Fh, num2); //pack 函数名
					}
				}

静态代码展示

<body>
		<table>
			<tr>
				<td>
					<img />
				</td>
				<td colspan="3">
					<h3>简易计算器</h3>
				</td>
			</tr>
			<tr>
				<td>第一个数</td>
				<td colspan="3">
					<input type="text" id="f1"></td>
			</tr>
			<tr>
				<td>第二个数</td>
				<td colspan="3">
					<input type="text" id="f2">
				</td>
			</tr>
			<tr>
				<td><button onclick=get( "+")>+</button></td>
				<td><button onclick=get( "-")>-</button></td>
				<td><button onclick=get( "*")>×</button></td>
				<td><button onclick=get( "/")>÷</button></td>
			</tr>

			<tr>
				<td>计算结果</td>
				<td colspan="3">
					<span id="jieG"></span>
				</td>
			</tr>
		</table>
	</body>

涉及函数

if语句的基本格式

if(表达式){
//JavaScript语句1;
}
else{
//JavaScript语句2;
}

switch语句的基本格式

switch(表达式){
  case 值1：
  	JavaScript语句1；
  	break;
  case 值2:
  	JavaScript 语句2；
  	break;
...
  defualt:
  	JavaScript语句n;
  	break;
}

叶凌牌可乐

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
制作简易计算器

isNaN在接收到一个值后，会尝试将这个值转换成数值，如果能成功转换则返回false，否则返回true。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。window.onload()方法用于在网页砸在完成后立即执行的操作，即当HTML文档加载完毕后，立即执行的某个方法。window.onload（）通常用于元素，在页面完全加载后（包括图片，css文件等等）执行脚本代码。2.输入完成后，再次点击加，减，乘，除按钮（即选择哪种运算）
复制链接

扫一扫