原生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 相关文章推荐
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
vue组件横向树实现代码
Aug 02 Javascript
angularjs $http调用接口的方式详解
Aug 13 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
windows中为php安装mongodb与memcache
2015/01/06 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
私有程序集与共享程序集有什么区别
2013/04/05 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
会计专业推荐信
2013/10/29 职场文书
安全生产活动月方案
2014/03/09 职场文书
文明工地标语
2014/06/16 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
出生医学证明书
2014/09/15 职场文书
政风行风建设整改方案
2014/10/27 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
Python利用folium实现地图可视化
2021/05/23 Python