html js php计算器代码,用HTML和JS来开发移动app - 计算器app功能实现

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

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

对0-9按钮定义一个数字功能：实现对输入的数值更新并保存到一个变量

对功能键定义一个操作功能：根据不同操作对输入变量进行操作

对UI显示定义一个刷新函数：每次按键操作后刷新一次UI

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

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

0

NULL

0

1

2

3

+

4

5

6

-

7

8

9

x

0

C

=

/

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

}

}

开始没注意乘法和除法的运算，导致当value是0时会出错.. 将

total=total/value

改为了

if (value)

{

if (total)

{total=total/value}

else

{total=value}

}

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

run cordova android

运行成功后会提示：

打开手机app，试了一下，虽然界面简陋，但是至少在手机上把一个有功能的app跑起来了！剩下的内容是优化界面... 无奈对html和css真不熟，一个个标签一个个参数去看狠废时间... 求达人10分钟帮我排个版面吧！！自己来做花一个下午一个晚上的真心懒得弄。

到现在已经可以从0起步，通过cordova 完成一个有实际功能的app的开发了。不过细心的人也会发现，到现在为止我们还没调用 cordova 提供的任何关于android的api！完全都是使用html和js本身的功能来实现的 ~ 下一步，就是开始学习了解cordova的android api，打开蓝牙并连接其他蓝牙设备进行通讯。