用HTML和JS來開發移動app - 計算器app功能實現

時間 2019-12-08

標籤 html 開發移動 app 計算器功能實現欄目 HTML 简体版

原文原文鏈接

今天開始構思第一個有實際功能的手機app - 計算器。在功能上很是簡單，支持0-9輸入和加減乘除等於運算，能夠清零。javascript

在程序邏輯結構上，跟嵌入式代碼基本沒差異：css

對0-9按鈕定義一個數字功能：實現對輸入的數值更新並保存到一個變量
對功能鍵定義一個操做功能：根據不一樣操做對輸入變量進行操做
對UI顯示定義一個刷新函數：每次按鍵操做後刷新一次UI

簡單看了下button的，使用onclick就能夠直接檢測按鈕按下並調用一個函數了，果真比之前搞硬件簡單多了T.T 神馬鍵值掃描啊神馬中斷觸發啊神馬防抖啊都不用考慮的...html

在不考慮UI就考慮功能基礎上，下面代碼就實現了一個簡單的計算器功能：比較簡單就都丟到index.html文件裏了，沒有到js文件中寫控制邏輯。java

<body>
    <div>
        <div>
            <p id="total">0</p>
        </div>
        <div>
            <p id="symbol"> NULL </p>
        </div>
        <div>
            <p id="value">0</p>
        </div>


    <div>
    <button onclick="NumFun(1)">1</button>
    <button onclick="NumFun(2)">2</button>
    <button onclick="NumFun(3)">3</button>
    <button onclick="NumSym(1)">+</button>
    <br>
    <button onclick="NumFun(4)">4</button>
    <button onclick="NumFun(5)">5</button>
    <button onclick="NumFun(6)">6</button>
    <button onclick="NumSym(2)">-</button>
    <br>
    <button onclick="NumFun(7)">7</button>
    <button onclick="NumFun(8)">8</button>
    <button onclick="NumFun(9)">9</button>
    <button onclick="NumSym(3)">x</button>
    <br>
    <button onclick="NumFun(0)">0</button>
    <button onclick="NumClean()">C</button>
    <button onclick="NumSym(symbol)">=</button>
    <button onclick="NumSym(4)">/</button>
    </div>
    <script>
        var value = 0
        var total = 0
        var symbol = 0
        function NumFun(Key)
        {
            value=value*10+Key
            updateUI()

        }
        function NumClean()
        {
            value = 0
            total = 0
            updateUI()

        }
        function NumSym(sym)
        {
            switch (sym)
            {
                case 1:
                        symbol=1
                        total=total+value
                        value=0
                        updateUI()
                    break
                case 2:
                    symbol=2
                    total=total-value
                    value=0
                    updateUI()
                    break
                case 3:
                    symbol=3
                    //total=total*value
                    //if (value)
                    //{
                        if (total)
                        {total=total*value}
                        else
                        {total=value}
                    //}
                    value=0
                    updateUI()
                    break
                case 4:
                    symbol=4
                    //total=total/value
                    if (value)
                    {
                        if (total)
                        {total=total/value}
                        else
                        {total=value}
                    }
                    value=0
                    updateUI()
                    break

                default:
                    break
            }
        }


        function updateUI()
        {
            document.getElementById("total").innerHTML=total
            document.getElementById("value").innerHTML=value
            switch (symbol)
            {
                case 1:
                    document.getElementById("symbol").innerHTML="+"
                    break
                case 2:
                    document.getElementById("symbol").innerHTML="-"
                    break
                case 3:
                    document.getElementById("symbol").innerHTML="x"
                    break
                case 4:
                    document.getElementById("symbol").innerHTML="/"
                    break
                default :
                    break
            }

        }


    </script>
    <!--script type="text/javascript" src="cordova.js"></script-->
    <!--script type="text/javascript" src="js/index.js"></script-->

</body>

開始沒注意乘法和除法的運算，致使當value是0時會出錯.. 將android

total=total/value

改成了api

if (value)
  {
   if (total)
   {total=total/value}
   else
   {total=value}
  }

在頁面上測試後沒問題，簡單一個命令app

run cordova android

運行成功後會提示：

打開手機app，試了一下，雖然界面簡陋，可是至少在手機上把一個有功能的app跑起來了！剩下的內容是優化界面... 無奈對html和css真不熟，一個個標籤一個個參數去看狠廢時間... 求達人10分鐘幫我排個版面吧！！本身來作花一個下午一個晚上的真心懶得弄。

到如今已經能夠從0起步，經過cordova 完成一個有實際功能的app的開發了。不過細心的人也會發現，到如今爲止咱們還沒調用 cordova 提供的任何關於android的api！徹底都是使用html和js自己的功能來實現的 ~ 下一步，就是開始學習瞭解cordova的android api，打開藍牙並鏈接其餘藍牙設備進行通信。函數