用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，打开蓝牙并链接其余蓝牙设备进行通信。函数