【无标题】

最新推荐文章于 2024-07-11 17:28:05 发布

South Street

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量112

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_46471694/article/details/121771381

版权

html和css代码是我自己补充的，不知道对不对，求大佬帮帮我
这个链接是全部文件和代码
https://download.csdn.net/download/weixin_46471694/57801937

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>calculator</title>
    <link rel="stylesheet" type="text/css" href="index.css">		<!--第（1）空-->
    <script type="text/javascript" charset="utf-8" src="index.js"></script>
</head>
<body	<!--第（2）空-->
    <div class="calculator">
        <ul class="output" value="0" id="iputNum" disabled="disabled"></ul>	<!--第（3）空-->
        <div class="numbers">
            <input type="(text)" value="7" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="8" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="9" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="4" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="5" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="6" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="1" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="2" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="3" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="0" onclick="numberClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="AC" onclick="cleanClick(value)">		<!--第（3）空和第（4）空-->
            <input type="(text)" value="=" onclick="equalClick()">			<!--第（3）空和第（4）空-->
        </div>
        <div class="operators">
            <input type="(text)" value="*" onclick="operatorClick(value)">	<!--第（3）空和第（4）空-->
            <input type="(text)" value="-" onclick="operatorClick(value)">	<!--第（3）空和第（4）空-->
            <input type="(text)" value="+" onclick="operatorClick(value)">	<!--第（3）空和第（4）空-->
            <input type="(text)" value="/" onclick="operatorClick('/')">		<!--第（3）空和第（4）空-->
        </div>
    </div>
</body>	<!--第（2）空-->
</html>

css代码

.calculator {
    width: 405px;
    border: solid 1px;
    background: #ffefd5;
    margin: 50px;
    padding: 20px;
}

.output {
    width: 356px;
    padding: 20px;
    height: 50px;
    font-size: 20px;
    text-align: right;
    background: white;
}

.numbers {
    width: 300px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
input[type=(text)] {		/* 第（5）空 */
    border: solid 1px white;
    width: 100px;
    height: 80px;
    background: grey;
    cursor: pointer;
    color: white;
    font-size: 30px;
}
.operators {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100px;
    -ms-flex-wrap: wrap;		/* 第（6）空 */
    flex-wrap: wrap;
    position: relative;
    left: -3px;
}

js代码求补全

class calculator {

    constructor(value = null) {
        //分割算术数组
        this.number = value;
        this.result = 0;
    }

    compute() {
        this.result = Array.from(this.number);
        for (let index = 0; index < this.result.(7); index++) {		//第（7）空
            //计算乘除
            if (this.result[index] == "*" || this.result[index] == "/") {
                //若最后输入的字符为运算字符，默认在最后加上1
                if (this.result[index + 1] == "") {
                    this.result[index + 1] = 1;
                }
                if (this.result[index] == "*") {
                    //删除数组内已计算的数字，并添加计算后的数字
                    this.result.splice(+index - 1, 3, +this.result[index - 1] * +this.result[index + 1]);
                } else if (this.result[index] == "/") {
                    //删除数组内已计算的数字，并添加计算后的数字
                    this.result.splice(+index - 1, 3, +this.result[index - 1] / +this.result[index + 1]);
                }
                index--;
            }
            //计算加减
            if (this.result[index] == "+" || this.result[index] == "-") {
                if (this.result[index] == "+") {
                    //删除数组内已计算的数字，并添加计算后的数字
                    this.result.splice(+index - 1, 3, +this.result[index - 1] + +this.result[index + 1]);
                } else if (this.result[index] == "-") {
                    //删除数组内已计算的数字，并添加计算后的数字
                    this.result.splice(+index - 1, 3, +this.result[index - 1] - +this.result[index + 1]);
                }
                index--;
            }
        }
    }
}

/* 添加方法 */
Object.assign(calculator.prototype, {
    back() {
        return this.result;
    }
})
/* 获得输入框的值 */
const get = () => {
    return document.(8)("iputNum").(9);		// 第（8）空和第（9）空
}
/* 给输入框赋值 */
const set = (value) => {
    document.(8)("iputNum").(9) = value;	// 第（8）空和第（9）空
}

/* 输入数字 */
function numberClick(value) {
    let val = get();
    //显示框为0时，输入0无效
    if (value == "0" && val == "0") {
        return;
    }
    if (val == "0") {
        //计算结果为0时，删除0
        set(value);
    } else {
        //在显示框显示对应字符
        set(val + value);
    }
}

/* 输入字符 */
function operatorClick(value) {
    let val = get();
    //不可连续输入运算字符
    if (val[val.length - 1] == " ") {
        return;
    }
    //在显示框显示对应字符
    set(val + " " + value + " ");
}

/* 清空数据 */
function cleanClick() {
    set("0");
}

/* 计算 */
function equalClick() {
    if (get() == "") {
        return;
    } else {
        let cal = new calculator();
		// 字符串分割成数组
        cal.number = get().(10)(' ');	// 第（10）空
        cal.compute();
        set(Number.parseInt(cal.back()));
    }
}

South Street

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】

html和css代码是我自己补充的，不知道对不对，求大佬帮帮我这个链接是全部文件和代码https://download.csdn.net/download/weixin_46471694/57801937<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>calculator</title> <link rel="styleshee
复制链接

扫一扫

【无标题】

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