JS1----用js实现计算器_js中计算器属于哪一个知识点-优快云博客

本文链接：https://blog.youkuaiyun.com/XIAO_YuBaby/article/details/98518461

本文详细介绍了使用HTML、CSS和JavaScript创建计算器的过程，包括布局设计、按钮交互、数字输入及运算逻辑实现。通过实例代码展示了如何处理数字输入、运算符操作、等号计算结果以及清除功能。

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

计算器

一. 计算器的HTML部分

一些零碎的知识点
1.HTML中的知识
①cellpadding=0 cellspacing=0 单元格间距为0
②online=none 去除按钮点击后出现的蓝边框
③colspan 合并列 rowspan合并行（写到td中）
④tr th td
⑤表格本身是没有边框线的，需要自己加border
⑥给文本框中加disabled表示不能输入的
2.js中的补充知识
①

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/计算器.js"></script>               //引入外部js样式
    <style>
        *{
            margin: 0;
            padding: 0;
        }
       table{
            width: 250px;
            height: 360px;
            margin: auto;
        }
        tr td>input{
            width: 250px;
            height:100%;
            font-size: 25px;
            text-align: right;
        }
        td>button{
            width: 100%;
            height: 100%;     /*button 宽和高占td的100%   button占满td*/
            font-size: 25px;
            border: none;
            outline: none;    //去除按钮点击后上边的蓝线
        }
        tr>td{
            border: .5px solid black;
        }
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0">              <!-- 1.去除单元格间距  2.tr td 用table包住-->
    <tr>
        <td colspan="4" >                             <!--******容易出错：合并四个单元格（一个input占四个单元格）-->
            <input type="text" disabled value="0" class="put"/> </td>     //disabled不能输入的
    </tr>
    <tr><td colspan="2"></td>
        <td colspan="2"><button class="btn">del</button></td>
    </tr>
    <tr>
        <td><button class="btn">7</button></td>
         <td><button class="btn">8</button></td>
        <td><button class="btn">9</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">4</button></td>
        <td> <button class="btn">5</button></td>
        <td><button class="btn">6</button></td>
        <td><button class="btn">/</button></td>
    </tr>
    <tr>
        <td><button class="btn">1</button> </td>
        <td><button class="btn">2</button> </td>
        <td><button class="btn">3</button> </td>
        <td><button class="btn">-</button> </td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">+</button></td>
        <td><button class="btn">=</button></td>
    </tr>
</table>
</body>
</html>

计算器静态页面如图

二. 外部js中的内容

在header中写script或从外部引入js，都要写`window.onload` 表示加载完成事件

window.onload=function(){
    这里边是你的js内容
}

`一 . 先解决输入数字问题`

one.一些零碎要点
1.一定要用this指代当前对象
2.put.value指代点击button时input中的对象
3.isNaN()表示括号里边的是字符
two.具体思路
1.当点击button时，在input中输出button中的内容 进行拼接 put.value = put.value + this.innerHTML;
2.只有小数点和数字才可以在input中显示，其他字符无法输出 进行if语句判断(!isNaN(this.innerHTML)) || this.innerHTML=="."
3.输入数值时，0消失（首位不能为0）。输入小数点时，0保留； put.value = this.innerHTML;（这一步是重点）
大体思路：若put.value =0的话，则将button的值赋给put.value后在进行拼接（将0替代）
6.小数点只能出现一次 indexOf(".")== -1 表示小数点没有出现过，若小数点之前出现过，则不执行，不进行拼接

if((!isNaN(this.innerHTML)) || this.innerHTML==".") {
                if (this.innerHTML == ".") {
                    if(put.value.indexOf(".")==-1){
                        put.value = put.value + this.innerHTML;
                    }
                    else{}
                }
                else {       //输入的为数字
                    if (put.value == "0") {
                        put.value = this.innerHTML;
                    }
                    else {
                        put.value = put.value + this.innerHTML;
                    }
                }

`二. 解决计算问题`

① 数组赋值 temp[temp.length] = put.value
② join
操作对象为一批字符串，即字符串数组
想让字符串输出为“h,m,n”的格式
对数组对象来说，相当于把数组转换为字符串
var a = ["l", "m", "n"];
console.log(a.join(",")); //l,m,n
/想让字符串输出为“lmn”的格式join是最好的选择！/
console.log(a.join(" ")); //lmn
③ eval 运算
④substring(0,put.value.length-1); (开始，截取数量)

js中的内容

var temp=[];
var  a;
window.onload=function(){
    var btn = document.getElementsByClassName("btn");
    var put =document.getElementsByClassName("put")[0];

    for(var i=0;i<btn.length;i++){
        btn[i].onclick = function(){
           /* console.log(put.value);*/
            if((!isNaN(this.innerHTML)) || this.innerHTML==".") {
                if(a=="="){   //我输入了数字，且前一个运算符是等号
                    put.value = this.innerHTML;//则要开始新一轮运算，之前的数值没有用，将当前输入的赋值到input中
                    a="";  //将a清空
                }
                else{
                    if (this.innerHTML == ".") {
                        if(put.value.indexOf(".")==-1){
                            put.value = put.value + this.innerHTML;
                        }
                        else{}
                    }
                    else {
                        if (put.value == "0") {
                            put.value = this.innerHTML;
                        }
                        else {
                            put.value = put.value + this.innerHTML;
                        }
                    }
                }

            }
            else{  //输入的为字符  并且  不是小数点
                switch (this.innerHTML){
                    case "+":caculate("+");
                        break;
                    case "-":caculate("-");
                        break;
                    case "*":caculate("*");
                        break;
                    case "/":caculate("/");
                        break;
                    case "=":
                        temp[temp.length]=put.value;//若等号运算完后，输入字符则运算继续，上一轮的运算结果作为下一轮的参与数，输入数字则开始新一轮运算
                        /*console.log(temp);*///输出数组，数组中每个元素是字符串类型
                        put.value=eval(temp.join(""));
                        console.log(temp.join("")); //去除数组中的引号,让数组变成字符串
                        temp=[];
                        a="=";//按等号后将等号储存
                        break;
                    case "c":
                        put.value=0;
                        temp=[];
                        a="c";
                        break;
                    case "del":
                        put.value.length==1?put.value=0:put.value=put.value.substring(0,put.value.length-1);//(开始，截取数量)
                        a="del";   //每个符号都得存储
                        break;
                }
            }
        }
    }
    function caculate(symbol){
        temp[temp.length]=put.value;//****数组赋值写法
        put.value=0;
        temp[temp.length]=symbol;//将运算符也存入数组中
        /*console.log(temp);*/
        a=symbol;   //用a储存当前点击的符号
    }
}
//若输入符号，则保留put.value     正常程序
//若输入的是数字，则将输入等号后的input等于当前输入的this.inner(按只有一个等号时我们已经将数组清空了，只有一个得数)