Rumah >hujung hadapan web >tutorial js >javascript如何实现计算器功能
javascript如何实现计算器功能
- php中世界最好的语言asal
- 2018-05-23 11:34:4714044semak imbas
这次给大家带来javascript如何实现计算器功能，javascript实现计算器功能的注意事项有哪些，下面就是实战案例，一起来看一下。
这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：
var btns=[
[
{text:"AC",id:"btn_C",value:"c",col:1},
{text:"Del",id:"btn_JJ",value:"✘",col:1},
{text:"%",id:"btn_BF",value:"%",col:1},
{text:"÷",id:"btn_CY",value:"/",col:1,cls:"yellow"},
],
[
{text:"7",id:"btn_C",value:"7",col:1},
{text:"8",id:"btn_JJ",value:"8",col:1},
{text:"9",id:"btn_BF",value:"9",col:1},
{text:"×",id:"btn_CY",value:"*",col:1,cls:"yellow"},
],
[
{text:"4",id:"btn_C",value:"4",col:1},
{text:"5",id:"btn_JJ",value:"5",col:1},
{text:"6",id:"btn_BF",value:"6",col:1},
{text:"-",id:"btn_CY",value:"-",col:1,cls:"yellow"},
],
[
{text:"1",id:"btn_C",value:"1",col:1},
{text:"2",id:"btn_JJ",value:"2",col:1},
{text:"3",id:"btn_BF",value:"3",col:1},
{text:"+",id:"btn_CY",value:"+",col:1,cls:"yellow"},
],
[
{text:"0",id:"btn_C",value:"0",col:2},
{text:".",id:"btn_JJ",value:".",col:1},
{text:"=",id:"btn_BF",value:"=",col:1,cls:"gray"},
],
];
function creatUI(config){
var html=[];
for(var i=0,len=config.length;i<len;i++){
html.push("<tr>");
var arry=config[i];
for(var j=0;j<arry.length;j++)
{
var obj=arry[j];
html.push("<td colspan="+obj.col+" class='"+obj.cls+"' v='"+obj.value+"'>"+obj.text+"</td>");
}
html.push("</tr>");
}
var b = document.getElementById("tbody");
b.innerHTML=html.join("");
}
creatUI(btns);整个计算器实现的主要代码是通过给计算器的每一个键添加点击事件，将其保存在一个数组中，在创建一些函数判断当前输入的值是否满足计算要求，如果满足将数组的值传递给eval( )函数，通过这个函数计算结果，并将结果传递给显示其相对应的p，通过innerText将其显示给用户，只要实现代码如下：
function register(){
var container=document.getElementById("content");
var tds=document.getElementsByTagName("td");
var show=document.getElementById("show");
for(var i=0,len=tds.length;i<len;i++)
{
var block=tds[i];
block.onclick=function(){
var v=this.getAttribute("v");
//实现清零功能
if(v=="c"){
ac();
show.innerText="0";
return ;
}
inputs.push(v);
//实现删除功能
if(v=="✘"){
if(inputs.length==0||inputs.length==1)
{
inputs.length=0;
show.innerText='0';
}
else{
inputs.length=inputs.length-2;
}
}
//检测是不是相邻两个是不是操作符
checkNeiber();
//调用回显的函数
echoEcho(show);
//检测如果已经有两个运算符的话，直接进行计算
if(isStartCompute()){
var result=eval(inputs.join(""));
inputs.length=0;
inputs[0]=result;
show.innerText=result;
inputs[1]=temp;
//show.innerText=result;
}
//如果输入等号，直接让其输出结果
if(v=='=')
{
if(inputs.length==1)
{
inputs.length=0;
show.innerText=0;
}
else{
inputs.length=inputs.length-1;
var result=eval(inputs.join(""));
inputs.length=0;
inputs[0]=result;
show.innerText=result;
inputs.length=0;
}
}
}
}
}剩下的一些函数便是判断计算器能否进行计算，函数里面坑很多，大家注意，我将这个计算器的使用效果展示给大家：
整个计算器实现的所有代码如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>简单的计算器</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.mytable{
border: 1px solid black;
border-spacing: 0px;
margin: 0 auto;
}
.mytable td{
border: 1px solid black;
padding: 20px;
text-align: center;
vertical-align: middle;
cursor:pointer !important;
}
td:hover{
background-color: lightsteelblue;
}
#content{
font-size: 20px;
margin: 0 auto;
width:262px;
background-color:white;
}
.screen{
height: 80px;
padding-right: 8px;
background-color:rgb(112,131,147);
opacity: 0.8;
text-align: right;
line-height:80px;
font-size: 40px;
overflow: hidden;
}
.yellow{
background-color:rgb(255,152,62);
}
.gray{
background-color: #808080;
}
</style>
</head>
<body>
<p id="content">
<p class="screen" id="show">0</p>
<p class="btns">
<table class="mytable">
<tbody id="tbody">
</tbody>
</table>
</p>
</p>
<script type="text/javascript">
var btns=[
[
{text:"AC",id:"btn_C",value:"c",col:1},
{text:"Del",id:"btn_JJ",value:"✘",col:1},
{text:"%",id:"btn_BF",value:"%",col:1},
{text:"÷",id:"btn_CY",value:"/",col:1,cls:"yellow"},
],
[
{text:"7",id:"btn_C",value:"7",col:1},
{text:"8",id:"btn_JJ",value:"8",col:1},
{text:"9",id:"btn_BF",value:"9",col:1},
{text:"×",id:"btn_CY",value:"*",col:1,cls:"yellow"},
],
[
{text:"4",id:"btn_C",value:"4",col:1},
{text:"5",id:"btn_JJ",value:"5",col:1},
{text:"6",id:"btn_BF",value:"6",col:1},
{text:"-",id:"btn_CY",value:"-",col:1,cls:"yellow"},
],
[
{text:"1",id:"btn_C",value:"1",col:1},
{text:"2",id:"btn_JJ",value:"2",col:1},
{text:"3",id:"btn_BF",value:"3",col:1},
{text:"+",id:"btn_CY",value:"+",col:1,cls:"yellow"},
],
[
{text:"0",id:"btn_C",value:"0",col:2},
{text:".",id:"btn_JJ",value:".",col:1},
{text:"=",id:"btn_BF",value:"=",col:1,cls:"gray"},
],
];
function creatUI(config){
var html=[];
for(var i=0,len=config.length;i<len;i++){
html.push("<tr>");
var arry=config[i];
for(var j=0;j<arry.length;j++)
{
var obj=arry[j];
html.push("<td colspan="+obj.col+" class='"+obj.cls+"' v='"+obj.value+"'>"+obj.text+"</td>");
}
html.push("</tr>");
} var b = document.getElementById("tbody");
b.innerHTML=html.join("");
}
creatUI(btns); //注册点击事件
var inputs=[];//定义用户输入按钮的数组
function register(){
var container=document.getElementById("content");
var tds=document.getElementsByTagName("td");
var show=document.getElementById("show");
for(var i=0,len=tds.length;i<len;i++)
{ var block=tds[i];
block.onclick=function(){
var v=this.getAttribute("v");
//实现清零功能
if(v=="c"){
ac();
show.innerText="0";
return ;
}
inputs.push(v);
//实现删除功能
if(v=="✘"){
if(inputs.length==0||inputs.length==1)
{
inputs.length=0;
show.innerText='0';
}
else{
inputs.length=inputs.length-2;
}
}
//检测是不是相邻两个是不是操作符
checkNeiber();
//调用回显的函数
echoEcho(show);
//检测如果已经有两个运算符的话，直接进行计算
if(isStartCompute()){
var result=eval(inputs.join(""));
inputs.length=0;
inputs[0]=result;
show.innerText=result;
inputs[1]=temp;
//show.innerText=result;
}
//如果输入等号，直接让其输出结果
if(v=='=')
{
if(inputs.length==1)
{
inputs.length=0;
show.innerText=0;
} else{
inputs.length=inputs.length-1;
var result=eval(inputs.join(""));
inputs.length=0;
inputs[0]=result;
show.innerText=result;
inputs.length=0;
}
}
}
}
} //检测到两个操作符的时候，就进行计算
function isStartCompute(){
var ctn=0;
for(var i=0;i<inputs.length;i++){
var ip=inputs[i];
if(ip=="+"||ip=="-"||ip=="*"||ip=="/"||ip=="%")
{
ctn++;
} if(ctn>=2)
{
temp=inputs[i];
inputs.length=inputs.length-1; return true;
} if(ip=="=" && checkNumber(inputs[i+1])){
var num=inputs[i+1];
inputs.length=0;
inputs[0]=num;
return true;
}
}
} //判断如果是两个相邻的操作符的情况
function checkNeiber(){
for(var i=0;i<inputs.length;i++)
{
if((inputs[i]=="+"||inputs[i]=="-"||inputs[i]=="*"||inputs[i]=="/"||inputs[i]=="%"||inputs[i]=="=")&&(inputs[i+1]=="+"||inputs[i+1]=="-"||inputs[i+1]=="*"||inputs[i+1]=="/"||inputs[i+1]=="%"||inputs[i+1]=="="))
{
var lastKey=inputs[i+1];
inputs.length=inputs.length-2;
inputs.push(lastKey);
return ;
}
}
}
function checkNumber(word){
word=parseInt(word);
if(word>0 && word<9){
return true;
}
} //清零功能
function ac(){
inputs.length=0;
echoEcho();
} //增加回显功能
function echoEcho(showl){
if(!showl){
showl=document.getElementById("show");
} if(inputs.length==0){
showl.innerText="0";
}
showl.innerText =inputs.join("");
}
window.onload = function(){
register();
} </script>
</body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
javascript中call与apply以及bind有哪些不同
Atas ialah kandungan terperinci javascript如何实现计算器功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript中的桶排序详解Artikel seterusnya：JavaScript中基数排序详解
Artikel berkaitan
Lihat lagi- Analisis mendalam bagi komponen kumpulan senarai Bootstrap
- Penjelasan terperinci tentang fungsi JavaScript kari
- Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
- Angularjs menyepadukan UI WeChat (weui)
- Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional