JS簡易計算器的實現，以及代碼的優化

-Advertisement-

用JS實現簡易計算器首先創建結構和樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...

用JS實現簡易計算器

首先創建結構和樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+">
            <input type="button" value="-">
            <input type="button" value="*">
            <input type="button" value="/">
        </p>            
    </div>
<script>


</script>

</body>
</html>

添加javascript功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn">
            <input type="button" value="-" class="btn">
            <input type="button" value="*" class="btn">
            <input type="button" value="/" class="btn">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    btns[0].onclick=add;
    btns[1].onclick=subtract;
    btns[2].onclick=multiply;
    btns[3].onclick=divide;

    function add(){
        sign.innerHTML="+";
        //由於DOM獲取到的值都是字元串形式，因此進行操作時需要先轉為number類型
        res.innerHTML=Number(num1.value)+Number(num2.value);
    }
    function subtract(){
        sign.innerHTML="-";
        res.innerHTML=Number(num1.value)-Number(num2.value);
    }
    function multiply(){
        sign.innerHTML="*";
        res.innerHTML=Number(num1.value)*Number(num2.value);    
    }
    function divide(){
        sign.innerHTML="/";
        res.innerHTML=Number(num1.value)/Number(num2.value);    
    }
</script>

</body>
</html>

代碼的優化：

迴圈實現綁定

給一個外部介面，用於新增運算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background-color: #abcdef;
        }
        .cal{
            width:560px;
            height:100px;
            margin:0 auto;
            padding-top:300px;
        }
    </style>
</head>
<body>

    <div class="cal">
        <p>
            <input type="text" class="num1" value="1">
            <span class="sign">+</span>
            <input type="text" class="num2" value="1">
            <span>=</span>
            <span class="res">2</span>
        </p>
        <p>
            <input type="button" value="+" class="btn" title="add">
            <input type="button" value="-" class="btn" title="subtract">
            <input type="button" value="*" class="btn" title="multiply">
            <input type="button" value="/" class="btn" title="divide">
            <input type="button" value="%" class="btn" title="mod">
        </p>            
    </div>

<script>
    var cal=document.querySelector(".cal");
    var num1=cal.querySelector(".num1");
    var num2=cal.querySelector(".num2");
    var sign=cal.querySelector(".sign");
    var res=cal.querySelector(".res");

    var btns=cal.querySelectorAll(".btn");

    //給每個按鈕綁定事件
    for(var i=0;i<btns.length;i++){
        operate(i);
    }

    //運算函數
    function operate(i){
        var op=btns[i].value;//獲取運算
        var opName=btns[i].title;//獲取運算名
        //綁定事件
        btns[i].onclick=function(){
            sign.innerHTML=op;
            res.innerHTML=operation[opName](Number(num1.value),Number(num2.value));
        }
    }

    var operation={
        add:function(n1,n2){
            return n1+n2;
        },
        subtract:function(n1,n2){
            return n1-n2;
        },
        multiply:function(n1,n2){
            return n1*n2;
        },
        divide:function(n1,n2){
            return n1/n2;
        },
        //給一個新增運算的介面
        addOperation:function(name,fn){
            //如果該運算不存在
            if(!this.name){
                this[name]=fn;
            }
        }
    }

    //新增取餘運算
    operation.addOperation("mod",function(n1,n2){
        return n1%n2;
    });
</script>

</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

異常 lock buffer failed for format 0x23

02-11 21:21:45.669625 14804 14815 W Monkey : // java.lang.RuntimeException: lock buffer failed for format 0x23 02-11 21:21:45.669625 14804 14815 W Mon ...
Flutter開發之常用Widget

一、Text 組件屬性 textAlign: TextAlign.left, 文本對齊方式 maxLines: 1, 顯示最大行 overflow: TextOverflow.clip, 文本溢出的處理方式 clip：直接切斷溢出的文字。 ellipsis:在後邊顯示省略號（...）常用 fad ...
JS的基本概念和數據類型

什麼是 JavaScript 語言 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE JavaScript 是一種輕量級的腳本語言。所謂“腳本語言”，指的是它不具備開發操作系統的能力，而是只用來編寫控制其他大型應用程式（比如瀏覽器）的“腳 ...
HTML塊級、行級元素，特殊字元，嵌套規則

如果介紹HTML網頁基本標簽的嵌套規則，首先要說的就是元素的分類。元素可以劃分為塊級元素和行級元素，塊級元素是什麼？它可以獨占一行，可以設置寬高度，預設是100%；行級元素與之相反，它的內容決定它的寬高度，至於特殊字元就當成是文字來看！嵌套規則總結如下幾點：1.塊元素可以嵌套行元素2.行元素可以嵌套... ...
網頁DIV+CSS佈局與ifame傳統佈局對比

什麼是網頁的佈局？網頁佈局就是我們在拿到設計稿後進行切片處理（所謂切圖），然後我們通過DIV+CSS佈局，書寫靜態頁面按照設計稿還原排列，把我們想要實現的功能與內容進行填充！早期的frameset佈局主要書寫管理後臺控制菜單的切換實現局部的刷新，至於頁面的嵌套則是通過iframe ...
Electron+Vue – 基礎學習(1): 創建項目

Electron 和 Vue 都是幹啥的，就不做過多介紹了，可以去官網瞅瞅。下麵總結 Electron+Vue 創建項目，Electron + Vue 創建項目實際上相當於：創建Vue項目 + Electron封裝。一、創建Vue項目 + Electron封裝 1、創建Vue項目通過 Vue腳手 ...
JS 重載父頁面

<script language=javascript> window.onload=function(){ //刷新父頁面 window.opener.location.reload(); } </script> 相關連接 JS 彈出小視窗 ...
面向對象+閉包+三種對象的聲明方式（字面式、new Object、構造函數、工廠模式、原型模式、混合模式）

面向對象：對代碼的一種抽象，對外統一提供調用介面的編程思想對象的屬性：事物自身擁有的東西對象的方法：事物的功能對象：事物的一個實例對象的原型：.prototype -> 記憶體地址 -> 存儲了一個對象 function fn(){ return 1; } alert(fn.prototyp ...