编程语言
首页 > 编程语言> > DW —— 简易计算器 （JavaScript）

DW —— 简易计算器 （JavaScript）

作者：互联网

一、做计算器内部的计算之前就要先把页面的布局设计好
二、每一个放入数据的地方就是一个文本框，那个加减乘除就是一个按钮
也就是body标签对中的代码设置。

<body>
	<form id="myform" name="myform" method="post">
		<table width="271" border="1" cellpadding="1" cellspacing="0">
  <tbody>
    <tr>
      <td width="88"><img src="logo.png" width="95" height="65" alt=""/></td>
      <td width="173"><h3>简易计算器</h3></td>
    </tr>
    <tr>
      <td>第一个数</td>
      <td><input type="text" name="txtNum1" id="txtNum1"></td>
    </tr>
    <tr>
      <td>第二个数</td>
      <td><input type="text" name="txtNum2" id="txtNum2"></td>
    </tr>
    <tr align="right">
      <td colspan="2">
		<input type="button" name="addButton2" id="addBtn" value="  +  " onClick="compute('+')">
        <input type="button" name="subButton2" id="subBtn" value="  -  " onClick="compute('-')">
        <input type="button" name="mulButton2" id="mulBtn" value="  ×  " onClick="compute('*')">
        <input type="button" name="divButton2" id="divBtn" value="  ÷  " onClick="compute('/')"></td>
      </tr>
    <tr>
      <td>计算的结果</td>
      <td><input type="text" name="txtResult" id="txtResult"></td>
    </tr>
  </tbody>
</table>
</form>
</body>

静态页面的设置效果

在这里插入图片描述

三、在Script标签对中输入计算函数的代码。

<script>
	function compute(obj){
		var num1, num2, result;
		num1 = parseFloat(document.myform.txtNum1.value);
		num2 = parseFloat(document.myform.txtNum2.value);
		switch(obj){
			case"+":
				result = num1+num2;
				break;
			case"-":
				result = num1-num2;
				break;
			case"*":
				result = num1*num2;
				break;
			case"/":
				if(num2!=0)
					result = num1/num2;
				else
					result ="除数不能为0，请重新输入！";
				break;
		}
		document.myform.txtResult.value = result;
	}
	</script>

计算结果（2+3）：
在这里插入图片描述

标签：case,myform,num1,num2,JavaScript,break,result,计算器,DW
来源： https://blog.csdn.net/weixin_52626164/article/details/117221268