EE301_homework1_832102110李梓莙

832102110李梓莙

已于 2023-10-05 21:31:05 修改

阅读量115

点赞数

文章标签： javascript

于 2023-10-05 21:18:30 首次发布

本文链接：https://blog.csdn.net/zylllllllong/article/details/133587947

版权

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 Assignment	Realize the basic function of calculator
MU STU ID and FZU STU ID	<21126763 and 832102110>

PSP form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	5min	5min
• Estimate	180min	200min
Development	145min	150min
• Analysis	100min	115min
• Design Spec	30min	15min
• Design Review	15min	15min
• Coding Standard	60min	60min
• Design	10min	10min
• Coding	120min	120min
• Code Review	10min	5min
• Test	10min	20min
Reporting	60min	120min
• Test Repor	10min	10min
• Size Measurement	5min	5min
• Postmortem & Process Improvement Plan	10min	10min
Sum	770min	860min

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