Catalog
Preface
This is an introduction blog about making web calculators. This calculator program is based on HTML, CSS, and Javascript languages. It can not only perform basic addition, subtraction, multiplication, and division arithmetic, but also perform complex like square and square root operations, as well as cube and open cube operations. More importantly, the calculator can achieve one click entertainment function through website links, allowing people to take time off from their busy schedules.
Some ID information:
| The Link Your Class | https://bbs.csdn.net/forums/ssynkqtd-04?typeId=5171414 |
|---|---|
| The Link of Requirement of This Assignment | https://bbs.csdn.net/topics/617332156 |
| GitHub repository | https://github.com/Adonlgd/WebCalculator |
| The Aim of This Assignment | Create a calculator with a visual interface |
| MU STU ID and FZU STU ID | MUID:21124442_FZUID:832102109 |
Ⅰ 、PSP form
| Personal Software Process Stages | Estimated Time（minutes） | Actual Time（minutes） |
|---|---|---|
| Planning | ||
| • Estimate | 20 | 30 |
| Development | ||
| • Analysis | 30 | 20 |
| • Design Spec | 30 | 20 |
| • Design Review | 20 | 20 |
| • Coding Standard | 45 | 30 |
| • Design | 15 | 15 |
| • Coding | 120 | 145 |
| • Code Review | 20 | 30 |
| • Test | 20 | 20 |
| Reporting | ||
| • Test Repor | 20 | 20 |
| • Size Measurement | 30 | 30 |
| • Postmortem & Process Improvement Plan | 30 | 30 |
| Sum | 400 | 410 |
Ⅱ、Problem-solving Ideas
1.Determine code language
The topic is to create a visual calculator, which can actually be used in languages such as Java, C, and C++. But after understanding these languages, I decided to create a web version calculator based on HTML, CSS, and JavaScript languages, because the JavaScript scripting language does not rely on the operating system and only requires browser support. Therefore, a JavaScript script can be brought to any machine for use after writing. This also makes this web calculator easy to run on most computers.
2.Program Structure
The interactive end of the webpage is written in HTML and CSS languages, and the backend is written in JavaScript.
3.Function
a. Basic addition, subtraction, multiplication, and division arithmetic (+,-,*,/)
b. Complex Operation(x²,x³,√,∛)
c.One click entertainment function( Happy click )
Ⅲ、Design and implementation process
1.Code Structure
The web calculator is mainly divided into two structures: front-end and back-end. Among them, the front-end is written in HTTML language, and to ensure the simplicity and readability of the code, CSS files are used to assist. To achieve various functions of buttons, JavaScript is used to write backend code.
2.Flow Chart
3. UI Design
Ⅳ、Code description
1.HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Calculator</title>
<link rel="stylesheet" type="text/css" href="file.css">
<script type="text/javascript" src="test1.js"></script>
</head>
<body onload="init()">
<div class="div4">
<h1 align="center">
<font face="楷体">Web Calculator</font>
</h1>
</div>
<div class="div1">
<div class="div2">
<input type="text" id="Text1" class="text1" >
</div>
<div class="div3">
<input type="button" value="C" class="">
<input type="button" value="<-" class="">
<input type="button" value="+/-" class="">
<input type="button" value="/" class="">
<input type="button" value="1" class="">
<input type="button" value="2" class="">
<input type="button" value="3" class="">
<input type="button" value="*" class="">
<input type="button" value="4" class="">
<input type="button" value="5" class="">
<input type="button" value="6" class="">
<input type="button" value="-" class="">
<input type="button" value="7" class="">
<input type="button" value="8" class="">
<input type="button" value="9" class="">
<input type="button" value="+" class="">
<input type="button" value="0" class="">
<input type="button" value="." class="">
<input type="button" value="摸鱼" id="bilibili">
<input type="button" value="=" class="">
<input type="button" value="x²" class="">
<input type="button" value="x³" class="">
<input type="button" value="√" class="">
<input type="button" value="∛" class="">
</div>
</div>
</body>
</html>
It can be seen that due to the use of CSS file assistance, the entire HTML code is not particularly lengthy and very easy to read.
2. CSS file
.div1{
width: 400px;
height: 550px;
top: 150px;
left: 600px;
position: absolute;
border-radius: 10px;
background-image: url(2.jpeg);
}
.div2{
width: 350px;
height: 80px;
position: relative;
left: 20px;
top: 42px;
}
.text1{
width: 350px;
height: 60px;
font-size: large;
text-align: right;
background-color: white;
}
.div3{
width: 340px;
height: 350px;
position: relative;
left: 30px;
top: 70px;
border-radius: 10px;
background-color: darkblue;
}
.div4{
width: 400px;
height: 100px;
top: 50px;
left: 600px;
position: absolute;
border-radius: 10px;
background-color: cyan;
}
input[type="button"]{
height: 40px;
width: 60px;
margin: 8px;
margin-left: 13px;
border-radius: 10px;
background: goldenrod;
}
input[type="button"]:hover{
background-color: cornflowerblue;
border: 2px solid;
}
3. JavaScript file
/*Place the initialized content in JS and store the style content
Put it in CSS, and only write basic HTML content such as class and value in HTML*/
function init(){
initLabel();
fun();
Link();
}
/*Initialize the content of the text box*/
function initLabel(){
let value=document.getElementById("Text1");
value.value=0;
value.disabled="disabled";
}
//Button Add Function
function fun(){
let getText=document.getElementById("Text1");
let nums=document.getElementsByTagName("input");
let numFirst,symbol;
for (let i=0;i<nums.length;i++){
nums[i].onclick=function (){ //isNaNIf this function judge if it is a number, it returns false, and if it is not a number, it returns true
if (!isNaN(this.value)){
if (isNull(getText.value))
getText.value=this.value;
else
getText.value=getText.value+this.value;
}
else{/*Non numeric operations*/
let button_info=this.value;
switch (button_info){
//Non operator operations
case "C":
getText.value=0;
break;
case "<-":
getText.value=myBack(getText.value);
break;
case "+/-":
//Once clicked, it becomes a symbol, and once more clicked, it becomes a positive sign
getText.value=mySign(getText.value);
break;
case ".":
//The decimal point can only be clicked once
getText.value=point_fun(getText.value);
break;
//Complex operations
case "x²":
numFirst=getText.value*1;
getText.value=numFirst*numFirst;
break;
case "x³":
numFirst=getText.value*1;
getText.value=numFirst*numFirst*numFirst;
break;
case "√":
numFirst=getText.value*1;
getText.value=Math.sqrt(numFirst);
break;
case "∛":
numFirst=getText.value*1;
getText.value=Math.cbrt(numFirst);
break;
//Simple operations
case "/":
numFirst=getText.value*1;
getText.value=0;
symbol="/"
break;
case "*":
numFirst=getText.value*1;
getText.value=0;
symbol="*"
break;
case "-":
numFirst=getText.value*1;
getText.value=0;
symbol="-"
break;
case "+":
numFirst=getText.value*1;
getText.value=0;
symbol="+"
break;
case "=":
switch (symbol){
//ParseInt() cannot be used to convert a string to a number below, as if there are decimals, they will be automatically converted to integers
//Method for converting strings to numbers:
//1. Value * 1 implementation
//2. ParseInt() implementation
//3. Number() implementation
case "+":
getText.value=numFirst+Number(getText.value);
break;
case "-":
getText.value=numFirst-Number(getText.value);
break;
case "*":
getText.value=numFirst*Number(getText.value);
break;
case "/":
if (!isNull(getText.value))
getText.value=numFirst/Number(getText.value);
else{
getText.value=0;
numFirst=0;
alert("Divider cannot be 0 or empty")
}
break;
}
break;
}
}
}
}
}
/functions
//Implement sign function
function mySign(n){
return Number(n)*(-1);
}
//Realize the function of the exit key
function myBack(n){
n=n.substr(0,n.length-1);
if (isNull(n))
n=0;
return n;
}
//Implement decimal point function
function point_fun(n){
//indexOf() indicates whether this symbol exists, returns the position if it exists, and returns -1 if it does not exist
if (n.indexOf(".")==-1)
n=n+".";
return n;
}
//Operation to determine whether the text box is empty or 0
function isNull(num){
return (num=="0"||num.length==0)?true:false;
}
//Add a hyperlink to the fun button
function Link(){
document.getElementById("bilibili").onclick=function (){
window.location.href="http://www.bilibili.com";
}
}
You can see that the backend code section first initializes the display box, and then divides the buttons into numeric and non numeric operations. During calculation, the text is converted into numbers through the code getText. value * 1for mathematical operations. In addition, through the use of the window. location. href statement, the calculator has been added with one click entertainment function, fully utilizing the advantages of convenient navigation in the web version of the calculator, and adding more personalized choices for users.
Ⅴ、Vedio
1. +，-，*，/
2.±, <- , x² ,x³ ,√ ,∛
3. Happy click
If you could not see clearly, there is also a vedio you could see:
WebCalculator
Ⅵ、Summary
In this assignment, I designed a web calculator. The calculator program is based on HTML, CSS, and Javascript languages. Calculators can perform basic addition, subtraction, multiplication, and division operations, as well as square sum and square root operations, as well as cube and open cube operations. More importantly, calculators can achieve one click entertainment function through website links, allowing people to have fun. The website to be redirected can be customized in the code according to the user’s preferences.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
