【JavaScript项目】如何用JavaScript实现计算器？（附完整源码）

最新推荐文章于 2024-05-11 11:39:26 发布

芝士矿柴

最新推荐文章于 2024-05-11 11:39:26 发布

阅读量4.1k

点赞数 17

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/tutu6663/article/details/134742346

版权

1.最终效果展示

2.实现的功能有那些？

实现了如上图所示的一般计算器的功能包括

（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）

（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思

（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果

（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深

3.代码展示

一共有三份，html，css，javaScript各一份

链接：https://pan.baidu.com/s/1c-8_9y7oKMO6U-p27dhCww
提取码：1234

在index.html中代码如下

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/index.css">
        <title>计算器</title>
</head>
<body>
        <h1 style="text-align:center">计算器</h1>
        <!--计算器的按键和结果显示是以table表格为框架搭建的-->
        <table id="mytable">
                <tr>
                <!--用colspan属性将四列合并为一列-->
                <td id="result" colspan="4">
                </td>
                </tr>
                <tr>
                <td class="buttons" id="clearAll" onclick="clearAll()" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">清空</td>
                <td class="buttons" id="backSpace" onclick="backSpace()" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">退格</td>
                <td class="buttons" id="buttons9" onclick="pluMinChange()" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">+/-</td>
                <td class="buttons" id="divide" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">/</td>
                </tr>
                <tr>
                <td class="buttons" id="buttons7" onclick="addNumChar(this)" mouseover="console.log(1)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">7</td>
                <td class="buttons" id="buttons8" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">8</td>
                <td class="buttons" id="buttons9" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">9</td>
                <td class="buttons" id="multiply" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">*</td>
                </tr>
                <tr>
                <td class="buttons" id="buttons4" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">4</td>
                <td class="buttons" id="buttons5" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">5</td>
                <td class="buttons" id="buttons6" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">6</td>
                <td class="buttons" id="minus" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">-</td>
                </tr>
                <tr>
                <td class="buttons" id="buttons1" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">1</td>
                <td class="buttons" id="buttons2" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">2</td>
                <td class="buttons" id="buttons3" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">3</td>
                <td class="buttons" id="plus" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">+</td>
                </tr>
                <tr>
                <td class="buttons" id="percent" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">%</td>
                <td class="buttons" id="buttons0" onclick="addNumChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">0</td>
                <td class="buttons" id="point" onclick="addOperationChar(this)" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">.</td>
                <td class="buttons" id="equal" onclick="solveOut()" onmouseover="this.style.backgroundColor='#9ECED8'" onmouseout="this.style.backgroundColor='#ffffff'">=</td>
                </tr>
        </table>
        <script src="./js/index.js"></script>
</body>
</html>

index.css中的代码

/*表格样式设置*/
table{
        border: 2px solid cornflowerblue;/*必须要同时设置边框的粗细，虚实和颜色，不然无法显示出来*/
        margin:100px auto;
        border-radius:7px;/*把边框的角设为有一定弧度的圆角*/
        border-collapse:separate;/*separate表示单元格的边框分开显示，如果时collapse则表示单元格边框合并为一个单一的边框，这也是默认设置*/
        border-spacing:10px;/*设置单元格之间的间隔，有间隔看起来不会太拥挤*/
}
/*结果单元格样式设置*/
#result{
        width:300px;
        height:60px;
        border:1px solid cornflowerblue;
        text-align:right;/*计算结果的文本是右对齐的*/
        padding:10px;/*设置内边距*/
        font-size:20px;
}
/*作为按钮的单元格样式设置*/
.buttons{
        width:100px;
        height:50px;
        border:1px solid cornflowerblue;
        text-align:center;
        border-radius:7px;
}

index.js中的代码：

let table=document.querySelector("#mytable")//获取表格元素

let resultStr=table.rows[0].cells[0]//获取表格的第一个单元格，就是我们需要显示计算结果的单元格
//如果想在javaScript中获取触发了onclick时间的元素，可以使用this关键词

//添加字符(数字)
function addNumChar(element){
        resultStr.innerText+=element.innerText
}

//添加运算符
function addOperationChar(element){
        let lastchar=resultStr.innerHTML.charAt(resultStr.innerHTML.length-1)//获取结果字符串最后一个字符
        if(lastchar=="+" || lastchar=="-" || lastchar=="*" || lastchar=="/" || lastchar=="%"){//运算符不能一次重复使用
                if(element.innerText!="."){//运算符后面不能接小数点
                resultStr.innerText=resultStr.innerText.replace(lastchar,element.innerText,resultStr.innerHTML.length-1)//把最后一个字符替换为当前所切换的运算符
                }
        }else if(lastchar=="."&&element.innerText=="."){
                //小数点不能有多个，所以当最后一个字符为小数点当前字符还是小数点，则什么操作也不做，但小数点后面可以添加运算符        }else{
                resultStr.innerText+=element.innerText
        }
}

//清空
function clearAll(){
        resultStr.innerText=""

}
//退格
function backSpace(){
        let lastchar=resultStr.innerText.charAt(resultStr.innerHTML.length-1)//获取最后一个字符
        resultStr.innerText=resultStr.innerText.replace(lastchar,"",resultStr.innerHTML.length-1)
}
//改变正负号
function pluMinChange(){
        //函数Number用于把其他类型值转为数字，但当其中不是数字时比如式子时，会返回NaN，而函数isNaN()用来判断是否为NaN
        if(!isNaN(Number(resultStr.innerText))){
        resultStr.innerText=-Number(resultStr.innerText)
        }

}
//求计算式的值，并更新结果区
function solveOut(){
        resultStr.innerText=eval(resultStr.innerText)//函数eval()可以计算字符串中的表达式
        if(isNaN(Number(resultStr.innerText))){resultStr.innerText="错误"}
}

芝士矿柴

关注

17
点赞
踩
26

收藏

觉得还不错? 一键收藏
3
评论
【JavaScript项目】如何用JavaScript实现计算器？（附完整源码）

实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
复制链接

扫一扫