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


今天开始构思第一个有实际功能的手机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

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


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>