原生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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 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
做个自己站内搜索引擎
2006/10/09 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
Python错误处理操作示例
2018/07/18 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
详解python logging日志传输
2020/07/01 Python
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
微博营销计划书
2014/01/10 职场文书
校长先进事迹材料
2014/02/01 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
代理人委托书
2014/08/01 职场文书
家庭困难证明
2014/10/12 职场文书
同学聚会邀请函
2015/01/30 职场文书
公司安全管理制度范本
2015/08/05 职场文书
教师节主题班会教案
2015/08/17 职场文书
担保书格式范文
2015/09/22 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL