结合这个原型图和imag.js现有的布局控件大致有两种解决思路。
第一种：使用list列表布局
底部使用list列表标签进行布局，共4个item，每个item中有5列col，在col中加入文本标签label，也可以把label替换成button。共20列，每一列不用设置长度，会自动平均分配给每一个col。
结构图如下：
代码结构是（其余三个item复制就好）：
<list>
<item>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
</item>
</list>
这个结构相当于一个骨架，余下的就是编写内容了。
第二种：使用九宫格grid布局
底部使用网格布局控件grid，共20个item，每个item中有一个文本标签label。相对于第一种方法会更简单，代码量也少，可复制性强。
结构图如下：
代码结构（其余item也是复制即可）：
<grid cols="5">
<item><label></label></item>
<item><label></label></item>
</grid>
Grid网格布局默认九宫格样式，每行自动匹配3个item，如果要求在3个以上，需要设置grid的cols属性。
布局确定了，下面整理逻辑部分
网上有很多Android和iOS计算器的源码，其中Android计算器源码需要加入onClick来实现按钮功能，又提供了按钮的监听事件。同样在imag.js也要onclick来实现点击的功能，但不需要监听事件，同时onclick作用的是grid列表中的item，不是按钮button。
js核心代码：
<script>
<![CDATA[
var num=0,result=0,numshow="0";
var operate=0; //判断输入状态的标志
var calcul=0; //判断计算状态的标志
var quit=0; //防止重复按键的标志
var ScreenValue = $('numScreen').value;
function refresh_Screen(){
$('numScreen').value = ScreenValue;//刷新显示
}
function command(num){
var str=ScreenValue; //获得当前显示数据
if(str!='0'&&operate==0){
str = str;
}else {
str = '';
}//如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
str=str + String(num);//给当前值追加字符
ScreenValue=str;
refresh_Screen();//刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}
function dzero(){
var str=ScreenValue;
if(str!='0'&&operate==0){
str = str + '00';
}else {
str = '0';
}//如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0";
ScreenValue=str;
refresh_Screen();
operate=0;
}
function dot(){
var str=ScreenValue;
if(str!='0'&&operate==0){
str = str;
}else {
str = '0';
}//如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0";
for(i=0; i<=str.length;i++){ //判断是否已经有一个点号
if(str.substr(i,1)==".") return false; //如果有则不再插入
}
str=str + ".";
ScreenValue=str;
refresh_Screen();
operate=0;
}
function del(){ //退格
var str=ScreenValue;
str=str.substr(0,str.length-1);
ScreenValue=str;
refresh_Screen();
}
function clearscreen(){ //清除数据
num=0;
result=0;
numshow="0";
ScreenValue="0";
refresh_Screen();
}
function plus(){ //加法
calculate(); //调用计算函数
operate=1; //更改输入状态
calcul=1; //更改计算状态为加
}
function minus(){ //减法
calculate();
operate=1;
calcul=2;
}
function times(){ //乘法
calculate();
operate=1;
calcul=3;
}
function divide(){ //除法
calculate();
operate=1;
calcul=4;
}
function persent(){ //求余
calculate();
operate=1;
calcul=5;
}
function equal(){
calculate(); //等于
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(ScreenValue);
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态
switch(calcul){ //判断要输入状态
case 1:result=num+numshow;break; //计算"+"
case 2:result=num-numshow;break; //计算"-"
case 3:result=num*numshow;break;
case 4:if(numshow!=0){result=num/numshow;}else{hint("被除数不能为零!")} break;
case 5:result=num%numshow;break;
}
quit=1; //避免重复按键
}
else{
result=numshow;
}
numshow=String(result);
ScreenValue=numshow;
refresh_Screen();
num=result; //存储当前值
}
]]>
</script>
在爱码哥平台中创建一个应用，把完整代码复制到云端开发中并保存，一个简单的计算器应用就搞定了。结合 爱码哥开发版随时查看效果图
完整代码
或者下载下面的压缩包导入到创建的应用中
快速熟悉掌握imag.js可观看 视频教程