您的位置：首页 > Web前端 > JavaScript
简单的js实现的计算器

2014-11-26 15:39 369 查看
由于比较简单，直接贴代码...
<!DOCTYPE html>
<html>
    <head>
	    <script src="js/jquery-1.11.1.js"></script>
	    <script>
		    //定义两个数字变量，用来保存两个操作的数字
			var number1 = 0;
			var number2 = 0; 
			
			//定义两个数字字符串，用来保存没一次保存的值
			var numberStr1 = "";
			var numberStr2 = "";
		    
			//定义一个字符串，用来表示操作符
			var caculator = "";
			
			//定义一个字符串，用来表示整个表达式
			var result = "";
			
			//标识符，当flag = false 代表添加第一个操作数字，当flag = true 代表添加第二个操作数字
			var flag = false;
			$(function(){
			    //为每个数字绑定监听事件
				$(".number").click(function(){
				    $("#result").html("");  //清空表达式内容
					
					//添加操作数字
					if(!flag)
					    addNumber1($(this).val());
					else
					    addNumber2($(this).val());
				});
				
				//为 / * - + = 绑定事件
				$(".caculator").click(function(){
				    if(result == null || result == "") {
					    alert("请添加第一个操作数，否则无法添加操作符");
						return;
					}
					
					
					var caculator = $(this).val();
					
					if(flag && caculator != "=") return;  //因为添加了第二个操作数字了，所以这里直接返回
					
					//添加第一个操作数，并且添加了操作符之后，那么记录下标识符，然后按下数字就添加第二个操作数
					flag = true;
					
					//区分要进行的操作，然后在结果的表达式中，添加操作符
					if(caculator == "+"){
					    addCaculator("+");
					}else if(caculator == "/"){
					    addCaculator("/");
					}else if(caculator == "*"){
					    addCaculator("*");
					}else if(caculator == "-"){
					    addCaculator("-");
					}else if(caculator == "="){
					    //这里执行计算结果
						caculate();
					}
				});
				
				//添加第一个操作数
				function addNumber1(num){
				    //使用连接符 + 会在最前面多了一个0，所以这里去掉第一个0
                    if(number1 == 0){
					    number1 = num;
					}else{
                        number1 += num;
					}					
					
					$("#result").html(number1);
					result = number1;  //记录表达式的第一个操作数值
				}
				
				//添加第二个操作数
				function addNumber2(num){
				    if(number2 == 0){
					    number2 = num;
					}else{
                        number2 += num;
					}					
					result = result + " " + number2;
					$("#result").html(result);
				}
				
				//添加操作符
				function addCaculator(cal){
				    caculator = cal;
					result = result + " " + caculator
					$("#result").html(result);
					
				}
				
				//当点击 = 号的时候，计算操作结果
				function caculate(){
				    var temp;  
					if(caculator == "+"){
					    //由于字符串的 + 操作不会自动转换，所以这里手动转换
						temp = parseInt(number1) + parseInt(number2);
					}else if(caculator == "/"){
					    if(number2 == "0"){
						    alert("对不起，除数不能为0");
							$("#result").html("");
							clear();
							return;
						}
					    temp = number1 / number2;
					}else if(caculator == "*"){
					    temp = number1 * number2;
					}else if(caculator == "-"){
					    temp = number1 - number2;
					}
					
					$("#result").html(result + " = " + temp);
					
					clear();
				}
				
				//清空数据
				function clear(){
				    number1 = 0;
					number2 = 0;
					result = "";
					caculator = "";
					flag = false;
				}
			});
		</script>
		
	    <title>这是骆宏的计算器</title>
		
		<style>
		    body, ul, h1, h2, h3, h4, h5, li, ol, span, p, div{
			    border:0;
				margin:0;
			}
			
			button{
			    display:inline-block;
			    width:70px;
			}
			
			#caculator{
			    background:grey;
				width:450px;
				margin:0 auto;
			}
			
			#result_container{
				width:450px;
				margin:0 auto;
			}
			
			#result{
			    border:1px solid black;
				height:60px;
			}
		</style>
	</head>
	
	<body>
	    <div id="caculator_container">
		
		    <h1 align="center">该计算器只支持最基本的运算，也就是 1 + 2 = 3 这种类型的运算</h1>
		    <br>
			<br>
			<br>
			<div id="result_container">
			    <span>结果为:</span><p id="result"></p>
			</div>
			
			<div id="caculator">
			    <table width="400">
				    <tr>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					
					<tr>
					    <td><button value="7" class="number">7</button></td>
						<td><button value="8" class="number">8</button></td>
						<td><button value="9" class="number">9</button></td>
						<td><button class="caculator" value="/">/</button></td>
					</tr>
					
					
					<tr>
					    <td><button value="4" class="number">4</button></td>
						<td><button value="5" class="number">5</button></td>
						<td><button value="6" class="number">6</button></td>
						<td><button class="caculator" value="*">*</button></td>
					</tr>
					
					
					<tr>
					    <td><button value="1" class="number">1</button></td>
						<td><button value="2" class="number">2</button></td>
						<td><button value="3" class="number">3</button></td>
						<td><button class="caculator" value="-">-</button></td>
					</tr>
					
					<tr>
					    <td></td>
						<td><button value="0" class="number">0</button></td>
						<td><button class="caculator" value="=">=</button></td>
						<td><button class="caculator" value="+">+</button></td>
					</tr>
					
					
				</table>
			</div>
		</div>
	</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航