Today I want to, its sudden think can use Html5 to mimic apple's operating system for a ios can run in a Web platform.
of course, to develop an operating system, mount wait me to return to practice in one hundred. Today just for your entertainment, make a boot interface.
after the completion of image:
 
worry about pictures is my PS after test can direct access to the following address: http://www.cnblogs.com/yorhom/articles/3163078.html

because lufylegend encapsulation does well, the development is made of the engine. Not much code, interested friends can directly have a look.
index. The HTML code in:

  code is as follows:  


<! DOCTYPE html>
<Html>
<Head>
<Meta charset="utf-8"/>
<Title> Iphone
<Script SRC="http://www.script-home.com//html5/lufylegend-1.7.7.min.js" ></script>
<Script SRC="http://www.script-home.com//html5/js/Main.js" ></script>
</head>
<Body>
<Div id="mylegend >" Loading............ </div>
</body>
</html>

the Main, js code:

  code is as follows:  


init (50, "mylegend", 450640, the Main);
LGlobal. SetDebug (true);
var loadData=[http://www.script-home.com//html5/
{path: "../js/Shape. Js ", type: "js"},
{path: "../js/BootPage. Js ", type: "js"},
{name: "which", path: "./images/wall_paper. JPG "}
];
var datalist={};
var backLayer iphoneLayer, screenLayer, buttonLayer;
var iosShape;
var bootPage;
the function main () {
LLoadManage. The load (the loadData, null, gameInit);

} function gameInit (result) {
datalist=the result;
//
initialize layer initLayer ();
//add the iphone case
addShape ();

//join boot interface addBack ();

} function initLayer () {

//background layer backLayer=new LSprite ();
addChild (backLayer);

} function addShape () {
iosShape=new Shape (" IPHONE ", 400600);
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 [" which "], 200480, wallPaperWidth, wallPaperHeight));
bootPage. The addTime (); .
bootPage addSlider (); .
iosShape addChild (bootPage);
}

Shape. The js code:

  code is as follows:  


/* * Shape in js
* *
/function Shape (type, width, height) {
var s=this;
the base (s, LSprite, []);
s.x=0;
s.y=0;
s.d. eviceWidth=width;
s.d. eviceHeight=height;
s.t ype=type;

//outer shell s.s hapeLayer=new LSprite ();
s.a ddChild (s.s hapeLayer);

//Home button layer Sheldon horowitz omeButtonLayer=new LSprite ();
s.a ddChild (Sheldon horowitz omeButtonLayer);

//screen layer s.s creenLayer=new LSprite ();
s.a ddChild (s.s creenLayer);

//show itself s. _showSelf ();

} Shape. The prototype. _showSelf=function () {
var s=this;
the switch (s.t ype) {
case "IPHONE" :
//painting shell
var shadow=new LDropShadowFilter (15, and "black", 20);
s.s hapeLayer. Graphics. DrawRoundRect (10, "black", [0, 0, s.d. eviceWidth, s.d. eviceHeight, 15], true, "black"); .
s.s hapeLayer filters=(shadow);

//picture screen s.s creenLayer. Graphics. The drawRect (0, "black", [10, s.d. eviceWidth/spyware doctor eviceWidth/10, s.d. eviceWidth * 0.8, s.d. eviceHeight * 0.8], true, "white");

//draw the Home button Sheldon horowitz omeButtonLayer. Graphics. DrawArc (1, "black", [s.d. eviceWidth/2, s.d. eviceHeight * 0.87 + s.d. eviceWidth/10, s.d. eviceWidth/16,0,2 * math.h PI], true, "# 191818");
Sheldon horowitz omeButtonLayer. Graphics. DrawRoundRect (3, "white", [s.d. eviceWidth/2-10, s.d. eviceHeight 10-10 * 0.87 + s.d. eviceWidth/,20,20,5]);
break;

}};
Shape. The prototype. GetScreenWidth=function () {
var s=this;
return s.d. eviceWidth * 0.8;
};
Shape. The prototype. GetScreenHeight=function () {
var s=this;
return s.d. eviceHeight * 0.8
};

the last is BootPage js code:

  code is as follows:  


/* * BootPage in js
* *
/function BootPage () {
var s=this;
the base (s, LSprite, []);
s.x=0;
s.y=0;
s.t imeLayer=new LSprite ();
s.s liderLayer=new LSprite ();

} BootPage. Prototype. AddWallPaper=function (bitmapdata) {
var s=this;
//add the background picture
s. allPaper=new LBitmap (bitmapdata);
s.a ddChild (s. allPaper);
};
BootPage. Prototype. AddTime=function () {
var s=this;
var shadow=new LDropShadowFilter (1, 1, "black", 8);
s.a ddChild (s.t imeLayer);
s.t imeLayer. Graphics. DrawRect (0, "", [0, 0, iosShape getScreenWidth (), 150], true," black ");

//add time to the text area s.t imeLayer. Alpha=0.3;
s.t imeText=new LTextField ();
s.t imeText. X=70;
s.t imeText. Y=20;
s.t imeText. Size=50;
s.t imeText. Color="white";
s.t imeText. Weight="bold"; .
s.t imeText filters=(shadow);

//join date the text area s.d. ateText=new LTextField ();
s.d. ateText. Size=20;
s.d. ateText. X=110;
s.d. ateText. Y=100;
s.d. ateText. Color="white";
s.d. ateText. Weight="bold"; .
s.d. ateText filters=(shadow);
s.a ddChild (s.t imeText);
s.a ddChild (s.d. ateText);
//通过时间轴事件更新日期
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 + "月" + date.getDate() + "日";
})
};
BootPage. Prototype. AddSlider=function (bitmapdata) {
var s=this;
s.a ddChild (s.s liderLayer);
s.s liderLayer. Graphics. DrawRect (0, "", [0, iosShape getScreenHeight () - 100, iosShape. GetScreenWidth (), 100], true," black ");
s.s liderLayer. Alpha=0.3;

/join the slider frame layer var barBorder=new LSprite ();
barBorder. X=35;
barBorder. Y=iosShape. GetScreenHeight () - 70;
s.a ddChild (barBorder);
//add the slider captions
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 the slider layer var bar=new LSprite ();
bar. X=35;
bar. Y=iosShape. GetScreenHeight () - 70;
bar. CanMoveBar=false;
//add the mouse to click and mouse events.
bar addEventListener (LMouseEvent MOUSE_DOWN, function (event, s) {
s.c anMoveBar=true,
});
bar. The addEventListener (LMouseEvent MOUSE_UP, function (event, s) {
LTweenLite) to (0.5 bar, {
x 35,
the onComplete: function (s) {
s.c anMoveBar=false;
}
});
s.c anMoveBar=false;
});
s.a ddChild (bar);
bar. The addEventListener (LMouseEvent MOUSE_OUT, function (event, s) {
LTweenLite) to (0.5 bar, {
x 35,
the onComplete: function (s) {
s.c anMoveBar=false;
}
});
s.c anMoveBar=false;
});
s.a ddEventListener (LMouseEvent MOUSE_MOVE, function (event) {
the if (bar. CanMoveBar==true) {
bar. X=event. OffsetX - 70,
the if (215) bar. X >{bar. X=215;}
the if (bar. X <35) {bar. X=35;}
}
});
s.a ddChild (bar);
//draw the slider frame
barBorder. Graphics. DrawRoundRect (2, "# 191818",,0,250,40,5 [0], true, "black");
barBorder. Alpha=0.7;

//draw the slider bar. The graphics. DrawRoundRect (2, "dimgray",,0,70,40,5 [0], true, "lightgray");
bar. Alpha=0.7;
};

because this is I amuse ourselves, so the code is not much talked about, tell me the Shape only. Js and BootPage js purposes. Shape. Javascript is used to painting class, we use iphone shell and BootPage. Js is boot interface class. Both the function of the different, is equivalent to Shape. Js appearance for processing hardware, BootPage. Js to display.
the other would leave a you see by yourself. Although the code is a little long, but with no logic. Slowly read is Ok! Read don't understand, of course, the students may be not understand lufylegend, below is the engine's official website: http://lufylegend.com/lufylegend

engine API documentation: http://lufylegend.com/lufylegend/api

think in CSDN blog reading code difficult to classmate, don't copy with your editor to open the source code, source code download address is as follows:

http://files.cnblogs.com/yorhom/iphone01.rar# 0 - #


This concludes the body part