Web calculator program based on HTML.

最新推荐文章于 2024-07-14 18:10:31 发布

832101330_魏铭江

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量109

点赞数 3

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_30033587/article/details/133612784

版权

Project introduction

This is a blog about building a web calculator with the function addition, subtraction, multiplication, division , trigonometric function, backspace, decimal and clear all. Therefore, I use the language html to create this calculator with css and js.

Link to the project: https://github.com/wangdreamfeet/tutorial

Assignment table

class link	https://bbs.csdn.net/forums/ssynkqtd-04
project requirement	https://bbs.csdn.net/topics/617332156
project aim	create a calculator
MU STU ID and FZU STU ID	21124388(MU) / 832102330(FZU)

PSP table

Personal Software Process Stages	Estimated Time（minutes）	Actual Time（minutes）
Planning	40	40
• Estimate
Development	20	20
• Analysis	20	20
• Design Spec	10	20
• Design Review	20	30
• Coding Standard	20	20
• Design	40	40
• Coding	100	100
• Code Review	30	30
• Test	10	10
Reporting
• Test Repor	120	100
• Size Measurement	5	5
• Postmortem & Process Improvement Plan	20	20
Sum	455	455

Ideas before this project

In this project, the fundamental achievement is to finish the functions including input numbers, addition, subtraction, multiplication, division, subtraction, and with the advanced function involves trigonometric functions.

We can utilise the language of JS, Css and HTML to build the simple web calculator.

I choosed the application of Vscode. I created a html file in it. And, I started coding.

Process

Firstly, I want to demonstrate this piece of code.

		/*创建计算器的外观，如长，边距，边缘，颜色*/
        .calculator {
            width: 500px;
            padding: 30px;
            border: 6px solid #000000;
            border-radius: 15px;
            margin: 0 auto;
            background-color: #f2f2f2;
        }

        /*创建输入框的外观，如长度，宽度，输入数字外观大小，边缘，颜色*/
        .calculator input {
            width: 100%;
            height: 60px;
            font-size: 40px;
            margin-bottom: 30px;
            background-color: #fff;
            color: #333;
        }

        /*创建输入按钮的外观，如长度，宽度，字符大小，边距，颜色*/
        .calculator button {
            width: 80px;
            height: 90px;
            font-size: 36px;
            margin-right: 30px;
            background-color: #525151;
            color: #fff;
            border: none;
            border-radius: 30px;
        }

        /*创建整体背景色*/
        .calculator button:hover {
            background-color: #999;
        }

This piece of code which I used is Css. I utilized this piece of code to give a general layout of the web calculator. For example, I defined the width of the calculator is 500px to make the calculator wider to look. Then, I built the padding, border and the background color of the basic layout of the calculator. After that, I used the code to build the input block to fit it. I gave it the white color due to it is clearly to see. I made the font size 40 px to look more comfortable. Finally, I defined the button of the calculator, 80 px width, 90 px height, 36 font-size and something familiar with before.

/

<div class="calculator">
    <!--创建输入数字和运算符的按钮排版-->
    <input type="text" id="result" readonly>
    <button onclick="clearResult()">C</button>
    <button onclick="appendNumber('(')">(</button>
    <button onclick="appendNumber(')')">)</button>
    <button onclick="backspace()">⌫</button>
    <button onclick="appendNumber(9)">9</button>
    <button onclick="appendNumber(8)">8</button>
    <button onclick="appendNumber(7)">7</button>
    <button onclick="appendOperator('+')">+</button>
    <button onclick="appendNumber(6)">6</button>
    <button onclick="appendNumber(5)">5</button>
    <button onclick="appendNumber(4)">4</button>
    <button onclick="appendOperator('-')">-</button>
    <button onclick="appendNumber(3)">3</button>
    <button onclick="appendNumber(2)">2</button>
    <button onclick="appendNumber(1)">1</button>
    <button onclick="appendOperator('*')">*</button>
    <button onclick="appendNumber(0)">0</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendOperator('/')">/</button>
    <button onclick="appendDecimal()">.</button>
    <button onclick="sin()">sin</button>
    <button onclick="cos()">cos</button>
    <button onclick="tan()">tan</button>
</div>

The second piece of the code is the body. I used html to inserted the numbers and the operators into all of these buttons.

///

<script>
        //添加数字和括号
        function appendNumber(number) {
            var result = document.getElementById("result");
            result.value += number;
        }

        //添加运算符
        function appendOperator(operator) {
            var result = document.getElementById("result");
            result.value += operator;
        }

        //计算值
        function calculate() {
            var result = document.getElementById("result");
            var expression = result.value;
            var answer = eval(expression);
            result.value = answer;
        }

        //清除所有值
        function clearResult() {
            var result = document.getElementById("result");
            result.value = "";
        }

        //三角函数运算
        function sin() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.sin(degrees * Math.PI / 180);
        }

        function cos() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.cos(degrees * Math.PI / 180);
        }

        function tan() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.tan(degrees * Math.PI / 180);
        }

        //添加小数点
        function appendDecimal() {
            var result = document.getElementById("result");
            if (result.value.indexOf(".") == -1) {
                result.value += ".";
            }
        }

        //退格
        function backspace() {
            var result = document.getElementById("result");
            result.value = result.value.slice(0, -1);
        }

    </script>

The last piece of code which I used is Js. I made addtion, subtraction, multiplication, division and trigonometric function by using these codes.

Function appendNumber(number) is to put the number and the parentheses that you click the button into this calculator.

Function appendOperator(operator) is to put the operator in it.

Function calculate() means that calculate all of the numbers and get the final answer by using the substitution.

Function clearResult() is used to clear all.

Function sin/cos/tan() is used to calculate the trigonometric function.

Function appendDecimal() is used to add a decimal into it.

Function backspace() is used to back one step.

Overall code

<!DOCTYPE html>
<html>

<head>
    <title>Simple_calculator</title>
    <style>
        /*创建计算器的外观，如长，边距，边缘，颜色*/
        .calculator {
            width: 500px;
            padding: 30px;
            border: 6px solid #000000;
            border-radius: 15px;
            margin: 0 auto;
            background-color: #f2f2f2;
        }

        /*创建输入框的外观，如长度，宽度，输入数字外观大小，边缘，颜色*/
        .calculator input {
            width: 100%;
            height: 60px;
            font-size: 40px;
            margin-bottom: 30px;
            background-color: #fff;
            color: #333;
        }

        /*创建输入按钮的外观，如长度，宽度，字符大小，边距，颜色*/
        .calculator button {
            width: 80px;
            height: 90px;
            font-size: 36px;
            margin-right: 30px;
            background-color: #525151;
            color: #fff;
            border: none;
            border-radius: 30px;
        }

        /*创建整体背景色*/
        .calculator button:hover {
            background-color: #999;
        }
    </style>
</head>

<body>
    <div class="calculator">
        <!--创建输入数字和运算符的按钮排版-->
        <input type="text" id="result" readonly>
        <button onclick="clearResult()">C</button>
        <button onclick="appendNumber('(')">(</button>
        <button onclick="appendNumber(')')">)</button>
        <button onclick="backspace()">⌫</button>
        <button onclick="appendNumber(9)">9</button>
        <button onclick="appendNumber(8)">8</button>
        <button onclick="appendNumber(7)">7</button>
        <button onclick="appendOperator('+')">+</button>
        <button onclick="appendNumber(6)">6</button>
        <button onclick="appendNumber(5)">5</button>
        <button onclick="appendNumber(4)">4</button>
        <button onclick="appendOperator('-')">-</button>
        <button onclick="appendNumber(3)">3</button>
        <button onclick="appendNumber(2)">2</button>
        <button onclick="appendNumber(1)">1</button>
        <button onclick="appendOperator('*')">*</button>
        <button onclick="appendNumber(0)">0</button>
        <button onclick="calculate()">=</button>
        <button onclick="appendOperator('/')">/</button>
        <button onclick="appendDecimal()">.</button>
        <button onclick="sin()">sin</button>
        <button onclick="cos()">cos</button>
        <button onclick="tan()">tan</button>
    </div>

    <script>
        //添加数字和括号
        function appendNumber(number) {
            var result = document.getElementById("result");
            result.value += number;
        }

        //添加运算符
        function appendOperator(operator) {
            var result = document.getElementById("result");
            result.value += operator;
        }

        //计算值
        function calculate() {
            var result = document.getElementById("result");
            var expression = result.value;
            var answer = eval(expression);
            result.value = answer;
        }

        //清除所有值
        function clearResult() {
            var result = document.getElementById("result");
            result.value = "";
        }

        //三角函数运算
        function sin() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.sin(degrees * Math.PI / 180);
        }

        function cos() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.cos(degrees * Math.PI / 180);
        }

        function tan() {
            var result = document.getElementById("result");
            var degrees = result.value;
            result.value = Math.tan(degrees * Math.PI / 180);
        }

        //添加小数点
        function appendDecimal() {
            var result = document.getElementById("result");
            if (result.value.indexOf(".") == -1) {
                result.value += ".";
            }
        }

        //退格
        function backspace() {
            var result = document.getElementById("result");
            result.value = result.value.slice(0, -1);
        }

    </script>
</body>

</html>

Vedio demonstration

Simple_calculator

Summary

In this project, I have learnt how to create a simple web calculator by using html, Js, Css in VScode. And I believe that it has improved my skill of software engineering.

Although there are many things that I can not deal with, but I hope that I can learn step by step.