js计算器代码加减乘除_如何用jQuery做一个简易版计算器

最新推荐文章于 2023-04-03 20:42:04 发布

weixin_39750731

最新推荐文章于 2023-04-03 20:42:04 发布

阅读量536

点赞数

文章标签： js计算器代码加减乘除如何用c语言计算一个程序运行的时间用java编写一个计算器

经过几个小时地敲敲打打，终于把这一部分的代码完成了。

这类问题的难点不在于布局，而是如何恰当地使用jQuery达成计算、交互的目的，比如储存、显示数值，数据类型的转换等。

在听老师讲课之前的我，思路是混乱的，明明只是最简单的加减乘除，却无从下手。

在做表格时，我一开始用的是嵌套的button标签，但过于繁琐就舍弃了，改用td:hover来提示模块。

如果搭建框架是实现简易版计算器的第一步，那么第二步就是将每一个表格中的数据传输到储存它的变量中，也就是下面js代码中的equ变量，这里要用到$('#options').find('td').click(function(){...}）函数，以及构造equ+=val字符串数组。

最后，在js代码上出现了一些问题，最好还是单独建一个js文件，方便查错和修改。

代码块附上：

<!DOCTYPE html>
<html>
<head>
	<title>calculator</title>
	<style type="text/css">
		th,td{
			width: 60px;
			height: 40px;
			text-align: center;
			border: 2px solid crimson;
			font-size: 20px;
		}
		table{
			border-collapse: collapse; 
			}
		td:hover{
			background-color: antiquewhite;
		}
		#exp,#res{
			text-align: right;
			padding: 0px 10px 0px;
		}
	</style>
	<script src="lib/jquery-3.4.1.min.js" ></script>
</head>
<body>
	<h2>jquery实现四则运算</h2>
	<hr>
	<table id="options">
		<tr>
		<th id="exp" colspan="4"></th>
		</tr>
		<tr><th id="res" colspan="4"></th>
		</tr>
    	<tr>
    		<td>9</td>
    		<td>8</td>
    		<td>7</td>
    		<td id="cls">C</td>
    	</tr>
    	<tr>
    		<td>6</td>
    		<td>5</td>
    		<td>4</td>
    		<td>+</td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td>2</td>
    		<td>1</td>
    		<td>-</td>
    	</tr>
    	<tr>
    		<td>0</td>
    		<td>=</td>
    		<td>*</td>
    		<td>/</td>
    	</tr>
    </table>
</body>
</html>
<script src="js.js"></script>

下面是js代码

$(document).ready(function(){
    var equ='';
    $('#options').find('td').click(function(){
        var val=$(this).text(); 
        equ+=val;
        $('#exp').text(equ);
        var num1=equ[0];
        var num2=equ[2];
        var operator=equ[1];

        if(operator=='+'){
        	$('#res').text(parseInt(num1)+parseInt(num2));
        }
        else if(operator=='-'){
        	$('#res').text(num1-num2);
        }
        else if(operator=='*'){
        	$('#res').text(num1*num2);
        }
        else if(operator=='/'){
        	$('#res').text(num1/num2);
        }
    })
    $('#cls').click(function(){
    	equ='';
    	$('#res').text(''); 
    	$('#exp').text('');
    })
})

另外，这个计算器存在很大的缺陷，比如无法进行多位数计算或者更加复杂的计算，有待改进的地方还有很多，希望通过日后的学习能够实现。

weixin_39750731

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js计算器代码加减乘除_如何用jQuery做一个简易版计算器

经过几个小时地敲敲打打，终于把这一部分的代码完成了。这类问题的难点不在于布局，而是如何恰当地使用jQuery达成计算、交互的目的，比如储存、显示数值，数据类型的转换等。在听老师讲课之前的我，思路是混乱的，明明只是最简单的加减乘除，却无从下手。在做表格时，我一开始用的是嵌套的button标签，但过于繁琐就舍弃了，改用td:hover来提示模块。如果搭建框架是实现简易版计算器的第一步，那么第二步就是将...
复制链接

扫一扫