이번에는 JavaScript로 계산기 기능을 구현하는 방법과 JavaScript로 계산기 기능을 구현할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
이 컴퓨터는 주로 2차원 배열을 통해 배열로 저장한 후 함수를 통해 표시되는 효과를 제어합니다. 일부 키는 두 개의 열을 차지합니다. 먼저 전체의 외부 스타일입니다. 컴퓨터의 주요 구현 코드와 렌더링은 다음과 같습니다.
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 중국어 웹사이트의 기타 관련 기사를 주목해 주세요!
추천 도서:
JS 디자인 패턴의 명령 패턴에 대한 자세한 설명
자바스크립트에서 호출, 적용, 바인딩의 차이점은 무엇인가요
위 내용은 자바스크립트에서 계산기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
