ES5计算器小案例

爱学习的前端歌谣

发布于 2023-11-11 20:49:47

1260

发布于 2023-11-11 20:49:47

文章被收录于专栏：前端小歌谣前端小歌谣

前言

我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是ES5计算器小案例的深入讲解

环境配置

npm init -y
yarn add vite -D

修改page.json配置端口

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算小案例</title>
</head>
<body>
    <div class="calculator J_calculater">
        <p>结果:<span class="result">0</span></p>
        <div class="input_wrap">
            <input type="text" value="0" placeholder="第一个数字"/>
            <input type="text" value="0" placeholder="第二个数字"/>
        </div>
        <div class="btn-group">
            <button data-method="plus">+</button>
            <button data-method="minus">-</button>
            <button data-method="mul">*</button>
            <button data-method="div">/</button>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

index.js

var oCalculator = document.getElementsByClassName("J_calculater")[0]
oResult = oCalculator.getElementsByClassName("result")[0]
fInput = oCalculator.getElementsByTagName("input")[0]
sInput = oCalculator.getElementsByTagName("input")[1]
oBtnGroup = oCalculator.getElementsByClassName("btn-group")[0]
oBtnGroup.addEventListener("click", oBtnClick, false)
function oBtnClick(ev) {
    var e = ev || window.event,
        tar = e.target || e.srcElement,
        tagName = tar.tagName.toLowerCase();
    if (tagName === "button") {
        var method = tar.getAttribute('data-method')
        fval=Number(fInput.value.replace(/\s+/g,''))||0,
        sval=Number(sInput.value.replace(/\s+/g,''))||0,
        console.log(method)
        switch (method) {
            case 'plus':
                oResult.innerText=fval+sval
                break;
            case 'minus':
                oResult.innerText=fval-sval
                break;
            case 'mul':
                oResult.innerText=fval*sval
                break;
            case 'div':
                oResult.innerText=fval/sval
                break;
            default:
                break
        }
    }
}

运行结果

js逻辑变化1

; (function () {
    var oCalculator = document.getElementsByClassName("J_calculater")[0]
    oResult = oCalculator.getElementsByClassName("result")[0]
    fInput = oCalculator.getElementsByTagName("input")[0]
    sInput = oCalculator.getElementsByTagName("input")[1]
    oBtnGroup = oCalculator.getElementsByClassName("btn-group")[0]
    var init=function(){
        bindEvent()
    }
    init()
    function bindEvent(){
        oBtnGroup.addEventListener("click", oBtnClick, false)
    }
    function oBtnClick(ev) {
        var e = ev || window.event,
            tar = e.target || e.srcElement,
            tagName = tar.tagName.toLowerCase();
        if (tagName === "button") {
            var method = tar.getAttribute('data-method')
            fval = Number(fInput.value.replace(/\s+/g, '')) || 0,
                sval = Number(sInput.value.replace(/\s+/g, '')) || 0,
                console.log(method)
            switch (method) {
                case 'plus':
                    oResult.innerText = fval + sval
                    break;
                case 'minus':
                    oResult.innerText = fval - sval
                    break;
                case 'mul':
                    oResult.innerText = fval * sval
                    break;
                case 'div':
                    oResult.innerText = fval / sval
                    break;
                default:
                    break
            }
        }
    }
})()

运行结果

js逻辑变化2

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算小案例</title>
</head>
<body>
    <div class="calculator J_calculater">
        <p>结果:<span class="result">0</span></p>
        <div class="input_wrap">
            <input type="text" value="0" placeholder="第一个数字"/>
            <input type="text" value="0" placeholder="第二个数字"/>
        </div>
        <div class="btn-group">
            <button data-method="plus">+</button>
            <button data-method="minus">-</button>
            <button data-method="mul">*</button>
            <button data-method="div">/</button>
        </div>
    </div>
    <script src="./tools.js"></script>
    <script src="./compute.js"></script>
    <script src="./index2.js"></script>
</body>
</html>

computed.js

var compute=(function(){
    function plus(a,b){
        return a+b
    }
    function minus(a,b){
        return a-b
    }
    function mul(a,b){
        return a*b
    }
    function div(a,b){
        return a/b
    }
    return {
        plus:plus,
        minus:minus,
        mul:mul,
        div:div
    }
})()

tools.js

var tools=(function(){
    function digitalize(str){
        return Number(str.replace(/\s+/g, ''))||0
    }
    function getTarget(ev){
        var e = ev || window.event;
        return e.target || e.srcElement
    }
    return {
        digitalize:digitalize,
        getTarget:getTarget
    }
})()

index2.js

; (function (doc,tools,compute) {
    var oCalculator = document.getElementsByClassName("J_calculater")[0]
    oResult = oCalculator.getElementsByClassName("result")[0]
    fInput = oCalculator.getElementsByTagName("input")[0]
    sInput = oCalculator.getElementsByTagName("input")[1]
    oBtnGroup = oCalculator.getElementsByClassName("btn-group")[0]
    var init=function(){
        bindEvent()
    }
    init()
    function bindEvent(){
        oBtnGroup.addEventListener("click", oBtnClick, false)
    }
    function oBtnClick(ev) {
       
           var tar = tools.getTarget(ev)
            tagName = tar.tagName.toLowerCase();
        if (tagName === "button") {
            var method = tar.getAttribute('data-method')
            fval = tools.digitalize(fInput.value)
                sval = tools.digitalize(sInput.value)
                console.log(method)
                renderResult(compute[method](fval,sval))
          
        }
    }
 
    function renderResult(result){
        oResult.innerText=result
    }
})(document,tools,compute)

运行结果