计算器前端实现

最新推荐文章于 2025-01-28 18:46:16 发布

Tila

最新推荐文章于 2025-01-28 18:46:16 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/ya__tao/article/details/81566689

版权

html：

<html>
    
    <head> </head>
    
    
    <body>
   <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./css/base.css" />
      </head>
    
        <div id="yi">
            <div id="er">
                <div id="zi">0</div>
            </div>
            <div class="san">AC</div>
            <div class="san">+/-</div>
            <div class="san">%</div>
            <div class="san cheng">/</div>
            <div class="san" id="n">7</div>
            <div class="san">8</div>
            <div class="san">9</div>
            <div class="san cheng">*</div>
            <div class="san">4</div>
            <div class="san">5</div>
            <div class="san">6</div>
            <div class="san cheng">-</div>
            <div class="san">1</div>
            <div class="san">2</div>
            <div class="san">3</div>
            <div class="san cheng">+</div>
            
            <div class="san kuan">0</div>
            <div class="san">.</div>
            <div class="san cheng">=</div>
            
        </div>
        <script src="./js/base.js"></script>
        </body>
    
</html>

css：


css：


@font-face{
    font-family:'ssss';
    src:url("../font/Broadway.ttf");
    }
	body{
		font-family:'ssss';
		}
#yi{
	width:330px;
	height:640px;
	/*border:1px solid black;*/
	margin:0 auto;
	
	}
	


#er{
	width:320px;
	height:187px;
	/*border:1px solid black;*/
	background:black;
	position:relative;
	}   
	
#zi{
	width:320px;
	height:60px;
	/*border:1px solid white;*/
	font-size:45px;
	position:absolute;
	bottom:20px;
	right:10px;
	color:white;
	text-align:right;
	line-height:60px;
	}
	
.san{
	width:80px;
	height:80px;
	border:1px solid black;
	float:left;
	margin-top:-1px;
	margin-left:-1px;
	background-color:#CCC;
	font-size:40px;
	line-height:80px;
	text-align:center;
	
	}
	
.cheng{
	background-color:#F60;
	}
	
.kuan{
	width:161px;
	}

js：

var diyi='';
var dier='';
var yunsuanfu='';
var xianshiDiv=document.getElementById('zi');
	
var els=document.getElementsByClassName('san');
for(var i=0;i<19;i++){
    els[i].onclick=function(){
		if(this.textContent=='/'||this.textContent=='*'||this.textContent=='+'||this.textContent=='-')
		
		
	{	yunsuanfu=this.textContent;}

if(this.textContent=='1'||this.textContent=='2'||this.textContent=='3'||this.textContent=='4'||this.textContent=='5'||this.textContent=='6'||this.textContent=='7'||this.textContent=='8'||this.textContent=='9'||this.textContent=='0'||this.textContent=='.'||this.textContent=='%'||this.textContent=='/'||this.textContent=='*'||this.textContent=='+'||this.textContent=='-'){
	
	if(yunsuanfu==''){
		
		diyi=parseInt(this.textContent);
		xianshiDiv.textContent=this.textContent;
		
		}
	else{
		dier=parseInt(this.textContent);
		xianshiDiv.textContent=this.textContent;
		
		}
	
      }


	if(this.textContent=='='){
		
		    if(diyi==''||dier==''){alert("请将所要运算的两个数输入完整")}
		
		    if(yunsuanfu=='/'){
			
			var jieguo=diyi/dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='+'){
			
			var jieguo=diyi+dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='-'){
			
			var jieguo=diyi-dier;
			xianshiDiv.textContent=jieguo;
			
			}
			if(yunsuanfu=='*'){
			
			var jieguo=diyi*dier;
			xianshiDiv.textContent=jieguo;
			
			}
			diyi=jieguo;
			jieguo='';
			yunsuanfu='';
			dier='';
		}
	

	}

-----------------------------------------------------未完善----------------------------------------------------------------------------------------------------------------------