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):
在这里插入图片描述

评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小黄人的哆啦梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值