您现在的位置是：网站首页> 编程资料编程资料

JavaScript实现简易计算器案例_javascript技巧_

2023-05-24 418人已围观

简介 JavaScript实现简易计算器案例_javascript技巧_

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

功能：

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

项目原型

      Document

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