Html5 implements iPhone boot interface sample code_html5 tutorial skills

init(50,"mylegend",450,640,main);
LGlobal.setDebug(true);
var loadData = [
{path: "./js/Shape.js",type:"js"},
{path:"./js/BootPage.js",type:"js"},
{name:"wallpaper", path:"./images/wall_paper.jpg"}
];
var datalist = {};
var backLayer,iphoneLayer,screenLayer,buttonLayer;
var iosShape;
var bootPage;
function main(){
LLoadManage.load(loadData,null,gameInit);
}
function gameInit(result){
datalist = result;
//Initialization layer
initLayer();
//Add iphone shell
addShape();
//Add startup interface
addBack();
}
function initLayer(){
//Background layer
backLayer = new LSprite();
addChild(backLayer);
}
function addShape(){
iosShape = new Shape("IPHONE",400,600);
iosShape.x = 15;
iosShape.y = 5;
backLayer.addChild(iosShape);
}
function addBack(){
bootPage = new BootPage();
bootPage.x = 40;
bootPage.y = 40;
var wallPaperWidth = iosShape.getScreenWidth();
var wallPaperHeight = iosShape.getScreenHeight();
bootPage.addWallPaper(new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight));
bootPage.addTime();
bootPage.addSlider();
iosShape.addChild(bootPage);
}

/*
* Shape.js
**/
function Shape(type,width,height){
var s = this;
base(s,LSprite ,[]);
s.x = 0;
s.y = 0;
s.deviceWidth = width;
s.deviceHeight = height;
s.type = type;
/ /Shell Layer
s.shapeLayer = new LSprite();
s.addChild(s.shapeLayer);
//Home Button Layer
s.homeButtonLayer = new LSprite();
s.addChild(s.homeButtonLayer);
//Screen layer
s.screenLayer = new LSprite();
s.addChild(s.screenLayer);
//Display itself
s._showSelf();
}
Shape.prototype._showSelf = function(){
var s = this;
switch(s.type){
case "IPHONE":
//Draw the shell
var shadow = new LDropShadowFilter(15,45,"black",20);
s.shapeLayer.graphics.drawRoundRect(10,"black",[0,0,s. deviceWidth,s.deviceHeight,15],true,"black");
s.shapeLayer.filters = [shadow];
//Draw the screen
s.screenLayer.graphics.drawRect(0," black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");
//Draw the Home button
s.homeButtonLayer .graphics.drawArc(1,"black",[s.deviceWidth/2,s.deviceHeight*0.87 s.deviceWidth/10,s.deviceWidth/16,0,2*Math.PI],true,"#191818" );
s.homeButtonLayer.graphics.drawRoundRect(3,"white",[s.deviceWidth/2-10,s.deviceHeight*0.87 s.deviceWidth/10 - 10,20,20,5]);
break;
}
};
Shape.prototype.getScreenWidth = function(){
var s = this;
return s.deviceWidth*0.8;
};
Shape.prototype.getScreenHeight = function(){
var s = this;
return s.deviceHeight*0.8
};

/*
* BootPage.js
**/
function BootPage(){
var s = this;
base(s,LSprite,[]);
s.x = 0;
s.y = 0;
s.timeLayer = new LSprite();
s.sliderLayer = new LSprite();
}
BootPage.prototype.addWallPaper = function( bitmapdata){
var s = this;
//Add background image
s.wallPaper = new LBitmap(bitmapdata);
s.addChild(s.wallPaper);
};
BootPage.prototype.addTime = function(){
var s = this;
var shadow = new LDropShadowFilter(1,1,"black",8);
s.addChild(s.timeLayer );
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black");
//Add time text area
s.timeLayer.alpha = 0.3;
s.timeText = new LTextField();
s.timeText.x = 70;
s.timeText.y = 20;
s.timeText. size = 50;
s.timeText.color = "white";
s.timeText.weight = "bold";
s.timeText.filters = [shadow];
//Join date Text area
s.dateText = new LTextField();
s.dateText.size = 20;
s.dateText.x = 110;
s.dateText.y = 100;
s.dateText.color = "white";
s.dateText.weight = "bold";
s.dateText.filters = [shadow];
s.addChild(s.timeText);
s.addChild(s.dateText);
//Update date through timeline event
s.addEventListener(LEvent.ENTER_FRAME,function(s){
var date = new Date();
if(date.getMinutes() < 10){
if(date.getHours() < 10){
s.timeText.text = "0" date.getHours() ":0" date .getMinutes();
}else{
s.timeText.text = date.getHours() ":0" date.getMinutes();
}
}else{
if( date.getHours() < 10){
s.timeText.text = "0" date.getHours() ":" date.getMinutes();
}else{
s.timeText.text = date.getHours() ":" date.getMinutes();
}
}
s.dateText.text = date.getMonth() 1 "month" date.getDate() "day";
})
};
BootPage.prototype.addSlider = function(bitmapdata){
var s = this;
s.addChild(s.sliderLayer);
s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black");
s.sliderLayer.alpha = 0.3;
//Add the slider frame layer
var barBorder = new LSprite();
barBorder.x = 35;
barBorder.y = iosShape.getScreenHeight()-70;
s.addChild( barBorder);
//Add slider description
var moveBarCommont = new LTextField();
moveBarCommont.size = 12;
moveBarCommont.x = 80;
moveBarCommont.y = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock.";
barBorder.addChild(moveBarCommont);
//Add slider layer
var bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70;
bar.canMoveBar = false;
//Add mouse click and mouse movement Event
bar.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,s){
s.canMoveBar = true;
});
bar.addEventListener(LMouseEvent.MOUSE_UP,function(event,s) ){
LTweenLite.to(bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
});
s.canMoveBar = false;
});
s.addChild(bar);
bar.addEventListener(LMouseEvent.MOUSE_OUT,function(event,s){
LTweenLite.to( bar,0.5,{
x:35,
onComplete:function(s){
s.canMoveBar = false;
}
});
s.canMoveBar = false;
});
s.addEventListener(LMouseEvent.MOUSE_MOVE,function(event){
if(bar.canMoveBar == true){
bar.x = event.offsetX - 70;
if(bar.x > 215){bar.x = 215;}
if(bar.x < 35){bar.x = 35;}
}
});
s.addChild(bar);
//Draw the slider box
barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black") ;
barBorder.alpha = 0.7;
//Draw the slider
bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray ");
bar.alpha = 0.7;
};