原生JavaScript制作计算器

站长资源 2024/11/16 佚名

57 1538 57

相思资源网 Design By www.200059.com

原生JavaScript制作计算器

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <!--第一个数X-->
 X:<input type="text" id="inp1" value="" /><br />
 <!--符号-->
 F:<input type="text" id="inp2" value="" /><br />
 <!--第二个数Y-->
 Y:<input type="text" id="inp3" value="" /><br />
 <!--结果R-->
 R:<input type="text" id="inp4" value="" /><br />
 <!--点击按钮-->
 <input type="submit" name="btn" id="btn" value="请计算" />
 </body>
 <script type="text/javascript">
 var inpX1 = document.getElementById("inp1");
 var inpF1 = document.getElementById("inp2");
 var inpY1 = document.getElementById("inp3");
 var inpR = document.getElementById("inp4");
 var result = document.getElementById("btn");
 var inpX ;
 var inpY ;
 var inpF ;
 var sum;
// 点击事件
 result.onclick = function(){
  inpX = Number(inpX1.value);
  inpF = inpF1.value;
  inpY = Number(inpY1.value);
  switch (inpF){
  case "+":{
   sum = inpX + inpY;
   break;
  }
  case "-":{
   sum = inpX - inpY;
   break;
  }
  case "*":{
   sum =inpX * inpY;
   break;
  }
  case "/":{
   sum = inpX / inpY;
   break;
  }
  default:{
   alert("请输入加减乘除中的任意一个");
   break;
  }
  }
  inpR.value = sum.toFixed(2);
  
 }
 </script>
</html>

再给大家分享一个稍微复杂些的计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body,ul{ margin:0px; padding:0px;}
body{ background:#AF6332}
li{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}
.clearfix:after{ content:""; display:block;clear:both}
.clearfix{zoom:1;}
/*是用inset可以将外部阴影改成内部阴影;若要实现内外阴影同时存在，将其并在一行用逗号隔开*/
.calBox{ width:460px; padding-bottom:10px;background:#FDFDFD; border-radius:5px; position:absolute; left:50%; top:50%; margin-left:-230px; margin-top:-225px; box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; -webkit-box-shadow:0px 0px 10px rgba(0,0,0,0.8),0px 0px 10px rgba(0,0,0,0.5) inset; background:#F9F9F9; overflow:hidden}
input{ width:406px; height:82px; margin:10px 7px 0px; border-radius:5px; border:1px solid #64655F; box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; -webkit-box-shadow:0px 5px 2px rgba(157,157,145,0.8) inset; outline:none; background:#FCFDEB; text-align:right; font-family:"微软雅黑"; font-size:40px; padding:0px 10px;}
ul{}
li{ list-style:none; width:74px; height:34px; line-height:34px; text-align:center; font-family:"微软雅黑"; border:1px solid #8B8B8B; border-radius:5px; background:url(img/calBg) repeat-x; float:left; margin:12px 6px 0px;}
.one li{ height:44px; background:url(calBg1.jpg) repeat-x; line-height:44px;cursor:pointer;}
.one .orange{ background:url(calBg2.jpg) repeat-x; border:1px solid #875733;}
.one .black{ background:url(calBg3.jpg) repeat-x; border:1px solid #363636; color:#fff;}
.one .gray{ background:url(calBg4.jpg) repeat-x; border:1px solid #5F6366;}
.zero{ width:160px;}
.one .deng{ background:url(calBg5.jpg); height:100px;}
.twoBox{ width:353px; overflow:hidden; }
.two{ width:358px;}
.calBox .three { margin:0px}
.calu{ padding:0px 10px; width:470px;}
</style>
<script>
function findArr(a,c){for(var b=0;b<a.length;b++){if(a[b]==c){return true}}return false}function getClass(d,f){if(document.getElementsByClassName){return d.getElementsByClassName(f)}else{var a=[];var e=document.getElementsByTagName("*");for(var c=0;c<e.length;c++){var b=e[c].className.split(" ");if(findArr(b,f)){a.push(e[c])}}return a}};
window.onload=function()
{
	var aNum=getClass(document,'num');
	var oText=document.getElementById('text');
	var aPer=getClass(document,'oper');
	var oPer=document.getElementById('per');
	var oText1=document.getElementById('text1');
	var oDeng=getClass(document,'deng')[0];
	var oSq=getClass(document,'sq')[0];
	var oRec=getClass(document,'rec')[0];
	var oZheng=getClass(document,'zheng')[0];
	var oOn=getClass(document,'on')[0];
	var oOff=getClass(document,'off')[0];
	var oClea=getClass(document,'clea')[0];	
	var bOnOrOffClick=false;	
	
	function fnNum(a)
	{		
		
		
		var bClear=false;
		oText.value='0'	
		
		
		for(var i=0;i<aNum.length;i++)
		{						
			aNum[i].onclick=function()
			{	
				if(!bOnOrOffClick)return;
				
				if(bClear)
				{					
					
					bClear=false;
				}
					
				
				if(oText.value.indexOf('.')!=-1)
				{
					if(this.innerHTML=='.')
					{
						return;	
					}	
				}
				if(oPer.value&&oText.value&&oText1.value=='')
				{									
					oText1.value=oText.value;	
					oText.value='';																
				}	
							
				var re=/^0\.{1}\d+$/;
				var re1=/^([0]\d+)$/;	
				oText.value+=this.innerHTML;
				
				
				if(re.test(oText.value))
				{
					return;
				}
					
				if(re1.test(oText.value))
				{	
					oText.value=this.innerHTML;				
				}
			}	
			//符号部分的添加
			for(var j=0;j<aPer.length;j++)
			{			
				aPer[j].onclick=function()
				{					
					
					if(oText.value&&oPer.value&&oText1.value)
					{
						var n=eval(oText1.value+oPer.value+oText.value);			
						oText.value=n;	
						oText1.value='';					
					}
					oPer.value=this.innerHTML;		
				}
									
			}
			//点击等号的时候
			oDeng.onclick=function()
			{			
				//+-*/%的情况
				if(oText1.value==''&&oPer.value==''&&oText.value=='')
				{
					return;	
				}
				var n=eval(oText1.value+oPer.value+oText.value);			
				oText.value=n;
				oText1.value='';
				oPer.value='';	
				bClear=true;																
			}
			//点击开根号的时候
			oSq.onclick=function()
			{
				var m=Math.sqrt(oText.value);	
				oText.value=m;
			}
			//点击倒数的时候
			oRec.onclick=function()
			{
				var a=1/oText.value;
				
				if(oText.value=='0')
				{
					a='正无穷'	
				}
				oText.value=a;	
			}
			//正负号的时候
			oZheng.onclick=function()
			{
				if(oText.value>0)
				{
					oText.value=-oText.value;
				}	
				else
				{
					oText.value	=-oText.value;	
				}
			}	
			//清屏的时候
			oClea.onclick=function()
			{
				oText.value='0';
				oText1.value='';
				oPer.value='';	
			}	
		}	
	}
	//on时
	oOn.onclick=function()
	{
		bOnOrOffClick=true;
		fnNum(bOnOrOffClick);	
	}	

	//off时
	oOff.onclick=function()
	{		
		bOnOrOffClick=false;
		fnNum(bOnOrOffClick);
		oText.value='';
	}
}
</script>
</head>

<body>
<div class="calBox">	
  <div class="calu">
  	<input type="text" id="text">  	
    <ul class="one clearfix">
      <li class="orange on">开机</li>
      <li class="orange off">关机</li>
      <li class="orange clea">清屏</li>
      <li class="black zheng">+/-</li>
      <li class="black rec">1/x</li>
      <li class="num">7</li>
      <li class="num">8</li>
      <li class="num">9</li>
      <li class="gray oper">/</li>
      <li class="black oper">%</li>
      <li class="num">4</li>
      <li class="num">5</li>
      <li class="num">6</li>
      <li class="gray oper">*</li>
      <li class="black sq">√</li>      
      <!-- -->      
    </ul>
    <div class="clearfix">
      <div class="twoBox fl">
      	<ul class="one fl two">
          <li class="num">1</li>
          <li class="num">2</li>
          <li class="num">3</li>
          <li class="gray oper">-</li>
          <li class="zero num">0</li>
          <li class="num">.</li>
          <li class="gray oper">+</li>
        </ul>
      </div>
      <ul class="one three clearfix fl">
        <li class="black deng fl">=</li>
      </ul>    
    </div>
  </div>
</div>
<input type="text" id="per" style="display:none">
<input type="text" id="text1" style="display:none">
</body>
</html>

效果图演示

javascript制作计算器,js原生计算器,javascript计算器代码

标签：

javascript制作计算器,js原生计算器,javascript计算器代码

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“原生JavaScript制作计算器”

暂无原生JavaScript制作计算器的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

原生JavaScript制作计算器

javascript制作计算器,js原生计算器,javascript计算器代码

bootstrap读书笔记之CSS组件（上）

JavaScript 实现的checkbox经典实例分享

评论“原生JavaScript制作计算器”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

原生JavaScript制作计算器

javascript制作计算器,js原生计算器,javascript计算器代码

bootstrap读书笔记之CSS组件（上）

JavaScript 实现的checkbox经典实例分享

评论“原生JavaScript制作计算器”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存