`
前进的路中没有月亮
  • 浏览: 20731 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

imag.js|教你如何智做原生APP

阅读更多
手机计算器是我们日常中很熟悉并且使用起来非常简单的应用了,这样的应用在爱码哥平台中又该如何开发呢? 
结合这个原型图和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可观看视频教程
0
0
分享到:
评论

相关推荐

    cut_imag.7z

    《win截屏工具cut_imag.7z详解及应用》 截屏工具在现代计算机使用中扮演着不可或缺的角色,尤其在信息分享、问题反馈以及教学演示等场景中,它提供了便捷的方式来捕捉屏幕上的图像。"cut_imag.7z"便是一款针对...

    fastICA_imag.zip_fastica图像_图像分离_混合图像分离

    "fastICA_imag.zip"这个压缩包包含了实现这一功能的源码文件"fastICA_imag.m",这是一个MATLAB代码,用于执行快速ICA算法(FastICA)在图像分离上的应用。 FastICA算法是ICA的一种高效实现,由Aapo Hyvärinen等人...

    4_Add2Imag.zip_thisimag

    【标题】4_Add2Imag.zip 这个压缩包文件涉及的是一个OpenCV项目,名为"thisimag",它很可能是关于在图像处理中添加两个图像的实现。OpenCV(开源计算机视觉库)是一个强大的跨平台库,广泛用于图像处理、计算机视觉...

    PyPI 官网下载 | imag3-1.1.0.tar.gz

    《PyPI官网下载imag3-1.1.0.tar.gz:深入解析Python图像处理库imag3》 在Python编程世界中,PyPI(Python Package Index)是开发者们获取和分享软件包的重要平台。今天我们将聚焦于一个名为"imag3"的Python库,其...

    SMPTEMot.Imag.J-2014--1-60.pdf

    本文讨论了在视频编码和显示设备领域内,如何通过新的标准和进展来改善色彩表示的范围和质量。文章主要聚焦在两个视频色彩标准上:BT.709和BT.2020,探讨了与之相关的新技术和应用前景。 首先,BT.709标准是长期...

    yolov8系列--GUI for marking bounded boxes of objects in imag.zip

    在本压缩包“yolov8系列--GUI for marking bounded boxes of objects in imag.zip”中,包含的是一个用于图像目标检测的图形用户界面(GUI)工具。这个工具主要用于在图像上标注物体的边界框,是训练对象检测模型如...

    VC_start_up_imag.rar_MFC 启动界面_Start Up

    这个“VC_start_up_imag.rar_MFC 启动界面_Start Up”资源是一个实例,展示了如何在MFC应用中创建一个启动界面。下面我们将详细探讨MFC启动界面的实现以及相关知识点。 首先,启动界面通常是应用程序启动时首先显示...

    imag.xy2.dev

    "imag.xy2.dev-main"作为压缩包子文件的文件名,通常代表这是项目的主入口文件,可能是JavaScript代码,负责初始化和管理整个应用。在这个场景下,它可能包含了与CSS相关的JavaScript库,用于动态地应用样式,或者与...

    A Small Target Detection Method in Infrared Imag.pdf

    标题:“基于压缩感知和背景减除的红外图像序列中小目标检测方法” 描述:本文介绍了一种新型的自适应背景减除方法,该方法利用压缩感知技术直接检测红外图像序列中的小目标。该方法能够显著减少信号采样和传输带宽...

    fastICA_imag.rar_fastica 图像_fastica图像_图像复原算法_图像盲分离、_混合图像分离

    - **fastICA_imag.m**:这个文件很可能是MATLAB代码,实现了fastICA算法用于图像盲分离的过程。代码可能包括数据预处理、负熵函数计算、权重更新和结果可视化等关键步骤。 5. **实际应用示例** - **混合图像分离*...

    blr-imag.fig.zip_去模糊_去模糊MATLAB_模糊图像恢复

    图像被模糊以后的模糊图像和去模糊后的恢复图像的对比

    简单复数计算器

    result = new Complex((a.real * b.real + a.imag * b.imag) / (b.real * b.real + b.imag * b.imag), (b.real * a.imag - a.real * b.imag) / (b.real * b.real + b.imag * b.imag)); return result; } // 除法...

    fastICA_imag.rar_fastica_fastica image_fastica 图像_fastica图像_hybr

    利于fastICA算法实现混合图像分离的源代码,给大家一个参考

    Android 预约订餐order.zip

    imag.js框架,虽然名字看起来像是JavaScript库,但这里可能是开发者自创的一个组件或者工具,因为没有公开的"imag.js"框架信息。它可能是一个专门为Android定制的JavaScript库,用于增强图形处理、动画效果或者交互...

    wordsbaking-editor:为文字烘焙工作

    网站开发 关于 宣言 这部分(编辑器)可能适用于。 由设计。 由。 网页目录结构 wordsbaking-editor | +---editor.html ...+---imag/ | | | +---ico.png | +---js/ | +---editor.js | +---jquery-1.8.3.min.js

    AA.rar_ONDELETTES

    antonia@imag.fr http://www-lmc.imag.fr/SMS G′en′eralit′es sur les d′ecompositions en ondelettes &#8226 Les ondelettes . Analyses multir′esolution . Algorithmes de calcul &#8226 Approximation et ...

    API _java_android_

    本主题主要关注在Android平台上如何利用Java语言来调用API,特别是加载新闻数据和使用JavaScript库imag.js。 首先,理解API调用的基本概念至关重要。API通常是一组预定义的函数、类或方法,允许开发者通过发送请求...

    imag-popupmenu.zip

    "imag-popupmenu.zip"这个压缩包显然包含了一个关于如何在Android应用中绘制多个PopupMenus的示例。下面我们将深入探讨PopupMenus的相关知识。 首先,PopupMenus通常用于在用户点击某个图标或按钮时显示一系列可选...

Global site tag (gtag.js) - Google Analytics