Calculator web page using javascript

832101214张佳卉

已于 2023-10-10 01:56:46 修改

阅读量53

点赞数

文章标签：前端 javascript 开发语言

于 2023-10-10 01:56:37 首次发布

本文链接：https://blog.csdn.net/2301_80019449/article/details/133719681

版权

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	Make an interface visual calculator
MU STU ID and FZU STU ID	MU:21126674 ; FZU:832101214

1.The PSP form for this work

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	45	50
• Estimate	45	50
Development	405	403
• Analysis	20	35
• Design Spec	25	30
• Design Review	15	17
• Coding Standard	15	12
• Design	60	55
• Coding	150	146
• Code Review	60	53
• Test	60	55
Reporting	50	59
• Test Repor	20	30
• Size Measurement	10	12
• Postmortem & Process Improvement Plan	20	17
Sum	500	512

2.Problem-solving ideas

First, I tried to understand the mission requirements. Read the questions carefully and determine the basic requirements of the calculator web page. This may include which mathematical operations are supported (such as addition, subtraction, multiplication, division, percentages, etc.), as well as the design requirements of the user interface (such as buttons, input fields, display areas, etc.).

Secondly, I collected the functional requirements for making a calculator web page and listed the required functions and operations. This can be a simple calculator or it can include advanced features such as history, bracket support, etc.

The third is interface design, thinking about how to design a clear, easy-to-use interface so that users can easily enter numbers and operators.

The next step is technology selection, determining the technology stack that will be used. This may include front-end technologies (such as HTML, CSS, JavaScript), the choice of frameworks and libraries, etc.

Then move on to the search information phase, using search engines to find tutorials, sample code, documentation, and resources related to making calculator web pages. Keywords include “Making calculator web tutorials”, “HTML forms”, “JavaScript calculator code”, etc., for systematic learning.

3.Design and implementation process

–Function–
在这里插入图片描述
–Flow chart of the key functions–

4.Code description

calc.html

<!DOCTYPE htm
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <style>

        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: rgb(251, 251, 251);
        }
        #top .point {
            width: 20px;
            height: 20px;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
            border-radius: 10px;
        }
        #top .red {
            background-color: rgb(160, 0, 0);
        }
        #top .blue {
            background-color: blue;
        }
        #top .green {
            background-color: green;
        }
        #calc-title {
            font-size: 22px;
            color: white;
            float: right;
            margin-top: 10px;
            margin-right: 10px;
        }


        #result {
            width: 446px;
            height: 50px;
            margin: auto;
            text-align: right;
            background-color: white;
            border: solid 2px red;
            font-size: 30px;
        }


        #button {
            width: 450px;
            height: 422px;
            background-color: gray;
            margin: auto;
        }


        #button div {
            width: 108px;
            height: 80px;
            float: left;
            background-color: #fff;
            margin: 2px;
            line-height: 80px;
            text-align: center;
            font-size: 26px;
        }


        #button div:hover {
            background-color: orangered;
        }

    </style>
    <script src="./calc.js" type="text/javascript">
        
    </script>
</head>
<body >
    <div id="top">

        <div id="calc-title"></div>
    </div>

    <div id="result" name="result" ></div>

    <div id="button">

        <div onclick="qingkong()">AC</div>
        <div onclick="oper('/')">÷</div>
        <div onclick="oper('*')">*</div>
        <div onclick="doback()">CE</div>
        <div onclick="num(7)">7</div>
        <div onclick="num(8)">8</div>
        <div onclick="num(9)">9</div>
        <div onclick="oper('-')">-</div>
        <div onclick="num(4)">4</div>
        <div onclick="num(5)">5</div>
        <div onclick="num(6)">6</div>
        <div onclick="oper('+')">+</div>
        <div onclick="num(1)">1</div>
        <div onclick="num(2)">2</div>
        <div onclick="num(3)">3</div>
        <div></div>
        <div onclick="oper('%')">%</div>
        <div onclick="num(0)">0</div>
        <div onclick="oper('.')">.</div>
        <div onclick="yunsuan()">=</div>
    </div>

</body>
</html>

calc.js

function aler(){
    var cal = document.getElementById("calc-title").innerHTML;
    window.alert(cal);
    }
    document.getElementsByClassName("point");

    function num(number){
    var result = document.getElementById("result")
    result.innerHTML = result.innerHTML + number 
    }
 
    function oper(operator){
    var result = document.getElementById("result")
    result.innerHTML = result.innerHTML + operator
    }

    function yunsuan(){
        var result= document.getElementById("result")
        var expression = result.innerHTML
        result.innerHTML =eval(expression)
    }
    function doback(){
        var result =document.getElementById("result")
        var len=result.innerHTML.length
        result.innerHTML =result.innerHTML.substr(0,len-1)
        
    }
    function qingkong(){
        var result = document.getElementById("result")
        result.innerHTML = ""

    }

5.Achievement exhibition

20231009_221723

6.Summarization

In this task, I got familiar with the development knowledge and tools, learned the simple development process, and successfully created a simple and practical calculator web page. This study has fully exercised my programming ability and problem-solving ability, and I have learned how to find and fix errors. Also, making a calculator web page made me focus more on the user experience. I learned how to design friendly interfaces and how to make user operations simple and intuitive. This is important for any front-end project, and I believe that the experience of this attempt will be of great help in future front-end design.