使用JavaScript和CSS进行计算器设计

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

我用于此计算器设计的是流行于所有系统的应用程序。 因此,在开始使用本教程之前,无需下载任何应用程序。

简而言之,计算器由先进的算法组成,可帮助人们在旅途中解决数学或科学问题。 但是在这一本书中,我们将只设计一个简单的算术计算器。

就像我之前说过的那样,我尽了最大的努力使代码变得简单,这就是为什么我使用称为if(conditions){expression;} else if(conditions {expression;}语句)的通用控制语句的原因。

在本教程结束时,您将能够了解JavaScript的一些基础知识,最重要的是,您将了解使用JavaScript很好地开发任何Web应用程序是多么简单。

我们的下一个JavaScript脚本教程将是使用纯JavaScript连接到数据库。 敬请期待!

要开始该过程,您必须打开记事本;

1.在任务栏中单击“开始”或“ Windows”按钮

2.单击所有程序或程序

3.单击附件文件夹

4.找到记事本图标,然后单击

是的,你很好。 请参阅计算器屏幕截图作为附件

复制此HTML,但我建议您键入以便理解流程

HTML设计


<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设计的<head> </ head>之间

<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设计的<head> </ head>之间

<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> 
附加图片
文件类型:jpg Screenshot_20200613-001952-min_2-min.jpg (38.9 KB,15观看)

翻译自: https://bytes.com/topic/html-css/insights/974159-calculator-design-using-javascript-css

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值