JS项目（制作一个简易计算器）

阿勋啦

已于 2022-06-19 20:54:22 修改

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-06-02 15:27:04 首次发布

本文链接：https://blog.csdn.net/A_Xunla/article/details/125101165

版权

JavaScript 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

JS项目

在页面输入第一个数和第二个数，单击+（加）、-（减）、*（乘）、/（除）按钮时，实现两个数的相应运算。
要求： (1) 制作如图所示的 HTML 页面 (2) 定义带参数的函数，根据用户单击的运算符传递相应参数 (3)获取输入文本框的值，并将文本框值转换为数值 (4) 使用 switch 语句判断传递的参数，实现相应运算 (5)
向结果文本框赋值

代码、效果图附下：（直接复制就能用）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script type="text/javascript">
 
        function onclicknum(fuhao){
        var n1=document.getElementById("Num1").value;
        var n2=document.getElementById("Num2").value;
        var s =eval(n1+fuhao+n2);
        var result=document.getElementById("jieguo");
        result.value=s;
        }
    </script>
</head>
<body>
	<div align="center">
        <div style="padding-left: 70px; font-size:1.75rem;" >简易计算器</div>
		第一个数&nbsp;&nbsp;<input id="Num1" type="text"><br>
		第二个数&nbsp;&nbsp;<input id="Num2"type="text"><br>
		<input type="button" onclick="onclicknum('+')" value="+">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" onclick="onclicknum('-')" value="-">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" onclick="onclicknum('*')" value="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" onclick="onclicknum('/')" value="/"><br>
		计算结果&nbsp;&nbsp;<input type="text" id="jieguo">
	</div>
</body>
</html>