JavaScript
搜索
分类

简单实现JS计算器功能

作者：MyLearnCSDN 时间：2024-04-22 22:31:50　

该计算器功能：
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,计算器
0
投稿

猜你喜欢

  • 解决python2.7 查询mysql时出现中文乱码

    2024-01-14 18:34:57

  • Golang Goroutine的使用

    2023-09-20 20:38:45

  • ASP分页类(支持多风格变换)

    2011-04-08 10:39:00

  • Django如何开发简单的查询接口详解

    2022-07-06 11:27:57

  • Python Tkinter实例——模拟掷骰子

    2022-09-17 09:51:07

  • javascript 事件对象 坐标事件说明

    2024-04-16 08:50:50

  • pyhanlp安装介绍和简单应用

    2022-04-10 14:22:13

  • Pytorch技巧:DataLoader的collate_fn参数使用详解

    2023-12-11 00:20:48

  • pycharm 2021.3最新激活码有效期至2100年（亲测可用）

    2022-03-23 13:45:03

  • Kears 使用:通过回调函数保存最佳准确率下的模型操作

    2023-02-24 12:36:56

  • 解析Vue2.0双向绑定实现原理

    2024-06-05 15:29:32

  • Go语言中的switch用法实例分析

    2024-04-23 09:39:06

  • 详解Python的单元测试

    2021-11-22 14:53:57

  • 新浪中用来显示flash的函数

    2024-04-18 09:36:16

  • 详解Django之admin组件的使用和源码剖析

    2022-10-07 06:36:27

  • JavaScript学习笔记之函数记忆

    2024-04-16 09:27:01

  • ASP提高数据显示效率-缓存探幽

    2007-09-28 12:37:00

  • python threading模块的使用指南

    2023-08-10 07:51:59

  • 深入理解r2dbc在mysql中的使用

    2024-01-26 20:14:10

  • 利用C#远程存取Access数据库

    2024-01-27 01:58:32
    • asp之家 网络编程 m.aspxhome.com