javascript - 用HTML和JS来开发移动app - 计算器app功能实现 - FreeZinG

今天开始构思第一个有实际功能的手机app - 计算器。在功能上非常简单，支持0-9输入和加减乘除等于运算，可以清零。

在程序逻辑结构上，跟嵌入式代码基本没差别：

对0-9按钮定义一个数字功能：实现对输入的数值更新并保存到一个变量
对功能键定义一个操作功能：根据不同操作对输入变量进行操作
对UI显示定义一个刷新函数：每次按键操作后刷新一次UI

简单看了下button的，使用onclick就可以直接检测按钮按下并调用一个函数了，果然比以前搞硬件简单多了T.T 神马键值扫描啊神马中断触发啊神马防抖啊都不用考虑的...

在不考虑UI就考虑功能基础上，下面代码就实现了一个简单的计算器功能：比较简单就都丢到index.html文件里了，没有到js文件中写控制逻辑。

 <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时会出错.. 将

total=total/value

改为了

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

在页面上测试后没问题，简单一个命令

  run cordova android

运行成功后会提示：
命令行窗口
打开手机app，试了一下，虽然界面简陋，但是至少在手机上把一个有功能的app跑起来了！剩下的内容是优化界面... 无奈对html和css真不熟，一个个标签一个个参数去看狠废时间... 求达人10分钟帮我排个版面吧！！自己来做花一个下午一个晚上的真心懒得弄。
UI界面
到现在已经可以从0起步，通过cordova 完成一个有实际功能的app的开发了。不过细心的人也会发现，到现在为止我们还没调用 cordova 提供的任何关于android的api！完全都是使用html和js本身的功能来实现的 ~ 下一步，就是开始学习了解cordova的android api，打开蓝牙并连接其他蓝牙设备进行通讯。

用HTML和JS来开发移动app - 计算器app功能实现

FreeZinG

引用和评论

几个前端UI框架的的比较

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

前站 - 前端导航，搜索社区，阅读文章，提升技术

前端开发工具

100个React最佳实践小技巧

开发插件集合