• HTML5 App实战(5):指南针


    指南针是一个很有意思的应用程序,这里用“画app吧”开发一个简单的指南针应用程序吧:

    1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。

    1

    选择”新建“创建一个新的app,缺省情况下的设备是iphone5(或者其它设备)。

    2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框,在设备列表中选择firefoxOS的手机。

    2

    3.选择“确定”之后,我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar,把它删除掉。

    3

    4.向窗口上放置一个指南针控件,然后设置窗口的背景颜色:

    4

    5.界面很简单,现在开始编写代码:

    在窗口的onOpen事件里,注册传感器事件:

    var win = this;
    var compass = win.findChildByName("ui-gauge-pointer-compass", true);
    
    if ( window.DeviceOrientationEvent ) {
        window.addEventListener("deviceorientation", function( event ) {
    
    	var rotateDegrees = 360 - event.alpha;
    	compass.animSetValue(rotateDegrees);
        
        }, false);
    }
    else {
    	compass.setValue(60);
    }
    

    7.差不多了,我们点击设备上的"预览"按钮,看看实际的运行效果。

    8.我们通过菜单"文件“/”在设备上预览“生成一个URL,在实际的设备上看看效果如何。

    9.最后当然是生成安装包了,菜单“云编译”/"编译FirefoxOS安装包"。

    这里有我们做好的,

    你也可以直接编辑

    也可以在线运行

  • 相关阅读:
    Selenium+PhantomJS实现简易有道翻译爬虫
    Scrapy框架实战-妹子图爬虫
    拉勾网职位信息爬取
    Docker Compose容器编排
    Ansible进阶--playbook的使用
    etcd集群部署
    使用Dockerfile构建镜像
    Docker网络管理
    Docker数据管理
    Dubbo高性能网关--Flurry介绍
  • 原文地址:https://www.cnblogs.com/zhangyunlin/p/6167368.html
Copyright © 2020-2023  润新知