原生JavaScript制作计算器


Posted in Javascript onOctober 16, 2016

原生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制作计算器

Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
详解Node.js实现301、302重定向服务
Apr 07 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
Oct 26 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 #Javascript
JavaScript正则表达式实例详解
Oct 16 #Javascript
js实现碰撞检测特效代码分享
Oct 16 #Javascript
js+css3制作时钟特效
Oct 16 #Javascript
js实现可旋转的立方体模型
Oct 16 #Javascript
移动端滑动插件Swipe教程
Oct 16 #Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
php将数据库导出成excel的方法
2010/05/07 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
十八届三中全会学习方案
2014/02/16 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
合作协议书
2014/04/23 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
分享提高 Python 代码的可读性的技巧
2022/03/03 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers