js javascript 制作一个简易的计算器，具有加减乘除的功能

Msir_Modern

于 2023-12-22 09:40:00 发布

阅读量993

点赞数 10

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43010844/article/details/135145638

版权

制作一个简易的计算器，具有加减乘除的功能

在这里插入图片描述

<html>
<head>	<meta charset="UTF-8"><title></title></head>
<body>
	<h1>简易计算器</h1>
	<table border="1" style="position:center;">
		<tr><th>第一个数</th><td><input id="fir" type="text" /></td></tr>
		<tr><th>第二个数</th><td><input id="sec" type="text" /></td></tr>
		<tr><td colspan="2">	
<button onclick="add()">+</button>
				<button onclick="substract()">-</button>
				<button onclick="multiply()">*</button>
				<button onclick="divide()">/</button>
			</td></tr>
		<tr><td colspan="2"><p id="result"></p></td></tr>
	</table>
</body>
</html>
<script>
     var res; //保存计算结果
     //加法函数
     function add(){
           //document.getElementById().value  根据id属性，获取用户输入的值
          var first = document.getElementById("fir").value;
          var second = document.getElementById("sec").value;
          res = Number(first) + Number(second); 
           //这里"+"两端必须Number类型转换，否则当成字符串连接
           sent(res);   //sent() 调用方法，设置结果
        }
      //减法函数
     function substract(){
         var first = document.getElementById("fir").value;
         var second = document.getElementById("sec").value;
         res = first - second;
         sent(res);
        }
		//乘法函数
	function multiply(){
	        var first = document.getElementById("fir").value;
	        var second = document.getElementById("sec").value;
	        res = first * second;
	       sent(res);
	}
	//计算除法的方法
	function divide(){
	      var first = document.getElementById("fir").value;
	      var second = document.getElementById("sec").value;
	      res = first / second;
	     sent(res);
	}
	function sent(re) {   //计算结果显示函数
	   document.getElementById("result").innerHTML = re;
	}
     </script>

Msir_Modern

关注

10
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
js javascript 制作一个简易的计算器，具有加减乘除的功能

/document.getElementById().value 根据id属性，获取用户输入的值。//这里"+"两端必须Number类型转换，否则当成字符串连接。//sent() 调用方法，设置结果。//计算结果显示函数。
复制链接

扫一扫