python based web visual calculator

最新推荐文章于 2024-09-15 10:33:02 发布

832101328廖龙轩

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量82

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_62085362/article/details/133612326

版权

本文介绍了如何将视觉计算器作为软件工程作业进行开发，包括需求分析、界面设计、功能实现（如加减乘除等）、使用Flask框架编写代码以及存在的缺点和未来改进期望。开发者分享了设计过程和使用搜索引擎、社区资源获取信息的方法。

摘要由CSDN通过智能技术生成

catalogue

Introduction

Assignment Table

PSP form

Problem-Solving Ideas

Find information

Design and Implementation Process

Disadvantage and Future expectation

Disadvantage:

Future expectation:

Conclusion

Introduction

This is a homework on software engineering

In this job we will make a web version of the visual calculator, this calculator includes addition, subtraction, multiplication, division, zero and other functions

Link to the project:https://github.com/leoliaoleo/calculator.git

Assignment Table

Link of Class	https://bbs.csdn.net/forums/ssynkqtd-04
Link of Requirement of This Assignment	http://t.csdnimg.cn/mt5IU
Aim of This Assignment	Create a web version of the visual calculator
MU STU ID and FZU STU ID	21124981(MU)/832101328(FZU)

PSP form

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	100	130
Estimate	90	110
Development	120	140
Analysis	20	40
Design Spec	10	10
Design Review	10	10
Coding Standard	30	45
Design	10	15
Coding	10	10
Code Review	20	20
Test	15	10
Reporting	120	100
Test Report	0	0
Size Measurement	0	0
Postmortem & Process Improvement Plan	40	70
Sum	595	710

Problem-Solving Ideas

Making a visual calculator has the following aspects to consider: interface design, layout and components, component event binding, data processing and computational logic, input and output processing, error handling, testing and optimization. At the same time, the use of appropriate development tools and technology, can better realize the function and effect of the calculator.

Find information

[1] Online search: use search engines such as Google, Baidu, etc., use keywords such as "make visual calculator", "calculator UI design", "calculator development tutorial", etc., to find related documents, tutorials, blogs, forums and other resources. [2] Developer communities and forums: Join developer communities and forums, such as Stack Overflow, CSDN, GitHub, etc., to search for related topics, see other developers' experiences to share, ask questions, or participate in discussions. You can get some practical solutions and implementation ideas.

Design and Implementation Process

Design

1.Determine the needs: clarify the basic functions and characteristics of the calculator, such as the types of mathematical operations supported (addition, subtraction, multiplication and division, square roots, etc.), the display format of the display screen (decimal places, scientific counting, etc.), whether continuous calculation is supported.

2.Interface layout: The calculator interface is divided into different areas, such as the number button area, the operator button area, and the display area. Determine the location and size of each area so that components can be added later.

3.Add components: Add components, such as buttons and text boxes, to each area one by one based on the interface layout. You can use the layout manager to better control the arrangement and placement of components.

4.Display processing: The user's input data is displayed on the display of the calculator, and the calculation results are updated to the display. Need to consider the formatting of the data display, such as decimal places, scientific notation, etc.

Implementation

1.Determine the development platform and tools: Select the right development platform and tools based on your needs and development technology.

2.Add event handlers: Add event handlers for each button. According to the function of the button, the corresponding event processing logic is implemented.

3.Processing computational logic: Processing computational logic based on user input and operations.

4.Test and debug with optimization and improvement:Test the calculator, optimize and improve the calculator according to the test results.

Code section

from flask import Flask, request, render_template_string
import math

app = Flask(__name__)


@app.route('/')
def calculator():
    return render_template_string('''
        <html>
        <head>
            <title>Calculator</title>
            <style>
                .calculator {
                    text-align: center;
                    margin-top: 100px;
                }

                .button {
                    width: 50px;
                    height: 50px;
                    margin: 5px;
                }
            </style>
            <script>
                function addToExpression(value) {
                    document.getElementById("expression").value += value;
                }

                function calculate() {
                    let expression = document.getElementById("expression").value;
                    let result = eval(expression);
                    document.getElementById("expression").value = result;
                }

                function clearExpression() {
                    document.getElementById("expression").value = '';
                }

                function calculateTrigFunction() {
                    let expression = document.getElementById("expression").value;
                                     // 将角度转换为弧度
                    let radians = eval(expression) * Math.PI / 180;
                    let result = Math.sin(radians);  // 计算正弦函数
                    document.getElementById("expression").value = result;
                }

                function calculateExponent() {
                    let expression = document.getElementById("expression").value;
                    let result = Math.exp(eval(expression));  // 计算指数函数
                    document.getElementById("expression").value = result;
                }

                function calculateLogarithm() {
                    let expression = document.getElementById("expression").value;
                    let result = Math.log10(eval(expression));  // 计算以10为底的对数
                    document.getElementById("expression").value = result;
                }
            </script>
        </head>
        <body>
            <div class="calculator">
                <h1>Calculator</h1>
                <form action="/calculate" method="POST">
                    <input type="text" id="expression" name="expression" required readonly>
                    <br>
                    <button class="button" type="button" onclick="addToExpression('1')">1</button>
                    <button class="button" type="button" onclick="addToExpression('2')">2</button>
                    <button class="button" type="button" onclick="addToExpression('3')">3</button>
                    <button class="button" type="button" onclick="addToExpression('+')">+</button>
                    <br>
                    <button class="button" type="button" onclick="addToExpression('4')">4</button>
                    <button class="button" type="button" onclick="addToExpression('5')">5</button>
                    <button class="button" type="button" onclick="addToExpression('6')">6</button>
                    <button class="button" type="button" onclick="addToExpression('-')">-</button>
                    <br>
                    <button class="button" type="button" onclick="addToExpression('7')">7</button>
                    <button class="button" type="button" onclick="addToExpression('8')">8</button>
                    <button class="button" type="button" onclick="addToExpression('9')">9</button>
                    <button class="button" type="button" onclick="addToExpression('*')">*</button>
                    <br>
                    <button class="button" type="button" onclick="addToExpression('0')">0</button>
                    <button class="button" type="button" onclick="addToExpression('.')">.</button>
                    <button class="button" type="button" onclick="calculate()">=</button>
                    <button class="button" type="button" onclick="addToExpression('/')">/</button>
                    <br>
                    <button class="button" type="button" onclick="clearExpression()">C</button>
                    <button class="button" type="button" onclick="calculateTrigFunction()">sin</button>
                    <button class="button" type="button" onclick="calculateExponent()">exp</button>
                    <button class="button" type="button" onclick="calculateLogarithm()">log</button>
                </form>
            </div>
        </body>
        </html>
    ''')


if __name__ == '__main__':
    app.run(debug=True)