JS实现简易计算器

最新推荐文章于 2023-10-28 10:24:05 发布

佩淇呢

最新推荐文章于 2023-10-28 10:24:05 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_67880202/article/details/128549904

版权

javascript 专栏收录该内容

12 篇文章

订阅专栏

该文章展示了一个使用HTML和JavaScript编写的简单计算器的示例。通过行内事件绑定，实现了数字和运算符的显示、计算功能。关键函数包括showNum用于显示数值，result执行eval()进行计算，Clear清空输入，以及back删除最后一个字符。文章提到了行内绑定的维护问题，并介绍了eval()方法的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

HTML部分：

<div class="calculator">
    <div class="result">
        <input class="AC" type="button" value="AC" onclick="Clear()">
        <input type="text" value="" class="printf" id="printf" style="text-align: end">
    </div>
    <div class="content">
        <ul class="Ul">
            <li>
                <button type="button" onclick="showNum(this.innerText)">0</button>
                <button type="button" onclick="back()" style="background: #C2C973">C</button>
                <button type="button" onclick="showNum(this.innerText)" style="background: #C2C973">/</button>
                <button type="button" onclick="result()" style="background: #C2C973">=</button>
            </li>
            <li>
                <button type="button" onclick="showNum(this.innerText)">1</button>
                <button type="button" onclick="showNum(this.innerText)">2</button>
                <button type="button" onclick="showNum(this.innerText)">3</button>
                <button type="button" onclick="showNum(this.innerText)" style="background: #C2C973">+</button>
            </li>
            <li>
                <button type="button" onclick="showNum(this.innerText)">4</button>
                <button type="button" onclick="showNum(this.innerText)">5</button>
                <button type="button" onclick="showNum(this.innerText)">6</button>
                <button type="button" onclick="showNum(this.innerText)" style="background: #C2C973">-</button>
            </li>
            <li>
                <button type="button" onclick="showNum(this.innerText)">7</button>
                <button type="button" onclick="showNum(this.innerText)">8</button>
                <button type="button" onclick="showNum(this.innerText)">9</button>
                <button type="button" onclick="showNum(this.innerText)" style="background: #C2C973">*</button>
            </li>
        </ul>
    </div>
</div>

JS部分

由于事件的绑定为行内绑定，所以在js里面直接写相应的函数。因为只是做一个小案例所以采用了这样的写法，如果是用来写一些项目不太建议用行内绑定，行内绑定不太利于代码的维护。

实现的核心思路为：

（1）将点击的数字和符号的值渲染到我们的输入框中

（2）将输入框中的得到的值通过eval()方法来进行计算

什么是eval()方法?

eval() 的参数是一个字符串，如果字符串表示的是表达式，eval() 会对表达式进行求值。

（3）计算器的清空操作，直接将值设为空

（4）计算器的倒退按钮，通过slice()方法截取所需要的的元素

slice(begin，end) 截取包括 begin，不包括end，返回一个新的数组对象，原始数组不会被改变。

var printf=document.getElementById("printf");
 function showNum(e){
     printf.value+=e;
 }
 function result(){
     printf.value=eval(printf.value);
 }
 function Clear(){
     printf.value="";
 }
 function back(){
     printf.value=printf.value.slice(0,printf.value.length-1);//slice里的值指的是索引，包含开始值，不包含结束值
 }