HTML CSS JS学习笔记之实现网页计算器1

最新推荐文章于 2024-09-12 18:02:32 发布

LuclfermorningStar

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量153

点赞数 1

分类专栏：学习笔记文章标签： html css js javascript

本文链接：https://blog.csdn.net/weixin_43810186/article/details/119034822

版权

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

随手笔记

新手第一次发表文章
记录学习三大前端技术过程中，三种不同js版本的网页版计算器
从只使用js函数到使用jQuery到改进jQuery代码
实现功能：

加、减、乘、除、数字、退格、清除、等号运算
小数点以及保留小数点后六位并可以进行四舍五入
其余按钮功能暂未实现

css样式代码：

/*三种js版本计算器的共享样式*/
table{
    width: 350px;
    margin: auto;
    border: 1px solid;
    text-align: center;
    border-spacing: 0px;
}
table td{
    width: 87px;
    height: 80px;
    border: 1px solid;
}
tr button{
    width: 100%;
    height: 100%;
    background-color: rgb(195,197,196);
    font-size: 25px;
}
.showScreen{
    width: 100%;
    height: 90px;
}
.showScreen input{
    width: 100%;
    height: 120px;
    border: 0px;
    background-color: black;
    color: white;
    font-size: 50px;
    text-align: right;
}
.tr_bg{
    background-color: rgb(195,197,196);
}
.fc{
    color: rgb(237,142,50);
}
#ebg{
    background-color: rgb(237,142,50);
    color: white;
}

第一个版本的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calculator</title>
    <link rel="stylesheet" type="text/css" href="../css/calculator.css">
</head>
<body>
    <table cellpadding="0">
        <tr class="showScreen">
            <td colspan="4">
                <input id="showScreen" disabled="disabled" value="0">
            </td>
        </tr>
        <tr class="tr_bg">
            <td><button>mc</button></td>
            <td><button>m+</button></td>
            <td><button>m-</button></td>
            <td><button>mr</button></td>
        </tr>
        <tr class="tr_bg">
            <td><button id="AC" class="fc" onclick="empty()">AC</button></td>
            <td><button class="fc" onclick="backspace()">⬅</button></td>
            <td><button>+/-</button></td>
            <td><button onclick="clickSymbol('/')">/</button></td>
        </tr>
        <tr class="tr_bg">
            <td><button onclick="clickNum('7')">7</button></td>
            <td><button onclick="clickNum('8')">8</button></td>
            <td><button onclick="clickNum('9')">9</button></td>
            <td><button onclick="clickSymbol('X')">X</button></td>
        </tr>
        <tr class="tr_bg">
            <td><button onclick="clickNum('4')">4</button></td>
            <td><button onclick="clickNum('5')">5</button></td>
            <td><button onclick="clickNum('6')">6</button></td>
            <td><button onclick="clickSymbol('-')">-</button></td>
        </tr>
        <tr class="tr_bg">
            <td><button onclick="clickNum('1')">1</button></td>
            <td><button onclick="clickNum('2')">2</button></td>
            <td><button onclick="clickNum('3')">3</button></td>
            <td><button onclick="clickSymbol('+')">+</button></td>
        </tr>
        <tr class="tr_bg">
            <td colspan="2"><button onclick="clickNum('0')">0</button></td>
            <td><button onclick="clickSymbol('.')">.</button></td>
            <td><button id="ebg" onclick="equals()">=</button></td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="../js/calculator.js"></script>
</html>

对应JS文件：

let bSymbol = "";
let aSymbol = "";
let symbol = "";
let result = 0;
let showScreen = document.getElementById("showScreen");
let AC = document.getElementById("AC");
function clickNum(num) {
    //点击数字时调用
    AC.innerHTML = "C";
    if (""==symbol) {
        bSymbol = bSymbol + num;
    } else {
        aSymbol = aSymbol + num;
    }
    //显示屏幕信息
    showScreen.value = bSymbol + symbol +aSymbol;
}

function clickSymbol(sym) {
    //点击符号调用
    if ("."==sym) {
        if (""==symbol) {
            //查找字符串是否包含子字符串 "."
            let index = bSymbol.search("\\.");
            if (index==-1) {
                //可以加小数点
                if (bSymbol.length==0) {
                    bSymbol = "0.";
                } else {
                    bSymbol = bSymbol + ".";
                }
            }
        } else {
            //查找字符串是否包含子字符串 "."
            let index = aSymbol.search("\\.");
            if (index==-1) {
                //可以加小数点
                if (aSymbol.length==0) {
                    aSymbol = "0.";
                } else {
                    aSymbol = aSymbol + ".";
                }
            }
        }
    } else if (symbol.length==0){
        symbol = sym;
    }
    //显示屏幕信息
    showScreen.value = bSymbol + symbol +aSymbol;
}

function equals() {
    //点击等号调用
    let x = "";
    let y = "";
    if (bSymbol.search("\\.")!=-1 || aSymbol.search("\\.")!=-1) {
        x = parseFloat(bSymbol);
        y = parseFloat(aSymbol);
    } else {
        x = parseInt(bSymbol);
        y = parseInt(aSymbol);
    }
    if (symbol=="+") {
        result = x + y;
    } else if (symbol=="-") {
        result = x - y;
    } else if (symbol=="X") {
        result = x * y;
    } else if (symbol=="/") {
        result = x / y;
    }
    //小数点保留6位
    result = result + "";
    let index = result.search("\\.");
    if (index!=-1) {
        let rLength = result.length-index-1;
        if (rLength>6) {
            //四舍五入
            let lp = result.charAt(index+7);
            if (lp>=5) {
                //截取
                let blp = parseInt(result.charAt(index+6))+1;
                result = result.substring(0,index+6)+blp;
            } else {
                result = result.substring(0,index+7);
            }
        }
    }
    bSymbol = result+"";
    //清空变量
    aSymbol = "";
    symbol = "";
    //显示屏幕信息
    showScreen.value = result;
}

function empty() {
    //点击AC进行清屏
    AC.innerHTML = "AC";
    bSymbol = "";
    aSymbol = "";
    symbol = "";
    showScreen.value = 0;
}

function backspace() {
    //点击⬅删除一位数字/符号
    if (aSymbol.length>0) {
        aSymbol = aSymbol.substring(0,aSymbol.length-1);
    } else if (symbol.length>0) {
        symbol = symbol.substring(0,symbol.length-1);
    } else if (bSymbol.length>0) {
        bSymbol = bSymbol.substring(0,bSymbol.length-1);
    }
    //显示屏幕信息
    showScreen.value = bSymbol + symbol +aSymbol;
}