Web calculator based on c language

已于 2023-10-09 15:56:04 修改
阅读量39 收藏
点赞数
文章标签： 前端 c语言 java
于 2023-10-09 15:11:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clever_sister/article/details/133672462
版权

contents

1.Introduction

2.Basic Information 

3.PSP Table

4.Ideas before Launching the Project

5.Design and Implementation Process

6.Code Description

(1) Set interface layout:

(2)Transmission function:

(3) Set the function of clearing, deleting and calculating results:

(4) Set each key name:

(5)Complete code：

(6)Displaying Result

           7.Summary

1.Introduction

This project uses the LIve Server module in Visual Studio to realize all the functions of a basic calculator in the local end of edge web page based on c language.The Live Server is a local development server that can reload a dynamic or static page.

This calculator can realize the basic function of addition, subtraction, multiplication and division.

Link to the project code:cleversis/myrep (github.com)icon-default.png?t=N7T8https://github.com/cleversis/myrep

2.Basic Information 

The link of my classhttps://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignmenthttps://bbs.csdn.net/topics/617332156
The Aim of This AssignmentCreate a calculator with a visual interface
MU STU ID and FZU STU ID21126984_832101312

3.PSP Table

Personal Software Process StagesEstimated Time（minutes）Actual Time（minutes）
Planning3050
 Estimate3040
Development400500
 Analysis3060
Design Spec1530
Design Review2540
Coding Standard1030
Design6080
Coding240300
Code Review3020
Test1010
Reporting90120
Postmortem & Process Improvement Plan1525
Sum9851305

4.Ideas before Launching the Project

Since this project is a visual calculator, it is only necessary to write the running logic of the calculator and design the interface size, and there is no need to involve the development of the server and other data interaction content.

After referring to a large number of materials in CSDN and Baidu, I decided to implement the front end of the calculator through the local web page and conduct the programming of this project based on c language.

5.Design and Implementation Process

(1) First of all, the size of each button on the interface is designed to a reasonable size.

(2) We set up a variable that can directly receive the combination of operations from the front-end input, and complete the operation under the c language's own operation logic through the idea of string to mathematical operations.

(3) Write a result display function to display the result of the operation on the interface.Write several function keys at the same time, such as zero key, delete key and so on to achieve the basic functions of the calculator.

6.Code Description

(1) Set interface layout:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
       
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: #4278bb;
            border-radius: 10px 10px 0px 0px;
        }

      
        #calc-title {
            font-size: 22px;
            color: white;
            float: left;
            margin: 10px 10px 0px 200px;
        }

      
        #result {
            width: 445px;
            height: 60px;
            margin: auto;
            font-size: 40px;
            background-color: white;
            border: solid 3px #4278bb;
        }

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

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

        #button div:hover {
            background-color: rgb(48, 149, 203);
        }

(2)Transmission function:

Write a transfer function that transfers the operators entered into the front end and the numbers to the variables stored by the program.

 </style>
    <script type="text/javascript">

        function clickNumber(number) {
            var result = document.getElementById("result");
            result.innerHTML = result.innerHTML + number;
        }

        function clickOperator(operator) {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {
                var temp = string.substr(0, len - 1) + operator;
                result.innerHTML = temp;
            } else {
                result.innerHTML += operator;
            }
        }

        function clickPonit() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last !== ".") {
                result.innerHTML = result.innerHTML + ".";
            } else {
                result.innerHTML = result.innerHTML;
            }
        }

(3) Set the function of clearing, deleting and calculating results:

        function clearresult() {
            var result = document.getElementById("result");
            result.innerHTML = "";
        }

        function del() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            if (string.length > 0) {
                result.innerHTML = string.slice(0, -1);
            }
        }

        function doCalc() {
            var result = document.getElementById("result");
            var expression = result.innerHTML;
            result.innerHTML = eval(expression);
        }

(4) Set each key name:

<body>
    <div id="top">
        <div id="calc-title">calculator</div>
    </div>
    <div id="result">
    </div>
    <div id="button">
        <div onclick="clearresult()">AC</div>
        <div onclick="clickOperator('/')">÷</div>
        <div onclick="clickOperator('*')">x</div>
        <div onclick="del()">delate</div>
        <div onclick="clickNumber(7)">7</div>
        <div onclick="clickNumber(8)">8</div>
        <div onclick="clickNumber(9)">9</div>
        <div onclick="clickOperator('%')">%</div>
        <div onclick="clickNumber(4)">4</div>
        <div onclick="clickNumber(5)">5</div>
        <div onclick="clickNumber(6)">6</div>
        <div onclick="clickOperator('-')">-</div>
        <div onclick="clickNumber(1)">1</div>
        <div onclick="clickNumber(2)">2</div>
        <div onclick="clickNumber(3)">3</div>
        <div onclick="clickOperator('+')">+</div>
        <div></div>
        <div onclick="clickNumber(0)">0</div>
        <div onclick="clickPonit()">.</div>
        <div onclick="doCalc()">=</div>
    </div>
</body>

(5)Complete code：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <style>
       
        #top {
            width: 450px;
            height: 50px;
            margin: auto;
            background-color: #4278bb;
            border-radius: 10px 10px 0px 0px;
        }

        
        #calc-title {
            font-size: 22px;
            color: white;
            float: left;
            margin: 10px 10px 0px 200px;
        }

       
        #result {
            width: 445px;
            height: 60px;
            margin: auto;
            font-size: 40px;
            background-color: white;
            border: solid 3px #4278bb;
        }

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

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

        #button div:hover {
            background-color: rgb(48, 149, 203);
        }
    </style>
    <script type="text/javascript">
       
        function clickNumber(number) {
            var result = document.getElementById("result");
            result.innerHTML = result.innerHTML + number;
        }
      
        function clickOperator(operator) {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last == "+" || last == "-" || last == "*" || last == "/" || last == "%") {
                var temp = string.substr(0, len - 1) + operator;
                result.innerHTML = temp;
            } else {
                result.innerHTML += operator;
            }
        }
       
        function clickPonit() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            var len = string.length;
            var last = string.charAt(len - 1);
            if (last !== ".") {
                result.innerHTML = result.innerHTML + ".";
            } else {
                result.innerHTML = result.innerHTML;
            }
        }
       
        function clearresult() {
            var result = document.getElementById("result");
            result.innerHTML = "";
        }
        
        function del() {
            var result = document.getElementById("result");
            var string = result.innerHTML;
            if (string.length > 0) {
                result.innerHTML = string.slice(0, -1);
            }
        }
       
        function doCalc() {
            var result = document.getElementById("result");
            var expression = result.innerHTML;
            result.innerHTML = eval(expression);
        }
    </script>
</head>

<body>
    <div id="top">
        <div id="calc-title">calculator</div>
    </div>
    <div id="result">
    </div>
    <div id="button">
        <div onclick="clearresult()">AC</div>
        <div onclick="clickOperator('/')">÷</div>
        <div onclick="clickOperator('*')">x</div>
        <div onclick="del()">delate</div>
        <div onclick="clickNumber(7)">7</div>
        <div onclick="clickNumber(8)">8</div>
        <div onclick="clickNumber(9)">9</div>
        <div onclick="clickOperator('%')">%</div>
        <div onclick="clickNumber(4)">4</div>
        <div onclick="clickNumber(5)">5</div>
        <div onclick="clickNumber(6)">6</div>
        <div onclick="clickOperator('-')">-</div>
        <div onclick="clickNumber(1)">1</div>
        <div onclick="clickNumber(2)">2</div>
        <div onclick="clickNumber(3)">3</div>
        <div onclick="clickOperator('+')">+</div>
        <div></div>
        <div onclick="clickNumber(0)">0</div>
        <div onclick="clickPonit()">.</div>
        <div onclick="doCalc()">=</div>
    </div>
</body>
</html>

(6)Displaying Result

7.Summary

Through the design of this simple visual calculator, I initially learned the specific process of how to make a software front end and back end, and knew some basic knowledge needed for software development. However, I still have some shortcomings. For example, I can design a scientific calculator, including more functions, which can be gradually improved in the subsequent learning process. I hope that on the basis of this study, I can have more development experience in software production and gain something in the process of learning this course.

832101312-张凌杰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Calculator-On-WEB:网页版计算器
05-19
Calculator-On-WEB是一个基于Web的计算器项目，主要利用JavaScript编程语言实现。JavaScript是一种广泛用于网页开发的脚本语言，它允许在用户浏览器上执行代码，为用户提供动态交互体验。在这个项目中，JavaScript被...
calculator_C-C++_calculator_
10-04
标题"calculator_C-C++_calculator_"表明我们将探讨一个用C或C++编写的计算器程序。描述中的"function calculator from calculator"暗示我们将专注于计算器程序中的函数实现。 C++相比C语言，提供了类和对象的概念...
Calculator Based on IDEA
m0_65328667的博客
10-08 71
【代码】Calculator Based on IDEA。
Simple Calculator Based on JavaScript
Sir_Su的博客
10-10 92
Simple Calculator Based on JavaScript
A super calculator based on html.
SWARDnb的博客
10-08 91
This is a blog that started writing a calculator based on HTML language from scratch. In this blog, I will provide a detailed introduction to the implementation of an HTML based web calculator and showcase the final product.
Web calculator program based on HTML.
qq_30033587的博客
10-06 109
【代码】Web calculator program based on HTML.
Based-on-Java-JDK-calculator.rar_Java科学计算器_calculator
09-21
例如，可以创建一个Calculator类，其中包含各种计算方法，然后在主程序中实例化并调用这些方法。事件处理的逻辑则可以通过匿名内部类或者lambda表达式来实现，使得代码更加简洁。 在调试和测试过程中，开发者会用到...
C++calculator.rar_calculator_visual c
07-14
该计算器可执行简单的加减乘除计算，还有科学计算，高精度
Calculator.rar_calculator C++_visual c
07-15
基于C++的简单计算器，带有MFC图形界面
如何搭建互联网医院系统源码？医疗陪诊APP开发实战详解
meihusdk的博客
07-11 248
希望本文能够为正在或即将从事相关开发的技术人员提供一些参考和帮助。通过不断的努力和创新，我们可以为患者提供更优质的医疗服务，推动医疗行业的数字化转型。
Node多版本管理器NVM安装使用
GongWeiBuQi的博客
07-11 193
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 886
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 784
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1045
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 768
模糊搜索功能 每个网站都要用得到
Webkit简介以及工作流程
读心悦
07-10 320
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
​​ 翻页 上一页/下一页
szzlh123456789的博客
07-09 380
【代码】​​ 翻页 上一页/下一页。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 258
通过sm4对文件进行加解密，用户输入密码
win_bison -o calculator.c calculator.y
04-23
这似乎是一个命令行命令，它使用bison生成C语言解析器。"win_bison"可能是一个为Windows平台定制的Bison版本。"-o"选项指定输出文件名为"calculator.c"，而"calculator.y"是输入Bison源文件的名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值