【JavaScript项目】如何用JavaScript实现 计算器?(附完整源码)

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值