首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

简单实现JS计算器功能

Posted in Javascript onDecember 21, 2016

该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。

效果图：

简单实现JS计算器功能

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<link type="text/css" rel="stylesheet" href="css/style.css"></link> 
</head> 
<body> 
  <!--定义按键表格,每个按键对应一个事件触发--> 
  <div id="cal" class="cal"> 
    <form action="./calcuServlet" method="post" id="toCalcu"> 
      <div class="cont"> 
      <input id="upText" class="textShow" type="text" name="process"  
         maxlength="10" readonly="readonly" />  
      <input id="downText" class="text" type="text" name="text" value="0" 
         maxlength="10" readonly="readonly" />  
          
      <input type="button" class="button" name="deleteAll" value="C" onclick="clearAllText()" /> 
      <input type="button" class="button" name="opposite" value="+/-" onclick="oppositeOp()" />  
      <input type="button" class="button" name="delOne" value="←" onclick="deleteOneDigit()" />  
      <input type="button" class="button" name="Add" value="+" onclick="clickOperation('+')" />      
      <input type="button" class="button" name="seven" value="7" onclick="clickNum(7)" /> 
      <input type="button" class="button" name="eight" value="8" onclick="clickNum(8)" /> 
      <input type="button" class="button" name="nine" value="9" onclick="clickNum(9)" /> 
      <input type="button" class="button" name="Reduce" value="-" onclick="clickOperation('-')" /> 
      <input type="button" class="button" name="Four" value="4" onclick="clickNum(4)" /> 
      <input type="button" class="button" name="Five" value="5" onclick="clickNum(5)" /> 
      <input type="button" class="button" name="Sex" value="6" onclick="clickNum(6)" />  
      <input type="button" class="button" name="Multip" value="x" onclick="clickOperation('x')" /> 
      <input type="button" class="button" name="One" value="1" onclick="clickNum(1)" />  
      <input type="button" class="button" name="Two" value="2" onclick="clickNum(2)" /> 
      <input type="button" class="button" name="Three" value="3" onclick="clickNum(3)" /> 
      <input type="button" class="button" name="Division" value="÷" onclick="clickOperation('/')" /> 
      <input type="button" class="button" name="opposite" value="√" onclick="more()" />    
      <input type="button" class="button" name="Zero" value="0" onclick="clickNum(0)" /> 
      <input type="button" class="button" name="Point" value="." onclick="clickNum('.')" /> 
      <input type="button" class="button" name="Equal" value="=" onclick="calcu()" />  
      </div> 
    </form> 
 
  </div> 
  <div class="funcBtn"> 
    <input type="button" id="show" class="button" value="show" onclick="show()" /> <input 
      type="button" id="hide" class="button" value="hide" onclick="hide()" /> 
  </div> 
   
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="./js/calcu.js"></script> 
</body> 
</html>

css代码：

@CHARSET "UTF-8"; 
.button { 
  width: 73px; 
  height: 50px; 
  margin-bottom: 5px; 
  border: 1px solid #ddd; 
  border-radius: 1px; 
  font-weight: bold; 
  color: #1e395b; 
  background: aqua; 
  font-size:20px; 
  border-radius: 3px; 
} 
.text { 
  width: 300px; 
  border: 1px solid #c2c2c2; 
  height: 50px; 
  border-radius: 5px; 
  font-size: 24px; 
  text-align: right; 
  background: #ffffff; 
  margin-top: 10px; 
  margin-bottom: 10px; 
} 
.textShow{ 
  width: 300px; 
  border: 1px solid #c2c2c2; 
  height: 40px; 
  border-radius: 5px; 
  font-size: 18px; 
  text-align: right; 
  background: #ffffff; 
  margin-top: 10px; 
  margin-bottom: 10px; 
} 
.cal{ 
margin-left:200px; 
border:2px solid #99ccff; 
margin:100px auto; 
position:relative; 
width:330px; 
height:420px; 
border-radius: 10px; 
} 
.cont{ 
 margin-left: 10px; 
} 
.funcBtn{ 
padding-left: 580px; 
border-radius: 10px; 
font-size: 20px; 
position: fixed; 
}

js代码：

/** 
 * 
 */ 
    var checkEqual = false;//Avoid repetition calcu 
    var opFlag = false; //Check repetition add operation 
    var upText = document.getElementById("upText"); 
    var cal = document.getElementById("cal").style; 
    var downText = document.getElementById("downText"); 
     
    function show() { 
      cal.display = "block"; 
    } 
     
    function hide() { 
      cal.display = "none"; 
    } 
     
    function clearAllText() { 
      upText.value = ""; 
      downText.value = "0"; 
      opFlag = false; 
      checkEqual = false; 
    } 
     
    function oppositeOp(){ 
      downText.value = -downText.value;     
    } 
     
    function deleteOneDigit() { 
      downText.value = downText.value.substring(0, downText.value.length - 1); 
      if (downText.value == "" || (downText.value.charAt(0) == "-" && downText.value.charAt(1) == "")) { 
        downText.value = "0"; 
        return downText.value; 
      } 
      return downText.value; 
    } 
     
    function clickNum(num) { 
      if(num == ".") {         
        checkIfAddPoint(num); 
      } else { 
        checkIfAddNum(num); 
      } 
      checkEqual = false; 
    } 
     
    function checkIfAddPoint(num) { 
      if((num=="." && downText.value == "0") || opFlag == true) { 
        downText.value="0."; 
        opFlag = false; 
      } else if(num == "." && downText.value.indexOf(".") > -1) { 
        downText.value; 
      } else { 
        downText.value += num; 
      } 
    } 
     
    function checkIfAddNum(num) { 
       if((num != "." && downText.value == "0" && downText.value[1] != ".")  
           || opFlag == true  
           || downText.value == "Infinity" 
           || checkEqual == true) { 
        downText.value = num; 
        opFlag = false; 
      } else { 
        downText.value += num; 
      } 
    } 
     
    function clickOperation(op){ 
      checkEqual = false; 
      downText.value = checkdownTextValid(downText.value); 
      downText.value = checkZero(upText.value,downText.value); 
      switch(op){ 
      case "+":{    
        upText.value = appendupTextValue(upText.value,downText.value,"+"); 
        opFlag = true; 
       }break; 
      case "-":{ 
        upText.value = appendupTextValue(upText.value,downText.value,"-"); 
        opFlag = true; 
       }break; 
      case "x":{ 
        upText.value = appendupTextValue(upText.value,downText.value,"*"); 
        opFlag = true; 
       }break; 
      case "/":{  
        upText.value = appendupTextValue(upText.value,downText.value,"/"); 
        opFlag = true; 
       }break; 
      } 
    } 
     
    function checkdownTextValid(downText){ 
      if(downText.charAt(downText.length-1) == "."){ 
        return downText.substring(0,downText.length-1); 
      }  
      return downText; 
    } 
     
    function checkZero(upText,downText){ 
      if(upText.charAt(upText.length-1) == "/" && downText == "0"){ 
        return "Error"; 
      } 
      return downText; 
    } 
     
    function appendupTextValue(oldvalue,newvalue,operation){ 
      if(oldvalue == ""){ 
         return oldvalue = newvalue+operation; 
      } else if(opFlag!=true){ 
         return oldvaluee = oldvalue+newvalue+operation;  
      } else{ 
        return oldvalue.substring(0, oldvalue.length-1)+operation; 
      } 
    } 
     
    function calcu() { 
      if(!checkEqual){   
      downText.value = eval(upText.value+downText.value); 
      upText.value = ""; 
      checkEqual = true; 
      } 
    } 
     
    window.document.onkeydown = chooseKey; 
    function chooseKey(evt){ 
      if(evt.keyCode == 13){alert("=");} 
      else if(evt.keyCode == 8){deleteOneDigit();} 
      else if(evt.keyCode == 27){clearAllText();} 
      else if(evt.keyCode == 48){clickNum('0');} 
      else if(evt.keyCode == 49){clickNum('1');} 
      else if(evt.keyCode == 50){clickNum('2');} 
      else if(evt.keyCode == 51){clickNum('3');} 
      else if(evt.keyCode == 52){clickNum('4');} 
      else if(evt.keyCode == 53){clickNum('5');} 
      else if(evt.keyCode == 54){clickNum('6');} 
      else if(evt.keyCode == 55){clickNum('7');} 
      else if(evt.keyCode == 56){clickNum('8');} 
      else if(evt.keyCode == 57){clickNum('9');} 
      else if(evt.keyCode == 96){clickNum('0');} 
      else if(evt.keyCode == 97){clickNum('1');} 
      else if(evt.keyCode == 98){clickNum('2');} 
      else if(evt.keyCode == 99){clickNum('3');} 
      else if(evt.keyCode == 100){clickNum('4');} 
      else if(evt.keyCode == 101){clickNum('5');} 
      else if(evt.keyCode == 102){clickNum('6');} 
      else if(evt.keyCode == 103){clickNum('7');} 
      else if(evt.keyCode == 104){clickNum('8');} 
      else if(evt.keyCode == 105){clickNum('9');} 
      else if(evt.keyCode == 110){clickNum('.');} 
      else if(evt.keyCode == 106){clickOperation('x');} 
      else if(evt.keyCode == 107){clickOperation('+');} 
      else if(evt.keyCode == 111){clickOperation('÷');} 
      else if(evt.keyCode == 109){clickOperation('-');}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

简单实现JS计算器功能

- Author -

MyLearnCSDN

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
可以显示单图片，多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
详解Javascript中new()到底做了些什么？
Mar 29 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 #Javascript
虚拟键盘(1) Debian(1) xhunter1.sys(1) HarmonyOS(1) 蓝牙(1) 鸿蒙3.0(1) 鸿蒙(2) 华为(1) RustDesk(1) 蓝牙耳机(1)
You might like
PHP统计目录下的文件总数及代码行数（去除注释及空行）
2011/01/17 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php对称加密算法示例
2014/05/07 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
python构建深度神经网络（DNN）
2018/03/10 Python
python人民币小写转大写辅助工具
2018/06/20 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
如何用Python徒手写线性回归
2021/01/25 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
Baracuta官方网站：Harrington夹克，G9，G4，G10等
2018/03/06 全球购物
资产经营总监岗位职责范文
2013/12/01 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
供货协议书
2014/04/22 职场文书
安全横幅标语
2014/06/09 职场文书
学校搬迁方案
2014/06/15 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers