js源码实现基础计算器

HTML结构

1. 利用div、ul-li、span、button等标签将内容结构搭建起来

	<div class="main">
			<span class="span"></span>
			<span class="span"></span>
			 <ul>
			 	<li class="addition">+</li>
			 	<li>1</li>
			 	<li>2</li>
			 	<li>3</li>
			 	<li class="subtraction">-</li>
			 	<li>4</li>
			 	<li>5</li>
			 	<li>6</li>
			 	<li class="multiplication">*</li>
			 	<li>7</li>
			 	<li>8</li>
			 	<li>9</li>
			 	<li class="division">/</li>
			 	<li>.</li>
			 	<li>0</li>
			 	<li class="equalSign">=</li>
			 </ul>
			 <button class="but" id="del">删除</button>
		     <button class="but" id="real">确定</button>
		</div>

CSS样式

1. 在设置样式之前要记得清除浏览器默认样式，便于布局
2. 布局过程中设置定位，记得 父级相对，子级绝对，便于布局，在作细小的调整时，可用相对定位，或者边距来进行调整

//清除浏览器自带的padding 和 margin，以及li d的项目符号，和 a标签的下划线等，便于布局
div,body,li,ul,p,span{
				padding: 0px;
				margin: 0px;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
				color: #555;
			}
	//给父级设置相对定位
			.main{
				margin:100px auto;
				width: 260px;
				height: 208px;
				position: relative;
			}
			ul{
				width: 208px;
				height: 208px;
				text-align: center;
			}
	// 由于存在点击操作，要么在创建标签的时候li搭配a标签使用，要么加上cursor：pointer；鼠标移入变为手的形式
			li{
                float: left;
				width: 50px;
				height: 50px;
				border-radius: 25px;
				line-height: 50px;
				color: #fff;
				font-size: 25px;
				font-weight: bold;
				border:1px solid transparent;
				cursor: pointer;
				background-color:darksalmon;
			}
	//给按钮设置样式
			.but{
				width: 50px;
				border-radius: 25px;
				height: 100px;
				line-height: 50px;
				position: absolute;
				right: 0px;
				border:none;
				outline: none;
				color: #555555;
			}
			#del{
				top: 72px;
			}
			#real{
				top: 180px;
			}
	//这里用span 标签作为显示数据的 文本框
			.span{
				box-sizing: border-box;
				display: inline-block;
				padding-left:10px ;
				width: 260px;
				height: 30px;
				color: #555555;
				line-height: 30px;
				border: 1px solid #555;
				overflow: hidden;
				border-radius: 25px;
			}

JS行为

【这里是给ul设置一个事件委托的监听事件】

        var ul = document.getElementsByTagName("ul")[0];
        //显示结果的 span 标签
	    var result = document.getElementsByClassName("span")[1];
	    //这里，给 = 符号设置了一个class名
	    var equal = document.getElementsByClassName("equalSign")[0];
	    // ul事件委托
	   ul.addEventListener("click",function(e){
	   // 设置event 、target兼容性
	   	    var event = event || window.event;
	   	    var target = event.target || event.srcElement;
	   // 页面视图的时事更新
	   	    view(target)
	   	    var spanView = document.getElementsByClassName("span")[0];
	   // 这里由于没有将两个按钮写在了ul的外面，所以，需要获取两个按钮标签
	   	    var real = document.getElementById("real");
	   	    var del = document.getElementById("del");
	   	    var str = spanView.innerHTML;
	   // 删除按钮事件
	   	    var  count = str.length
	   	     del.onclick = function(){
	             count --;
	             spanView.innerHTML = str.substring(0,count)
	   	     }
	   	// 确定按钮 
	   	    real.onclick = function(){
	   	    	Calculation()
	   	    }
	   	// 运算后的 = 符号事件
	   	    equal.onclick = function(){
	   	      // 计算的方法
	   	    	Calculation()
	   	    }
	   	 // 这个可要可不要，时事的点击每一个运算符号就进行计算，显示结果
	   	    if(target.innerHTML == "+" || target.innerHTML == "-" || target.innerHTML == "*" || target.innerHTML == "/"){
	   	    	Calculation()
	   	    }
	   })

视图方法

 function view(targrt){
		var spanView = document.getElementsByClassName("span")[0];
		spanView.innerHTML += target.innerHTML;
  }

运算方法

1. 获取输入的字符串，转换为数组
2. 再将数字和运算符号分别装在两个数组里面

 function str(){
     //获取输入的字符串
	  	  var spanView = document.getElementsByClassName("span")[0];
	 //将其转换为数组
	  	  var str = spanView.innerHTML.split("")
	  	  var sign = [];
	  	  for(var i = 0;i < str.length;i++){	  	 
	  	   	if(str[i] == "+" || str[i] == "-"||str[i] == "*"||str[i] == "/"){
	 //将运算符号存放在sign 数组里面，
	  	  		sign.push(str[i])
	  // 再将原数组里面的符号的部分替换为“，”
	  	  		str.splice(i,1,",")
	  	  	}
	  	  }
	 // 将原数组转变为字符串，根据“，”将其转换为新的数组，这样就能将每一个数字分隔开来
	  	  var num = str.join("").split(",")
	 //  用数组的形式返回两个数组
          return [num,sign] 
	  }

首先考虑运算优先级，* 和 / 优先其次再考虑，+ 和 -

// 接收 num 数组和 sign数组
     var arr = str();
   // 遍历 sign数组，找到 *  /  运算符，先进行运算 
	for(var j = 0;j < arr[1].length;j++){
	//当运算符为*  时
		if(arr[1][j] == "*"){
	//  找到num数组中对应着的 第j 个和 第j+1 个数 ，进行* 或者 / 运算，并且将其赋值为  num的 第 j 为 数据， 将第 j+1 位赋值为0 
			arr[0][j] = Number(arr[0][j]) * Number(arr[0][j+1]);
			arr[0][j+1] = 0;
	// 运算完后，将 * 或者 / 改为 +   或者 -
			arr[1][j] = "+"
		}else if(arr[1][j] == "/"){
			arr[0][j] = Number(arr[0][j])/ Number(arr[0][j+1]);
			arr[0][j+1] = 0;
			arr[1][j] = "+"
		}
	}

将 * 和 / 的优先级运算完全后，此时的 sign 数组里面就都为 + - 运算符， 可直接进行运算

       // 定义一个变量，初值为 num 数组的 第一个数
        var result = arr[0][0];
       // 获取第二个span 存放最后的计算结果
		var span2 = document.getElementsByClassName("span")[1]
	  // 循环遍历sign 数组 
		for( var i = 0;i < arr[1].length;i++){
		//使用 switch 语句 判断 运算符号
			switch (arr[1][i]){
				case "+":
	 //由于num 数组的第一个数据赋值给 result ，所以此时的 num数组的下标为i+ 1 
				   result = Number(result) + Number(arr[0][i+1]) 
					break;
				case "-":
				   result =  Number(result) - Number(arr[0][i+1])
					break;
			}
		}
	 span2.innerHTML = result;