EE301_homework1_832102110李梓莙

caculator

A simple code for caculator by using js

information table

The Link Your Class<class>
The Link of Requirement of This Assignment<requirenment >
The Aim of This AssignmentRealize the basic function of calculator
MU STU ID and FZU STU ID<21126763 and 832102110>

PSP form

Personal Software Process StagesEstimated Time(minutes)Actual Time(minutes)
Planning5min5min
• Estimate180min200min
Development145min150min
• Analysis100min115min
• Design Spec30min15min
• Design Review15min15min
• Coding Standard60min60min
• Design10min10min
• Coding120min120min
• Code Review10min5min
• Test10min20min
Reporting60min120min
• Test Repor10min10min
• Size Measurement5min5min
• Postmortem & Process Improvement Plan10min10min
Sum770min860min

Description of problem-solving ideas.

Calculators need both front-end pages and back-end code to be implemented, and I considered two solutions.

  • Solution 1: Use java eclipse to implement directly, the advantage is that this is the compilation platform I am most familiar with, the disadvantage is that the style of the front end is very complex to implement.
  • Solution 2: Use JavaScript, the advantage is that the syntax is similar to JAVA, lightweight, front-end interface code implementation is simple and easy to understand. The disadvantage is never used, to learn. Based on the pros and cons of both options, I chose option two and started searching for simple JavaScript syntax in bilibili and CSDN.

Design and implementation process. The design includes how the code is organized and the flow chart of the key functions.

在这里插入图片描述

Code description. Show the key code of the project and explain the idea.

The most important code is how to realize the function of the calculator.

%

The output should be 0.01 times the input

mod.onclick=function(){ 
        mid = Number(displays); 
        displays=mid+'%';
        result.innerHTML=mid/100; 
    }

+/-

The output is the input multiplied by -1

bias.onclick=function(){
        mid = Number(displays); 
        displays=mid*(-1);
        result.innerHTML=mid*(-1);
    }

=

The input expression can be evaluated by using the built-in evaluation function eval()

    equal.onclick=function(){
        displays=eval(displays);//自带的计算函数
        result.innerHTML=displays;
    }

AC

Clear all values

AC.onclick=function(){
        displays="";
        result.innerHTML='0';
    }

.

Each number can only have one decimal point, set a Boolean value to control, by changing the Boolean value to determine whether there is already a decimal point, if there is a decimal point, can not be used.

    dot.onclick=function(){
        if(displays==""){
            displays+='0.'
            result.innerHTML=displays;
        }
        if(isDot==true){
            displays+='.'
            result.innerHTML=displays;
        }
        isDot=false;
    }

Displaying result functions with screenshots (or gifs) and text descriptions.

%

  • input:7%
  • output:0.07
    在这里插入图片描述

+/-

  • input:2
  • output:-2
    在这里插入图片描述

=

  • input:3 + 6.1
    在这里插入图片描述

  • output:9.1
    在这里插入图片描述

AC

在这里插入图片描述

.

在这里插入图片描述

Summarize this assignment.

    1. The calculator interface: the calculator first needs a display screen, which can be divided into a separate block, and then the number and operator into a block.
    1. Function implementation:
      • Design different click events.
      • Consider the digital case first, we first get all the digital buttons, and then give the click event, click the button can be displayed in the display screen.
      • In the case of operators, a decimal point can only occur once in a number, so we put a switch on the decimal point. Close after the execution of a click event, until the next number can continue to assign value
      • Clear keys, percent signs and other functions are relatively simple.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.calculator{
    width: 200px;
    border: 1px solid #000;
}
.result{
    height: 50px;
    background-color: rgb(192, 242, 255);
    line-height: 50px;
    font-size: 25px;
    text-align: right;
}
.buttons{
    display: flex;

}
button{
    flex: 1;
    height: 40px;
}
.buttons>div{
display: flex;
flex: 1;
}
</style>
<body>
    <div class="calculator">
        <div class="result">0</div>
        <div class="buttons">
            <button class="AC">AC</button>
            <button class="bias">+/-</button>
            <button class="mod">%</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="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="operator">-</button>
        </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">
            <div>
                <button class="number">0</button> 
            </div>
            <div>
                <button class="dot">.</button>
                <button class="equal">=</button>
            </div>
        </div>
<script>
    let numbers = document.querySelectorAll('.number');
    let operators = document.querySelectorAll('.operator');
    let result = document.querySelector('.result')
    let AC=document.querySelector('.AC');
    let dot=document.querySelector('.dot');
    let equal=document.querySelector('.equal');
    let mod=document.querySelector('.mod');
    let bias =document.querySelector('.bias');

    //用来控制只有一个点的开关
    let isDot=true;

    let displays="";
//点击事件
    for(i=0;i<numbers.length;i++){
        let number = numbers[i];
        number.onclick=function(){
            displays+=this.innerHTML;
            result.innerHTML=displays;
        }
    }
//计算符
    for(i=0;i<operators.length;i++){
        let operator = operators[i];
        operator.onclick=function(){
            displays+=this.innerHTML;
            result.innerHTML=displays;
            isDot=true;
        }
    }
//ac清空
    AC.onclick=function(){
        displays="";
        result.innerHTML='0';
    }
//小数点
    dot.onclick=function(){
        if(displays==""){
            displays+='0.'
            result.innerHTML=displays;
        }
        if(isDot==true){
            displays+='.'
            result.innerHTML=displays;
        }
        isDot=false;
    }
//百分号
    mod.onclick=function(){ 
        mid = Number(displays); 
        displays=mid+'%';
        result.innerHTML=mid/100; 
    }
    //取反
    bias.onclick=function(){
        mid = Number(displays); 
        displays=mid*(-1);
        result.innerHTML=mid*(-1);
    }
//计算功能,等于号
    equal.onclick=function(){
        displays=eval(displays);//自带的计算函数
        result.innerHTML=displays;
    }


</script>
    </div>
    
</body>
</html>

Github link

my github repository

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值