js_练习：计算器-CSDN博客

本文链接：https://blog.csdn.net/mtb278750/article/details/130593738

该文章展示了一个使用HTML构建布局，CSS进行样式设计，JavaScript实现功能的简单计算器。页面动态生成数字按钮和运算符按钮，用户可以点击输入数值和进行加减乘除运算。当点击等于号时，程序会计算结果并显示。此外，还包含清空功能。

摘要由CSDN通过智能技术生成

2 计算器

<html>
    <head>  
	     <title>计算器</title>
		 <meta charset="gbk"/>
		 <style type="text/css">
		         div{
				     border:1px solid;
					 padding:10px;
				 }
				 #div0{
				    width:1000px;
					height:600px;
					position:absolute;
					top:100px;
					left:450px;
				 }
				 #divtop{
				    width:600px;
					height:150px;
					position:absolute;
					top:50px;
					left:200px;
					text-align:center;
				 }
				 #divleft,#divright{
					height:300px;
					position:absolute;
					top:240px;
				 }
				 #divleft{
				    width:350px;
				    left:150px;
				 }
				 #divright{
				    right:150px;
					width:260px;
				 }
				 #span_text{
				    font-size:70px;
					letter-spacing:90px;
					font-weight:bold;
					color:blue;
					text-indent:50px;
				 }
				 #text_show,#but_clear{
				    font-size:40px;
				 }
				 #divleft input,#divright input{
				     width:55px;
					 height:55px;
					 font-size:30px;
					 font-weight:bold;
				 }
				 #divleft input{
				     margin:40px 6px;
				 }
				 #divright input{
				     margin:40px 14px;
				 }
				 
		 </style>
	</head>
	<body> 
	     <div id="div0">
		     <div id="divtop">
		           <span id="span_text">&nbsp;计算器</span><br/>
				   <input type="text" id="text_show" disabled="disabled"/>
				   <input type="button" id="but_clear" value="清空" style="color:red;"/>
		     </div>
			 <div id="divleft">
			       <!--
					   <input type="button" value="0"/>
					   <input type="button" value="1"/>
					   <input type="button" value="2"/>
					   <input type="button" value="3"/>
					   <input type="button" value="4"/>
					   <input type="button" value="5"/>
					   <input type="button" value="6"/>
					   <input type="button" value="7"/>
					   <input type="button" value="8"/>
					   <input type="button" value="9"/>
				   -->
		     </div>
			 <div id="divright">
			      <!--
					  <input type="button" value="+"/>
					  <input type="button" value="-"/>
					  <input type="button" value="×"/>
					  <input type="button" value="÷"/>
					  <input type="button" value="."/>
					  <input type="button" value="=" style="color:blue;"/>
				  -->
		     </div>
		 </div>
		 <script  type="text/javascript">
		 
		      //1 文档加载成功 动态在divleft和divright中创建按钮
			  var strRight="+-×÷.=";
			  var oText;
			  window.onload=function(){
			      var odivLeft=document.getElementById("divleft");
				  oText=document.getElementById("text_show");
				  var odivRight=document.getElementById("divright");
				  for(var i=0;i<=9;i++){
				     var oBut=document.createElement("input");
				     odivLeft.appendChild(oBut);
					 oBut.type="button";
					 oBut.value=i;
					 oBut.onclick=function(){
					    setNum(this.value);
					 }
				  }
				  for(var i=0;i<strRight.length;i++){
				     var oBut=document.createElement("input");
				     odivRight.appendChild(oBut);
					 oBut.type="button";
					 oBut.value=strRight.charAt(i);
					 oBut.onclick=function(){
					    if(this.value=="."){
						    setNum(this.value);
						}else if(this.value=="="){
						    getResult();
						}else{
						    setYsf(this.value);
						}
					 }
				  }
				  //给id="but_clear"添加点击事件
				  document.getElementById("but_clear").onclick=jsqClear;
			  }
			  //定义全局变量
			  var num1="",num2="",ysf="";
			  //点击方法
			  function setNum(n){
			      if(ysf){
				     //判断是不是.
					 if(n=="."){
					     if(num2.indexOf(".")!=-1){
						     alert("一个数字只能偶一个小数点！");
							 return;
						 }
					 }
				     num2+=n;
				  }else{
				    //判断是不是.
					 if(n=="."){
					     if(num1.indexOf(".")!=-1){
						     alert("一个数字只能偶一个小数点！");
							 return;
						 }
					 }
				     num1+=n;
				  }
				  //给<input type="text" id="text_show"/>赋文本内容
				  oText.value=num1+""+ysf+""+num2;
			  }
			  function getResult(){
			     if(!num2){
					    alert("数据不完整 不能运算！");
						return;
			     }
			     var fnum1=parseFloat(num1);
				 var fnum2=parseFloat(num2);
				 var result="";
				 switch(ysf){
				     case "+":
					 result=fnum1+fnum2;break;
					 case "-":
					 result=fnum1-fnum2;break;
					 case "×":
					 result=fnum1*fnum2;break;
					 case "÷":
					 result=fnum1/fnum2;break;
				 }
				 result=parseInt(result*100)/100;
				 //给<input type="text" id="text_show"/>赋文本内容
				  oText.value=num1+""+ysf+""+num2+"="+result;
			  }
			  function jsqClear(){
			       num1="";num2="";ysf="";
				   oText.value="";
			  }
			  function setYsf(y){
			        if(ysf){
					       alert("运算符只能赋值一次！");
							 return;
					}
					ysf=y;
					//给<input type="text" id="text_show"/>赋文本内容
				    oText.value=num1+""+ysf+""+num2;
			  }
			  
			  
		 </script>
	</body>
</html>