Combining this prototype diagram and the existing layout controls of imag.js, there are roughly two solutions.
The first type: use
the list list label at the bottom of the list list layout for layout, a total of 4 items, each item has 5 columns of col, add the text label label to the col, or replace the label with a button. A total of 20 columns, each column does not need to set the length, it will be automatically allocated to each col.
The structure diagram is as follows:
The code structure is (the remaining three items are just copied):
<list>
<item>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
<col><label></label></col>
</item>
</list>
This structure is equivalent to a skeleton, and the rest is to write the content.
The second: use
the grid layout control grid at the bottom of the nine-square grid layout, a total of 20 items, each item has a text label label. Compared with the first method, it will be simpler, with less code and strong reproducibility.
The structure diagram is as follows:
Code structure (the rest of the items can also be copied):
<grid cols="5">
<item><label></label></item>
<item><label></label></item>
</grid>
The grid layout of the grid defaults to the nine-square grid style, and each row automatically matches 3 items. If more than 3 items are required, you need to set the cols property of the grid.
The layout is determined, and the logic section below
has a lot of source code of Android and iOS calculators on the Internet. Among them, the source code of Android calculator needs to add onClick to realize the button function, and also provides the monitoring event of the button. Also in imag.js, onclick is required to implement the click function, but it does not need to monitor events. At the same time, onclick acts on the item in the grid list, not the button button.
js core code:
<script>
<![CDATA[
var num=0,result=0,numshow="0";
var operate=0; //The flag to judge the input state
var calcul=0; //The flag to judge the calculation status
var quit=0; //Sign to prevent repeated keystrokes
var ScreenValue = $('numScreen').value;
function refresh_Screen(){
$('numScreen').value = ScreenValue;//Refresh the display
}
function command(num){
var str=ScreenValue; //Get the current display data
if(str!='0'&&operate==0){
str = str;
}else {
str = '';
}//If the current value is not "0" and the status is 0, return the current value, otherwise return a null value;
str=str + String(num);//Append characters to the current value
ScreenValue=str;
refresh_Screen();//Refresh the display
operate=0; //reset input state
quit=0; //Reset the flag to prevent repeated keystrokes
}
function dzero(){
var str = ScreenValue;
if(str!='0'&&operate==0){
str = str + '00';
}else {
str = '0';
}//If the current value is not "0" and the status is 0, return when str+"00", otherwise return "0";
ScreenValue=str;
refresh_Screen();
operate=0;
}
function dot(){
var str = ScreenValue;
if(str!='0'&&operate==0){
str = str;
}else {
str = '0';
}//If the current value is not "0" and the status is 0, return the current value, otherwise return "0";
for(i=0; i<=str.length;i++){ //Determine whether there is already a dot
if(str.substr(i,1)==".") return false; //If there is, don't insert again
}
str=str + ".";
ScreenValue=str;
refresh_Screen();
operate=0;
}
function del(){ //backspace
var str = ScreenValue;
str=str.substr(0,str.length-1);
ScreenValue=str;
refresh_Screen();
}
function clearscreen(){ //Clear data
num=0;
result=0;
numshow="0";
ScreenValue="0";
refresh_Screen();
}
function plus(){ //addition
calculate(); //call calculation function
operate=1; //Change the input state
calcul=1; //Change the calculation state to plus
}
function minus(){ //subtraction
calculate();
operate=1;
calculation=2;
}
function times(){ //multiplication
calculate();
operate=1;
calculation=3;
}
function divide(){ //divide
calculate();
operate=1;
calculation=4;
}
function persist(){ //remainder
calculate();
operate=1;
calculation=5;
}
function equal(){
calculate(); //equal to
operate=1;
num=0;
result=0;
numshow="0";
}
//
function calculate(){
numshow=Number(ScreenValue);
if(num!=0 && quit!=1){ //Determine whether the previous operand is zero and the state of the anti-repeat button
switch(calcul){ //Determine the state to be entered
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("The dividend cannot be zero!")} break;
case 5:result=num%numshow;break;
}
quit=1; //Avoid repeated keystrokes
}
else{
result=numshow;
}
numshow=String(result);
ScreenValue=numshow;
refresh_Screen();
num=result; //Store the current value
}
]]>
</script>
Create an application in the Aimage platform, copy the complete code to the cloud development and save it, a simple calculator application will do. Combined with the development version of imag.js, you can view the renderings at any time. The
complete
code or download the following compressed package and import it into the created application to
quickly become familiar with imag.js. Watch the video tutorial