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

作者 : IT 大叔 本文共4573个字,预计阅读时间需要12分钟 发布时间: 2020-11-21

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

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

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

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

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

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

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

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

3.单击“附件文件夹”

4.找到记事本图标,然后单击“是”。请参阅计算器屏幕截图作为附件复制此HTML,但是我建议您键入以便理解流程

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

将此脚本放在HTML设计的<head> </ head>之间
<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>
<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>
免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » 使用JavaScript和CSS进行计算器设计

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论