Javascript 传统实体计算器的实现

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量387 收藏
点赞数
分类专栏： Javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42256997/article/details/107526033
版权

实体计算器

要求：

未发测试用例之前的想法：

  1. 首字母为0
  2. 不能出现2个运算符，若出现第二个运算符，应将第一个运算符计算完毕后再显示第二个运算符
  3. 等于号可以一直点击，然后可以一直运算上次运算方式

根据测试用例总结需求：（测试用例在下方）

  1. 初始为显示0，按其他数字需要覆盖0；
  2. 只显示当前操作数，不显示运算符；
  3. 第二次出现运算符时要需将前面的结果算出来并作为左操作数；
  4. 等于号可以一直点击，然后可以一直运算上次运算方式；
  5. 运算完成之后，点击数字按钮则会覆盖原数字；连续点击两次运算符，第二个运算符会覆盖第一个运算符
  6. 有清零功能

代码：

index.html
<html>
    <header>
        <meta http-equiv="Access-Control-Allow-Origin" content="*" />
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta charset="utf-8" /> 
        
        <link  rel="stylesheet" href="./index.css"/>
    </header>
    <body>
        <div id="root_container">
            <div id="text_container">
                <input id="txt1"  type="text" readonly />
            </div>
            <div class="buttons">
                <button   class="number">1</button>
                <button   class="number">2</button>
                <button   class="number">3</button>
                <button   class="operator">+</button>
            </div>
            <div class="buttons">
                <button   class="number">4</button>
                <button   class="number">5</button>
                <button   class="number">6</button>
                <button   class="operator">-</button>
            </div>
            <div class="buttons">
                <button   class="number">7</button>
                <button   class="number">8</button>
                <button   class="number">9</button>
                <button   class="operator">*</button>
            </div>
            <div class="buttons">
                <button   class="zero">0</button>
                <button   class="clean">C</button>
                <button   class="equal">=</button>
                <button   class="operator">/</button>
            </div>
        </div>

        <script type="text/javascript" src="./index.js"></script>
    </body>
</html>
index.js
/*
1.首字母为0 
2.不能出现2个运算符，若出现第二个运算符，应将第一个运算符计算完毕后再显示第二个运算符
3.等于号可以一直点击，然后可以一直运算上次运算方式
*/
var txt =document.getElementById("txt1");
txt.value=0;
//判断是否是显示为0的时候点击 运算符
flag_0 =true;
//判断能否点击运算符，不能连续点击两次运算符
var flag=true;
//是否出现了第二个运算符
var flag_c=false;
//判断第几次点等于号
var flag_e=true;
//是否点击过等号
var flag_n=true;
//保存字符串
var str='';
//辅助显示
var str1='';
//保存运算符
var str2='';
//保存点击运算符后的数字
var str3='';
//计算字符串的和
function test(str){ 
    let s=eval(str);
    if(Math.abs(s)==Infinity){
        s='除数不能为0'
    }else if(s==undefined){
        s=0;
    }
    return s
}
//点击数字键的事件
function f1(num){
    if(flag_n){
        switch(num){
            case 1: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 2: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 3: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 4: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 5: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 6: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 7: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 8: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 9: str=String(str)+num;   str3=String(str3)+num; 
            break;
            case 0: str=String(str)+num;   str3=String(str3)+num; 
            break;
            default:
        }
        txt.value=str3;
        flag_c=true;
    
    }else{
       switch(num){
        case 1: str=num;   str3=str;
        break;
        case 2: str=num;   str3=str; 
        break;
        case 3: str=num;   str3=str; 
        break;
        case 4: str=num;   str3=str; 
        break;
        case 5: str=num;   str3=str; 
        break;
        case 6: str=num;   str3=str; 
        break;
        case 7: str=num;   str3=str; 
        break;
        case 8: str=num;   str3=str; 
        break;
        case 9: str=num;   str3=str; 
        break;
        case 0: str=num;   str3=str; 
        break;
        default:
        }
        txt.value=str;
        flag_n=true;
    }
    flag_0=false;
    console.log("f1 num:"+num)
    
     
}
//点击运算符的事件
function f2(num){
    if(flag){
        if(flag_0){
            str=0;
        }
        switch(num){
            case 1: str1=str; str=str+'+';   str2='+'; 
            break;
            case 2: str1=str; str=str+'-';    str2='-'; 
            break;
            case 3: str1=str; str=str+'*';    str2='*'; 
            break;
            case 4: str1=str; str=str+'/';    str2='/'; 
            break;
            default:
        }
        txt.value=str1; 
        flag=false; flag_e=true; str3=''; flag_n=true;

    }else{
        if(flag_c){
            str=test(str);
            flag=true;
            flag_c=false;
            f2(num)
        }else{
            /*
            str = str.substr(0, str.length - 1);   
            */
           //删除上一个输入错误的运算符
            str = str.substr(0, str.length - 1); 

            switch(num){
                case 1: str1=str; str=str+'+';    str2='+';  
                break;
                case 2: str1=str; str=str+'-';    str2='-'; 
                break;
                case 3: str1=str; str=str+'*';    str2='*'; 
                break;
                case 4: str1=str; str=str+'/';    str2='/'; 
                break;
                default:
            }
            txt.value=str1; 
            
        }
        
    }
    console.log("f2 num:"+num)
}
//清零事件 回归初始值
function clean(){
    str='';
    str1='';
    str2='';
    str3='';
    txt.value=0;
    flag=true;
    flag_c=true;
    flag_e=true;
    flag_n=true;
    flag_0=true;
    
}
//点击等于号的事件
function equal(){
    //第一次点击 = 
    if(flag_e){
        str=test(str);
        txt.value=str;
        flag_e=false;
    }else{
    /**
     * 第二及以上点击 =
     * 在点击运算符 后即可保存运算符和运算符后的数字 记为str2 和 str3 ,点击运算符str3需要清零 ，归零时记得清零
     * 需要有一个 flag_e 保存是否是第一次点击 = 
     * 初始化为 true 第一次点击过后 改为 false ,点击运算符则改变flag_e
     * */ 
      //console.log(str2+str3);
      str=test(txt.value+str2+str3);
      txt.value=str;
    } 
    flag_n=false; 
}

/**
 * 设置监听事件
 * number为数字键1-9按钮的集合
 * 0 按钮的监听事件
 * operator为运算符按钮的集合
 * 归零按钮 监听事件
 * 等于按钮 监听事件
 */
const number=document.querySelectorAll(".number");
for(let i = 0 ; i < number.length ; i++){
    number[i].addEventListener('click',function (){
        f1(i+1)
    });
}
//0 按钮的监听事件
document.querySelector(".zero").addEventListener('click',function (){f1(0);});

const operator=document.querySelectorAll(".operator");
for(let i = 0 ; i < operator.length ; i++){
    operator[i].addEventListener('click',function (){
        f2(i+1)
    });
}
//归零按钮 监听事件
document.querySelector(".clean").addEventListener('click',clean)
//等于按钮 监听事件
document.querySelector(".equal").addEventListener('click',equal)
index.css
button{
	cursor: pointer;
	width: 65px;
	height: 45px;
	background-color: hsla(182, 93%, 45%, 0);
	border-radius: 10px;
	box-shadow: 3px 3px 5px #ccc;
	outline: none;
	font-size: 25px;
}
input{
    margin-left: 10px;
	font-size: 25px;
	border-radius: 10px;
	width: 280px;
	height: 40px;
}
.buttons{
	margin: 10px;
}
.operator{
	color: darkorange;
}
.clean{
	color: tomato;
}
实现效果：

shixian.gif

测试用例：

以实体计算器的行为为准

  1. 初始状态
    初始时，显示框中应该显示一个“0” 。 此时按下任何数字，则该数字应该覆盖0. （而不能出现“05” 之类的情况）

  2. 12+21=
    测试步骤：
    输入12再按+时，界面上只显示12，而不显示+。 输入21时，应在显示框中仅显示21，而不再显示12. 当点击等号时，结果框中显示33

  3. 5+5+6=
    在上一步的基础上，当显示框显示结果33时，直接点击数字5，此时5应该覆盖33。
    当输入5+5之后，再点击+时，显示框中应该显示10.
    输入6，=之后，显示框中显示16.

  4. ==
    在上一步的结果基础上，再次点击等号，显示框应显示22，再次点击等号，应显示28.

  5. 5±2=
    输入5+之后，又输入了-号，此时显示框中仅显示5，再输入2，=，显示框中应该显示3. （即，第二次输入的符号“-” 覆盖了第一次的符号“+” ）

  6. 按C，清零。界面显示“0”，功能应该等同于初始状态。

  7. 5=
    按数字5， 再按等号，界面显示5.

  8. 2+3=
    在第6步的基础上，点击数字2，此时2应该覆盖5，界面上只显示一个2.
    按+， 界面没有变化，再按3，显示框中显示3. 按=， 显示框中显示5.

思考：

1.document.querySelector() 和 document.querySelectorAll()

个人感觉querySelector() 比getElementById()好用(具体哪里好用，我也说不清楚)

在用querySelector() 函数时，括号中的选择器不能以数字开头

document.querySelectorAll()获取的为数组元素，添加监听事件需要循环。

2.html代码中尽量不要出现 onclick等函数。我看过的一篇文章中写道，此函数会污染html环境，减慢页面运行速度（至于为什么，我也不清楚…）。所以Button之类的点击事件可以在js代码中用addEventListener(动作，函数)进行设置监听事件。使用addEventListener()函数监听时，后面的函数需要带参数，则需要将其写在匿名函数中。 如下所示：

document.querySelector(".zero").addEventListener('click',function (){f1(0);});

3.写JavaScript没有严格要求版本，所以用了部分ES6的语法 const let

现在一般的浏览器都有 babel，会将超越ES5的新语法转为ES5的格式。

下一篇是大佬如何用javascript写计算器的

通过状态集分析计算器

Across777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
实体转换计算器
weixin_34041003的博客
05-24 130
 实体字符转换网站： http://www.evotech.net/articles/testjsentities.html       查找方式1：输入数字即可查找，如：     查找方式2：输入字符查找，如：       另附加一个字符编码转换对照表： http://css-tricks.com/snippets/html/glyphs/  ...
使用javascript实现计算器总结
weixin_42518668的博客
07-26 2213
效果展示： 思路： 用html实现计算器的基本外观结构 用css设计每个部分的样式，颜色边框等 使用js实现计算的算法，DOM事件的反应。 知识点总结： html部分： 结构分为上下两部分，上部分显示输出，下部分输入。 输出分为结果和记录。 表格的结构为table->tr->th Js部分： 每次输入后都会有一次响应。 输入获取的当前字符。 有...
javascript实现计算器
m0_74446377的博客
05-13 164
先看一下运行后的界面，输入第一个数的时候显示第一个数，输入运算符时上面显示第一个数和运算符，下面栏显示第一个数。当输入第一个数然后运算符，再输入第二个数时，上面栏会显示第一个数运算符第二个数，下面栏显示第二个数。JavaScript部分。
用js做一个很简易的计算器
FYANGFEI的博客
09-22 3334
效果图 代码 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> 操作数1：<input ...
javascript学习笔记
qq_39356904的博客
10-24 1915
javascript 为什么要学习javascript： Javascript是实现网页动态效果的基石，在web再发中扮演重要的角色，被广泛的应用到各个领域： 网页游戏 地图搜索（google、daidu） 股市信息查询 Web聊天 …… 在web开发中，js是必不可少的技术！同时js也是ajax/jquery/extjs等框架的基础。 学习内容： ⊙javascript基...
某集团网站推广方案与建设程序文件.doc
09-18
1. **传统房地产营销模式**：过去，房地产营销主要依赖于实体展示厅、广告牌、报纸广告等传统渠道，这种模式成本高且覆盖面有限，难以满足现代消费者快速获取信息的需求。 2. **网络时代房地产营销模式**：随着...
最新Java面试宝典pdf版
08-31
16. hibernate进行多表查询每个表中各取几个字段，也就是说查询出来的结果集没有一个实体类与之对应如何解决； 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...
Java面试宝典-经典
03-28
16. hibernate进行多表查询每个表中各取几个字段，也就是说查询出来的结果集没有一个实体类与之对应如何解决； 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...
java面试宝典2012
12-16
16. hibernate进行多表查询每个表中各取几个字段，也就是说查询出来的结果集没有一个实体类与之对应如何解决； 135 17.介绍一下Hibernate的二级缓存 135 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message ...
Java面试宝典2012版
12-03
16. hibernate进行多表查询每个表中各取几个字段，也就是说查询出来的结果集没有一个实体类与之对应如何解决； 123 17.介绍一下Hibernate的二级缓存 123 18、Spring 的依赖注入是什么意思? 给一个 Bean 的 message...
js阻止函数连续执行
个人博客
12-01 1701
js阻止函数连续执行一、问题描述二、实现思路三、代码实现1.不需要传递参数2.传递参数 一、问题描述 当一些情况下时，我们不希望我们的js方法被连续的执行，比如说登录按钮的点击事件，我们不希望用户恶意的点击出现一些意外情况。还有一些vue中的自定义事件传值函数，我们希望其不被连续触发，而是接收其最后一次触发的值 二、实现思路 我们可以在每次事件触发时将我们的方法增加一个定时器，当然增加之前要进行一个判断，如果已有定时器说明已经处在执行队列中，清除其定时器，让其继续等待执行。当定时器结束时在执行需要触发的方法
使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。
weixin_44164982的博客
08-08 2544
使用js写一个功能基本完善的计算器能够实现正确的加减乘除，实现退格和清零。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1393
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue前端打包
weixin_63680330的博客
07-04 287
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Node.js适合什么场景下使用
weixin_44337480的博客
07-04 520
Node.js是一个基于Chrome V8 JavaScript引擎构建的开源运行时环境，它允许开发者使用JavaScript在服务器端运行代码。Node.js具有高性能、轻量级、事件驱动和非阻塞I/O等特性，这些特性使得它在多种场景下具有广泛的应用。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 294
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
javascript实现简易计算器
05-14
以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> 简易计算器 <script type="text/javascript"> function calculate() { var num1 = document.getElementById('num1').value; var num2 =...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值