脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js计算器案例

JavaScript实现简易计算器案例

 更新时间：2022年07月29日 14:25:10   作者：ZJQ12334  
这篇文章主要为大家详细介绍了JavaScript实现简易计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>

本文实例为大家分享了JavaScript模仿windows计算器，供大家参考，具体内容如下

功能：

1、实现单机按钮录入数字
2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为0
3、实现小数点功能并添加异常处理：小数点只能出现一次
4、实现正负号功能
5、实现退位功能，已经是最后一位时，显示框显示为0
6、清屏功能

项目原型

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="../index.css/index.css" >
  <script type="text/javascript" src="../index.js/index.js"></script>
  <script type="text/javascript" src="../index.js/index1.js"></script>
</head>
<body onload="jiazai(),o()">
  <div class="div1">
    <div class="div2">
      <input type="text" name="num" id="num">
    </div>
    <div class="div3">
      <input type="button" value="c">
      <input type="button" value="←">
      <input type="button" value="+/-">
      <input type="button" value="/">
      <input type="button" value="1">
      <input type="button" value="2">
      <input type="button" value="3">
      <input type="button" value="*">
      <input type="button" value="4">
      <input type="button" value="5">
      <input type="button" value="6">
      <input type="button" value="-">
      <input type="button" value="7">
      <input type="button" value="8">
      <input type="button" value="9">
      <input type="button" value="+">
      <input type="button" value="0">
      <input type="button" value=".">
      <input type="button" value="=">
      <input type="button" value="d" id="baidu">
    </div>
  </div>
</body>
</html>
*{
  margin: 0;
}

.div1{
  /*width: 170px;*/
  position: absolute;
  top: 60px;
  left: 200px;
  margin-left: 5px;
}

.div1 .div2 input{
  width: 170px;
  text-align: right;
  background-color: white;
  border:1px solid black; 
  padding-right: 10px;
  box-sizing: border-box;
}

.div1 .div3 input{
  width: 35px;
  margin-right: 5px;
  margin-top: 5px;
  
}
.div1 .div3{
  width: 190px;
}

.div1 .div3 input:hover{
  background-color: #abcdef;
  border:1px solid black;
  border-radius: 5px;
}

小数点功能的实现

1、小数点只能出现一次
2、再小数点case这里直接函数调用
3、技术点：indexof()，查找字符是否存在，存在的话返回大于0，不存在的话返回-1

//小数点
function xiaoshu(n){
  if (n.indexOf('.')==-1) {
    num.value=n+'.';
  }else{
    num.value=n;
  }
}

    case '.':
    xiaoshu(num.value);
    break;  
1

进行非数字和数字的判断

回退键的实现

需求：将文本框中的最后一个字符删掉后，保留文本框中的其他内容
1、文本框里面有123，按下退位键保留12 ， 再次按下保留1
2、当文本框内只剩下1的时候，再次按下退位键，文本框恢复到默认状态0

正负号

1、输入123，第一次单机添加 “-” ，再次单机显示+
2、如果数字前面有符号那就取消，没有符号就加上，类似开关按钮

JS代码

function jiazai(){
  //获取文本框的ID
  var num = document.getElementById('num');
  //在脚本中设置input文本框的value值为0
  num.value = '0';
  //设置input文本框为不可选中状态
  num.disabled = 'disabled';
  //获取标签名为input的所有标签
  var btn = document.getElementsByTagName('input');
  var xin;//定义一个接受新的值
  var bb;//定义一个符号判断给=，具体用来+-*/
  for(var i=0;i<btn.length;i++){
    //给input所有按钮绑定 onclick事件
    btn[i].onclick = function(){
      //判断如过是数字
      if (isNumber(this.value)) {
        if (isNull(num.value)) {
          num.value = this.value;
        }else{
          num.value = num.value+this.value;
        }
      }//否则，如果是非数字的话
      else{
        //获取非数字
        var feishuzi = this.value;
        //多条件分支判断
        switch(feishuzi){
          case '+':
          xin = Number(num.value);
          num.value = 0;
          bb ='+';
          break;
          case '-':
          xin = Number(num.value);
          num.value = 0;
          bb ='-';
          break;
          case '*':
          xin = Number(num.value);
          num.value = 0;
          bb ='*';
          break;
          case '/':
          xin = Number(num.value);
          num.value = 0;
          bb ='/';
          break;
          case 'c':
          num.value = 0;
          break;
          case '←':
          num.value = fn(num.value);
          break;
          case '+/-':
          num.value =sign(num.value);
          break;
          case '.':
          xiaoshu(num.value);
          break;
          case '=':
          switch(bb){
            case '+':
            num.value = xin+Number(num.value);
            break;
            case '-':
            num.value = xin-Number(num.value);
            break;
            case '*':
            num.value = xin*Number(num.value);
            break;
            case '/':
            if (Number(num.value)==0) {
              alert('除数不能为0');
              num.value = 0;
            }else{
              num.value = xin/Number(num.value);
            }
            break;
          }
          break;
        } 
      }
    }
  }
}


//判断是否是数字，或者非数字
function isNumber(n){
  if (!isNaN(n)) {
    return true;
  }else{
    return false;
  }

}

var  btn = document.getElementsByTagName('input');
//判断内容是否为空
function isNull(n){
  if (n=='0' || n.length==0) {
    return true;
  }else{
    return false;
  }
}


//回退键定义函数
function fn(c){
  c=c.substr(0,c.length-1)
  if (isNull(c)) {
    c= 0;
  }
  return c;
}


//正负号定义函数
function sign(n){
  n=Number(n)*(-1);
  return n;
}


//小数点
function xiaoshu(n){
  if (n.indexOf('.')==-1) {
    num.value=n+'.';
  }else{
    num.value=n;
  }
}

计算器的细节收尾

1、鼠标指针悬浮再按钮上希望加上背景
2、鼠标单机d打开百度
3、0和边框右侧距离有点大。

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

您可能感兴趣的文章:

相关文章

  • 完美实现八种js焦点轮播图（下篇）

    完美实现八种js焦点轮播图（下篇）

    这篇文章主要介绍了完美实现八种js焦点轮播图的具体代码，基于完美运动框架move2.js实现的焦点录播图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 基于javascript实现全国省市二级联动下拉选择菜单

    基于javascript实现全国省市二级联动下拉选择菜单

    这篇文章主要介绍了基于javascript实现全国省市二级联动下拉选择菜单，以一个完整实例形式较为详细的分析了js实现省市二级联动下拉菜单的实现技巧，非常简单实用,需要的朋友可以参考下
    2016-01-01
  • JavaScript模拟实现加入购物车飞入动画效果

    JavaScript模拟实现加入购物车飞入动画效果

    这篇文章主要为大家详细介绍了如何使用JavaScript模拟实现加入购物车飞入动画效果,文中的示例代码讲解详细,有需要的小伙伴可以参考下
    2024-03-03
  • js实现简单的左右两边固定广告效果实例

    js实现简单的左右两边固定广告效果实例

    这篇文章主要介绍了js实现简单的左右两边固定广告效果,实例分析了javascript实现固定广告的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 利用Query+bootstrap和js两种方式实现日期选择器

    利用Query+bootstrap和js两种方式实现日期选择器

    日期选择器在我们平时开发的时候经常要用到，下面这篇文章主要给大家介绍了利用Query+bootstrap和js这两种方式实现日期选择器的方法,文中两种方法都给出了详细的示例代码，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • javascript 通过封装div方式弹出div窗体

    javascript 通过封装div方式弹出div窗体

    废话少说，此js对象是通过封装页面上的div，将其弹出，可以弹出多个，参考了一些高人代码，达到我要的效果。先看看效果图。配合一css就可以很好看了。
    2009-10-10
  • JavaScript中防止微信浏览器被整体拖动的方法

    JavaScript中防止微信浏览器被整体拖动的方法

    这篇文章主要介绍了JavaScript中防止微信浏览器被整体拖动的方法,需要的朋友可以参考下
    2017-08-08
  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    相信大家都知道数据可视化就是借助图形化的手段把生硬的数据生动化，以此来展示出数据想要表达的信息，而图表是最通常的一种数据可视化手段。可全靠自己纯手动编写各种图表实在是让人头疼，各种计算各种烦。现在就为大家介绍如何用D3.js来实现柱状图。
    2016-09-09
  • js中如何向数组中添加元素unshift()方法

    js中如何向数组中添加元素unshift()方法

    这篇文章主要介绍了js中如何向数组中添加元素unshift()方法,具有很好的参考价值,希望对大家有所帮助,
    2023-12-12
  • 基于js实现的限制文本框只可以输入数字

    基于js实现的限制文本框只可以输入数字

    本文主要介绍了js限制文本框只可以输入数字的实例代码，可复制直接调用函数实现其功能。需要的朋友可以看下
    2016-12-12

最新评论