JavaScript实现简易计算器案例

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

功能：

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

项目原型

*{
  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 
 

计算器的细节收尾

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

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