基于JavaScript和CSS的计算器设计

2020-10-05 我要评论

在本文中，我将讨论纯HTML、JavaScript和CSS为什么要设计计算器。

我在这个计算器设计中使用的是一个遵循所有系统的流行应用程序。因此，在开始学习本教程之前，您不需要下载任何应用程序。

数学计算是一种帮助人类解决问题的科学算法。但在这一个，我们要设计的只是简单的算术计算器。

正如我前面所说的，我尽可能地简化代码，这就是为什么我使用通用的控制语句if（conditions）{expression；}else if（conditions）{expression；}语句。

在本教程结束时，您将能够理解JavaScript的一些基本知识，最重要的是，您将看到使用JavaScript开发任何web应用程序是多么简单。

我们的下一个JavaScript脚本教程将使用纯JavaScript连接到数据库。所以请继续关注！

要开始这个过程，你必须打开你的记事本；

1单击任务栏上的“开始”或“windows”按钮

2单击“所有程序”或“程序”

3单击附件文件夹找到记事本图标并单击，然后输入代码吧：

<html>
<head>
<title>JavaScript Calculator</title>
</head>
<body>
<div class="calc">
<table>
<tr>
<td colspan="4">
<div class="txt" id="divinput">0</div>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn8" value="8" onclick="input(8);"/>
</td>
<td>
<input type="button" class="btn" id="btn9" value="9" onclick="input(9);"/>
</td>
<td>
<input type="button" class="btn" id="btn7" value="7" onclick="input(7 );"/>
</td>
<td>
<input type="button" class="btnopt" id="btnclr" value="Clr" onclick="calc('clr');" />
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn4" value="4" onclick="input(4);"/>
</td>
<td>
<input type="button" class="btn" id="btn5" value="5" onclick="input(5);"/>
</td>
<td>
<input type="button" class="btn" id="btn6" value="6" onclick="input(6);"/>
</td>
<td>
<input type="button" class="btnopt" id="btndivide" value="/" onclick="calc('/');"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btn1" value="1" onclick="input(1);"/>
</td>
<td>
<input type="button" class="btn" id="btn2" value="2" onclick="input(2);"/>
</td>
<td>
<input type="button" class="btn" id="btn3" value="3" onclick="input(3);"/>
</td>
<td>
<input type="button" class="btnopt" id="btnmultiply" value="*" onclick="calc('*');"/>
</td>
</tr>
<tr>
<td>
<input type="button" class="btn" id="btndot" value="."  onclick="input('.');"/>
</td>
<td>
<input type="button" class="btn" id="btn0" value="0" onclick="input(0);"/>
</td>
<td>
<input type="button" class="btn" id="btnminus" value="-" onclick="calc('-');"/>
</td>
<td>
<input type="button" class="btnopt" id="btnplus" value="+" onclick="calc('+');"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" class="btnopt" style="width:100%;" id="btnequal" value="=" onclick="calc('=');"/>
</td>
</tr>
</table>
</div>
</body>
</html>

你可以复制这个HTML代码，但我建议你手动输入，以便你理解代码。将这个脚本放在HTML设计的之间：

<script>
var dinput=0;
var preval; //to store divinput value before clearing
var sign=""; //to know if chosen operator is +,*,- or /
var result=""; // final result
var rawinput=0;
function input(val)// this is used to input value into the calculator display screen
{
var divinput=document.getElementById("divinput");//calculator display screen
rawinput=rawinput + val;
if(dinput !=0)
{
//checking to see if divinput value is zero
//if it is not, then goto else
dinput="" + dinput + val;
divinput.innerHTML="" + divinput.innerHTML+ val;
}
else
{
divinput.innerHTML= "" + val;
dinput = "" + val;
}
//for showing previous input and current input
if(sign != ""){
rawinput=rawinput;
divinput.innerHTML=rawinput + "<br/>" + dinput;
}
else{
rawinput=rawinput + val;
}
 
}
//this function is the main calculator power room
function calc(opt)
{
var newval; //to collect new inputted value
var divinput=document.getElementById("divinput");
if(opt=="clr")
{//for resetting the calculator
divinput.innerHTML="0";
dinput=0;
rawinput=0;
result="";
preval="";
sign="";
opt="";
}
else if (opt !="clr" && opt != "=")
{ //for inputs manipulation
preval=dinput;
divinput.innerHTML="";
dinput="";
sign=opt;
rawinput="" + preval + opt;
divinput.innerHTML=rawinput + "<br/>" + "";
}
 
else if(opt== "=")
{//for displaying result
newval=dinput;
if(sign=="+")
{
result=parseFloat(preval) + parseFloat(newval);
}
else if(sign=="-")
{
result=parseFloat(preval) - parseFloat(newval);
}
else if(sign=="/")
{
result=parseFloat(preval) / parseFloat(newval);
}
else if(sign=="*")
{
result=parseFloat(preval) * parseFloat(newval);
}
dinput=result;
divinput.innerHTML="<span class='values'>" + rawinput + "=</span>" + "<br/><br/>" + "<span class='result'>" + result + "</span>";
}
}
</script>

我们需要这个样式表来美化计算器。所以把这个样式放在HTML设计的之间：

<style>
.values
{
color: blue;
font-size:30pt;
}
.result{
color: purple;
font-size:50pt;
float: right;
}
.btn{
background-color:crimson;
color:white;
font-family:Calibri;
font-size:40pt;
font-weight:bold;
width:215px;
height:215px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.btnopt{
background-color:brown;
color:white;
font-family:Calibri;
font-size:45pt;
font-weight:bold;
width:25px;
height:25px;
border-style: solid;
border-width:2px;
border-color: yellow;
}
.txt
{
width:100%;
height:400px;
border-style: solid;
border-width:3px;
border-color:gray;
background-color:white;
color:red;
font-family:Calibri;
font-size:125pt;
font-weight:bold;
white-space:pre-line;
word-break: break-all;
word-wrap: break-word;
}
table{
width:100%;
}
td
{
width:100px;
}
.calc{
width:100%;
height:auto;
border-style: solid;
border-width:2px;
border-color:gray;
margin:0 auto; /* center the calc div*/
}
</style>

基于JavaScript和CSS的计算器设计

相关文章

猜您喜欢

今日热门