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

最新推荐文章于 2023-09-21 04:49:31 发布

原创最新推荐文章于 2023-09-21 04:49:31 发布 · 1.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

JQuery 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了一个使用jQuery编写的简易计算器。通过点击按钮，可以进行加、减、乘、除四则运算，并将结果显示在输入框中。示例代码展示了如何监听按钮点击事件，获取输入值，进行计算并将结果输出。

<!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 src="../../js/jquery-1.7.2.min.js"></script>

</head>

<script>
	$(function(){
		$("input[type='button']").click(function(){
			var opt = $(this).val();
			var num1 = parseInt($("#txtNum1").val());
			var num2 = parseInt($("#txtNum2").val());
			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;
			} 
			$("#txtresult").val(ret);
		});
	});
</script>

<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" value=""></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="＋"  opt="0"></td>
      <td><INPUT name="subButton2" type="button" id="subButton2" value="－"  opt=1></td>
      <td><INPUT name="mulButton2" type="button" id="mulButton2" value="×" ></td>
      <td><INPUT name="divButton2" type="button" id="divButton2" value="÷" ></td>
    </tr>
    <tr>
      <td>计算结果</td>
      <td colspan="3"><INPUT name="txtresult" type="text"  id="txtresult" size="25"></td>
    </tr>
  </table>
</form>
</body>
</html>