前端制作计算器

用html+css+js完成计算器的基本功能，代码如下：

HTML代码

        <div id="four">
<div class="evaluator">
<div class="input">
<input type="text">
</div>
<table>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>+</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>*</td>
</tr>
<tr>
<td>0</td>
<td>c</td>
<td>=</td>
<td>/</td>
</tr>
</table>
</div>
</div>

CSS代码

#four .evaluator{
    border: 2px gray solid;
    width: 240px;
}
#four input{
    width: 200px;
    padding: 5px;
    
}
#four .input{
    width: 200px;
    margin: 10px auto;
}
#four table{
    width: 240px;
    border-collapse:separate;
    border-spacing:15px 15px;
}
#four td{
    padding: 5px 15px;
    border: 1px black solid;
}
#four td:active{
    background-color: gray;
}

JS代码

const input = document.querySelector("#four input");
const tdList = document.querySelectorAll("#four td");
let evalstr = "";
console.log(tdList);
for(let i = 0;i < tdList.length;i++){
    tdList[i].addEventListener("click",()=>{
        if(tdList[i].innerText == "c"){
            evalstr = "";
        }else if(tdList[i].innerText == "="){
            if(evalstr.length>0&&Object.is(Number(evalstr.charAt(evalstr.length-1)),NaN)){
                console.log(evalstr.charAt(evalstr.length-1));
                alert("请不要进行错误输入");
                evalstr = "";
            }else{
                evalstr = new String(eval(evalstr));
            }
        }else if((evalstr.length==0||evalstr.length==1)&&(tdList[i].innerText == "+"||tdList[i].innerText == "*"||tdList[i].innerText == "/")&&Object.is(Number(evalstr.charAt(0),NaN))){
            
        }else if((evalstr.length==0&&Object.is(Number(tdList[i].innerText),NaN))||(evalstr.length!=0&&Object.is(Number(evalstr.charAt(evalstr.length-1)),NaN)&&Object.is(Number(tdList[i].innerText),NaN))){
            evalstr = evalstr.substring(0,evalstr.length-1) +tdList[i].innerText;
        }else{
            evalstr += tdList[i].innerText;
        }
        if(evalstr == "Infinity"){
            alert("请不要进行错误输入");
            evalstr = "";
        }
        input.value = evalstr;
    });
};

效果图：

原文地址：https://blog.csdn.net/2301_77523019/article/details/136965421

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！