秒表一个很常用的app，而且它的实现也是非常简单。这里我们用它来作为一个学习HTML5 app开发的例子，主要学习让app适应不同的密度的屏幕。
1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。
选择”新建“创建一个新的app，缺省情况下的设备是iphone5（或者其它设备）。
2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框，在设备列表中选择firefoxOS的手机。
3.选择“确定”之后，我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar，把它删除掉。
4.现在我们向窗口上放一张图片和三个按钮。
5.为了方便界面排版，我们把三个按钮组合起来。
6.让三个按钮分别在分组控件的左中右，并垂直居中。
7.再向窗口中放入一个列表视图，用它来保存时间记录。
列表视图上列表项保留一个，其它的删除掉，并调整上的控件如下图。
8.现在我们先准备一些图片，并放在code.csdn.net上，如果你有自己的服务器，就放到自己的服务器上，图片分别放在mdpi，hdpi和xhdpi里，分别对应不同密度的屏幕。我把图片放在这里： https://code.csdn.net/absurd/FirefoxOS_Apps/tree/master/timer 。
我们来设置窗口的背景图片(code.csdn.net上不允许跨域访问里面的图片，我们还是要通过代理访问)。
我们来设置按钮的背景图片。
其它控件的背景图片一样设置，并把列表项的正常背景图片去掉。最后得下面的效果：
9.界面差不多了，我们开始写代码：
我们先在窗口的onOpen事件里写些代码：
var win = this;
var appInfo = {};
appInfo.STOPPED = 1;
appInfo.RUNNING = 2;
appInfo.PAUSED = 3;
appInfo.state = appInfo.STOPPED;
appInfo.timerCount = 0;
appInfo.reset = function() {
this.timerCount = 0;
this.laps = [];
this.showTaps();
win.findChildByName("ui-label-time", true).setText(appInfo.getTimeStr());
return;
}
appInfo.getTimeStr = function() {
var str = (appInfo.timerCount/10) + "";
var dot = str.indexOf(".");
if(dot < 0) {
str = str + ".0";
}
return str;
}
appInfo.lap = function() {
this.laps.push(this.getTimeStr());
this.showTaps();
}
appInfo.showTaps = function() {
var list = win.findChildByName("ui-list-view", true);
var data = {children:[]};
for(var i = this.laps.length-1; i >= 0; i--) {
var item = {children:[]};
item.children.push({text:i+1+""});
item.children.push({text:this.laps[i]});
data.children.push(item);
}
list.bindData(data, "default", true);
return;
}
appInfo.setState = function(state) {
this.state = state;
var startButton = win.findChildByName("ui-button-start", true);
var stopButton = win.findChildByName("ui-button-stop", true);
var resetButton = win.findChildByName("ui-button-reset", true);
switch(state) {
case appInfo.STOPPED: {
startButton.setText("Start");
stopButton.setEnable(false);
resetButton.setText("Reset");
break;
}
case appInfo.RUNNING: {
startButton.setText("Pause");
stopButton.setEnable(true);
resetButton.setText("Lap");
break;
}
case appInfo.PAUSED: {
startButton.setText("Start");
stopButton.setEnable(true);
resetButton.setText("Reset");
break;
}
}
return;
}
this.appInfo = appInfo;
function onTimer() {
if(appInfo.state === appInfo.RUNNING) {
appInfo.timerCount = appInfo.timerCount + 1;
win.findChildByName("ui-label-time", true).setText(appInfo.getTimeStr());
win.postRedraw();
}
setTimeout(onTimer, 100);
return;
}
setTimeout(onTimer, 100);
appInfo.reset();
appInfo.showTaps();
编写start按钮的事件处理代码：
var win = this.getWindow();
var appInfo = win.appInfo;
if(appInfo.state === appInfo.STOPPED) {
appInfo.reset();
appInfo.setState(appInfo.RUNNING);
}
else if(appInfo.state === appInfo.PAUSED) {
appInfo.setState(appInfo.RUNNING);
}
else if(appInfo.state === appInfo.RUNNING) {
appInfo.setState(appInfo.PAUSED);
}
编写stop按钮的事件处理代码：
var win = this.getWindow();
var appInfo = win.appInfo;
appInfo.setState(appInfo.STOPPED);
编写reset按钮的事件处理代码：
var win = this.getWindow();
var appInfo = win.appInfo;
if(appInfo.state === appInfo.STOPPED) {
appInfo.reset();
}
else {
appInfo.lap();
}
17.我们通过菜单"文件“/”在设备上预览“生成一个URL，在实际的设备上看看效果如何。
18.最后当然是生成安装包了，菜单“云编译”/"编译FirefoxOS安装包"。
这里有我们做好的，你可以直接参考：