简单实现JS计算器功能_javascript技巧

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

效果图：

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
计算器
javascript简单计算器、javascript实现计算器、jquery实现简单计算器、简单计算器单片机实现、java实现简单计算器，以便于您获取更多的相关知识。

时间： 2025-01-07 10:24:08

简单实现JS计算器功能_javascript技巧的相关文章

简单的js计算器实现_javascript技巧

本文实例为大家分享了js计算器实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body > <input type='text' id='txt1' /> <select id='select'> <option val

纯javascript实现简单下拉刷新功能_javascript技巧

代码很简单,实现的功能却很实用,直接奉上代码 CSS: 复制代码代码如下: <meta charset="utf-8" /> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-sca

简单理解js的冒泡排序_javascript技巧

关于排序,其实不管是哪种语言,都有它内置的排序函数,我们要用的时候调用就行了,既然如此,我们为什么还要讲这个东西呢?我想,其实,我们讲排序更多是在于排序中包含的思想算法,因为,算法对于计算机来说相当重要,一个好的算法能够让计算机的效率达到事半功倍的效果,所以,算法是计算机语言中一门相当热门的课程,它所代表的计算机思维也是很值得我们去深入研究的. 我也知道,关于我标题中的排序,博客园中的很多作者都写过详细解释的文章,可能,笔者本人认为自己的理解更能体现出这个排序的工作原理吧,所以,笔者也就大惭不愧

实现非常简单的js双向数据绑定_javascript技巧

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然.换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了.同样地,如果UI包含了一个输入用户姓名的输入框,输入一个新值就应该会使user对象的name属性做出相应的改变. 很多热门的JS框架客户端如Ember.js,Angular.js 或者KnockoutJS ,都在最新特性上刊登了双向数据绑定.这并不意味着从零实现它很难,也不是说需要这些功能的时候,采

简单的js表格操作_javascript技巧

效果图: 任务: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff var tr=document.getElementsByTagName("tr"); for(var i= 0;i<tr.length;i++) { bgcChange(tr[i]); } // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色. function bgcChange(obj) { obj.onmouseove

使用Object.defineProperty实现简单的js双向绑定_javascript技巧

缘起前几天在看一些流行的迷你mvvm框架(比如avalon.js. vue.js 这种较轻的框架,而非Angularjs.Emberjs这种较重的框架)的实现.现代流行的mvvm框架一般都会将数据双向绑定(two-ways data binding)做掉,作为框架自身的一个卖点( Ember.js 貌似是不支持数据双向绑定的.),而且每种框架双向数据绑定的实现方式都不太一致,比如Anguarjs内部使用的是脏检查 ,而avalon.js内部实现方式的本质是设置属性访问器 . 这里不打算具体

简单实现js浮动框_javascript技巧

本文实例为大家分享了js浮动框的实现代码,供大家参考,具体内容如下一.在需要加入浮动框的页面中加入如下css代码:  <style type="text/css"> #msg_win { border: 1px solid #A67901; background: #EAEAEA; width: 240px; position: absolute; right: 0; font-size: 12px; font-

一个简单的js树形菜单_javascript技巧

我练习一下,以免不时之需. 树形菜单不过就是把普通菜单重新排列一下,看起来像树形而已. 上图京东的菜单,给他多几个嵌套,然后添加收缩伸展事件,差不多就行了. 给个例子: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>

简单的js分页脚本_javascript技巧

复制代码代码如下: <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script>