蜗牛—JavaScript学习之简易计算器

最新推荐文章于 2021-08-03 23:22:15 发布

树上的大腰子

最新推荐文章于 2021-08-03 23:22:15 发布

阅读量628

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq1791422018/article/details/26972471

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript编写一个简单的计算器。通过展示核心代码，解释了JavaScript的基本语法和操作符在构建计算器过程中的应用。

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

主要代码如下:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 transitional//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>简易计算器</title>
<script>

function calNum(opt){
	var retObj = document.getElementById("txtresult");
	var num1 = parseInt(document.getElementById("txtNum1").value);
	var num2 = parseInt(document.getElementById("txtNum2").value);
	var ret = 0;
	switch(opt){
		case '+':	
		ret=num1+num2;
		break;
		case '-':
		ret=num1-num2;
		break;
		case '*':
		ret=num1*num2;
		break;
		case '/':
		ret=num1/num2;
		break;
	}
	retObj.value=ret;
}



</script>
</head>

<body>
 <form action="" method="post"  id="myform">
<table border="0" >
  <tr>
    <td><img src="images/shop.gif" width="54" height="54"></td>
<td colspan="3"><H3>购物简易计算器</H3></td>
  </tr>
  <tr>
    <td>第一个数</td>
    <td colspan="3"><INPUT name="txtNum1" type="text"  id="txtNum1" size="25"></td>
  </tr>
  <tr  >
    <td>第二个数</td>
    <td colspan="3"><INPUT name="txtNum2" type="text"  id="txtNum2" size="25"></td>
  </tr>
  <tr>
    <td><INPUT name="addButton2" type="button" id="addButton2" value="  ＋  " 
    οnclick="calNum('+');"></td>
    <td><INPUT name="subButton2" type="button" id="subButton2" value="  －  " οnclick="calNum('-')"  ></td>
    <td><INPUT name="mulButton2" type="button" id="mulButton2" value="  ×  "  οnclick="calNum('*')"></td>
    <td><INPUT name="divButton2" type="button" id="divButton2" value="  ÷  " οnclick="calNum('/')" ></td>
  </tr>
  <tr>
    <td>计算结果</td>
    <td colspan="3"><INPUT name="txtresult" type="text"  id="txtresult" size="25"></td>
  </tr>
</table>
</form>
</body>
</html>