js实现简单计算器 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js计算器</title>
<style>
* {
	margin: 0px;
	padding: 0px;
}
.box {
	margin: 100px auto;
	width: 325px;
	border: 1px solid black;
	padding: 20px;
	background-color: #BB5557;
	border-radius: 10px;
}
.keys {
	overflow: hidden;
	padding: 10px;
}
.keys span {
	border-radius: 50px;
	float: left;
	height: 30px;
	width: 50px;
	margin-left: 10px;
	margin-top: 10px;
        line-height: 30px;
	text-align: center;
	background: #ccc;
	box-shadow: 2px 2px 2px 2px black;  /*盒阴影x偏移量，y偏移量，Bulr模糊程度（半径）**/
}
.outShow p {
	width: 95%;
	display: block;
	height: 80px;
	border-radius: 20px;
	/*border: 1px solid #ccc;*/
	background: white;
	color: black;
	text-align: right;
	line-height: 80px;
	font-size: 40px;
}
.keys span:hover {
	background: #ecf;
}
</style>
</head>
<body>
<div class="box">
  <div class="outShow">
    <p id="outShow"></p>
  </div>
  <div class="keys" id="keys"> <span>√</span> <span>±</span> <span>1/x</span> <span>x²</span> <span>x³</span> <span>7</span> <span>8</span> <span>9</span> <span>DEL</span> <span>C</span> <span>4</span> <span>5</span> <span>6</span> <span>÷</span> <span>*</span> <span>1</span> <span>2</span> <span>3</span> <span>+</span> <span>-</span> <span>0</span> <span>00</span> <span>.</span> <span>%</span> <span>=</span> </div>
</div>
</body>
<script>
    var outShow=document.getElementById("outShow");
    var keys=document.getElementById("keys");
    var spans=keys.getElementsByTagName("span");

    for(var i=0;i<spans.length;i++){
        spans[i].onclick=function(){
        var getvalue=spans[i].innerHTML;
            dealCount(getvalue);
            alert(getvalue);
        }
    }
    function dealCount(count){
        switch(count){
            case "=":
                break;
            case "+":
                break;
            case "-":
                break;
            case "*":
                break;
            case "÷":
                break;
            default:
                outShow.innerHTML=outShow.innerHTML+count.innerHTML;
                break;
        }
    }
    var outShow = document.getElementById("outShow");
    var spans = document.getElementById("keys").getElementsByTagName("span");

    var sNum1="";
    var op="";
    var isNeedClear=false;
    //给所有按钮添加点击事件
    for(i=0;i<spans.length;i++){
        spans[i].onclick=function(){
            dealCount(this.innerHTML);
        }
    }
    //实现点击事件
    function dealCount(inpuvalue){
        switch(inpuvalue){
            case "=":
                var sNum2=outShow.innerHTML;
                optionsall(sNum1,sNum2,op);
                break;
			case "x²":

			case "x³":
	
			case "%":

			case "√":
				
			case "1/x":
				
			case "±":
				
            case "+":

            case "-":

            case "*":

            case "÷":
                sNum1=outShow.innerHTML;
                op=inpuvalue;
                outShow.innerHTML=op;
                isNeedClear=true;
                break;
				
            //清空键的功能实现
            case "C":
                outShow.innerHTML="";
                break;
				
            //删除键的功能实现
            case "DEL":
                delNum=outShow.innerHTML
                outShow.innerHTML=delNum.substring(0,delNum.length-1);
                break;
				
				
				
            default:
                if(isNeedClear==false){
                    outShow.innerHTML=outShow.innerHTML+inpuvalue;
                }else{
                    outShow.innerHTML=inpuvalue;
                    isNeedClear=false;
                }
        }
    }
    //实现加减乘除功能
    function optionsall(sNum1,sNum2,op){
        switch(op){
            case "+":
     outShow.innerHTML=parseFloat(sNum1)+parseFloat(sNum2);
                break;
            case "-":
                outShow.innerHTML=parseFloat(sNum1)-parseFloat(sNum2);
                break;
            case "*":
                outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum2);
                break;
            case "÷":
                outShow.innerHTML=parseFloat(sNum1)/parseFloat(sNum2);
                break;
				 case "√":
               outShow.innerHTML=Math.sqrt(sNum1);
                break;
				 case "±":
                outShow.innerHTML=(0-sNum1);
                break;
				 case "1/x":
                outShow.innerHTML=1/parseFloat(sNum1);
                break;
				case "%":
              outShow.innerHTML=parseFloat(sNum1)%parseFloat(sNum2);
                break;
				case "x²":
              outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1);
                break;
				case "x³":
              outShow.innerHTML=parseFloat(sNum1)*parseFloat(sNum1)*parseFloat(sNum1);
                break;
				
        }            
    }
    
</script>
</html>

posted @ 2022-04-11 20:40  妄自想  阅读(330)  评论(0)    收藏  举报