js学习实现简单的计算器

最新推荐文章于 2021-07-27 08:00:26 发布

qq_40891002

最新推荐文章于 2021-07-27 08:00:26 发布

阅读量337

点赞数

分类专栏： js 文章标签： js javascript 字符串

本文链接：https://blog.csdn.net/qq_40891002/article/details/106148411

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

先贴一下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <p>第一个数字:<input id="first-number" type="number" value="0" placeholder="第一个数字"></p>
    <p>第二个数字:<input id="second-number" type="number" value="0" placeholder="第二个数字"></p>
    <button id="add-btn" onclick="calc(add)">加</button>
    <button id="minus-btn" onclick="calc(sub)">减</button>
    <button id="times-btn" onclick="calc(mul)">乘</button>
    <button id="divide-btn" onclick="calc(div)">除</button>
    <p>结果:<input id="result" type="text" ></p>
    <script>
	function calc(func){
		var result=document.getElementById('result');
		var num1=document.getElementById("first-number").value;
		var num2=document.getElementById('second-number').value;
		if(isNaN(num1)||isNaN(num2))
		{
			alert('请输入整数');
			// return false;
		}
		result.value=func(num1,num2);
		
	}
	function add(num1,num2){
		return parseInt(num1)+parseInt(num2);
	}
	function sub(num1,num2){
		return num1-num2;
	}
	function mul(num1,num2){
		return num1*num2;
	}
	function div(num1,num2){
		if(num1===0){
			alert('除数不能为0');
			return '';
		}
		return num1/num2;
	}
    </script>
</body>
</html>

总结一下，刚看到题目时猛的感到很懵，这里面怎么获取框里的内容，怎么显示框里的内容呢，回顾一下以前的学习，就比如说里面主要的函数的传参都不太熟悉，想想也是，在学校里上课也就听听，没有怎么真正的练习，反思一下，这道题目的思路，定义一个函数，用来获取框里的值，以及结果中框的值等于函数此函数传的一个参数，是一个函数名字，再分别定义几个函数分别表示加减乘除，说到底这有啥难度呢，归根到底还是菜，不过我下次遇到就不会写不出来了，过几天再复写一下

写不出的原因：

1.对js语法不熟悉

2.函数的传参应用的不熟练

3.+ 在js中表示连接的意思，所以可以加上parseInt()函数。

qq_40891002

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js学习实现简单的计算器

先贴一下代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>IFE ECMAScript</title></head><body> <p>第一个数字:<input id="first-number" type="number" value="0" placeholde
复制链接

扫一扫