JavaScript:实现简易计算功能

最新推荐文章于 2024-09-14 18:52:56 发布

000000001001

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量261

点赞数

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

本文链接：https://blog.csdn.net/qq_51657030/article/details/124844700

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客展示了一个使用JavaScript编写的简易计算器的实现。通过HTML和JavaScript交互，实现了加、减、乘、除四种基本运算。用户可以在输入框中输入数字，选择运算符，点击等号按钮，结果显示在页面上。

摘要由CSDN通过智能技术生成

JavaScript:实现简易计算功能

body部分

		<input type="text" id="num1"/>
		<select  id="options">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" id="num2"/>
		<button onclick="compute()">=</button>
		<p id = "result"></p>

实现计算

<script>
			function compute(){
			var num1 = document.getElementById("num1").value;//获取第一个输入框的值	
			var num2 = document.getElementById("num2").value;//获取第二个输入框的值
			var selection = document.getElementById("options").value;//获取选择框的值
			var result = 0;//设置结果的值  
			if(selection == "+"){
				result = parseInt(num1)+ parseInt(num2);
				console.log(result);
			}
			if(selection == "-"){
				result = parseInt(num1)- parseInt(num2);
				console.log(result);
			}
			if(selection == "*"){
				result = parseInt(num1)* parseInt(num2);
				console.log(result);
			}
			if(selection == "/"){
				result = parseInt(num1)/ parseInt(num2);
				console.log(result);
			}		
			document.getElementById("result").innerHTML = result;
			}
</script>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易计算器</title>
	</head>
	<body>
		<input type="text" id="num1"/>
		<select  id="options">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		</select>
		<input type="text" id="num2"/>
		<button onclick="compute()">=</button>
		<p id = "result"></p>
		<script>
			function compute(){
			var num1 = document.getElementById("num1").value;//获取第一个输入框的值	
			var num2 = document.getElementById("num2").value;//获取第二个输入框的值
			var selection = document.getElementById("options").value;//获取选择框的值
			var result = 0;//设置结果的值  
			if(selection == "+"){
				result = parseInt(num1)+ parseInt(num2);
				console.log(result);
			}
			if(selection == "-"){
				result = parseInt(num1)- parseInt(num2);
				console.log(result);
			}
			if(selection == "*"){
				result = parseInt(num1)* parseInt(num2);
				console.log(result);
			}
			if(selection == "/"){
				result = parseInt(num1)/ parseInt(num2);
				console.log(result);
			}		
			document.getElementById("result").innerHTML = result;
			}
		</script>
	</body>
</html>