HTML5 implementiert Beispielcode für die iPhone-Boot-Schnittstelle. Tutorial-Fähigkeiten für HTML5

Heute hatte ich plötzlich eine Idee und dachte, ich könnte Html5 verwenden, um das Apple-Betriebssystem zu imitieren und ein iOS zu erstellen, das auf der Webplattform ausgeführt werden kann.
Natürlich muss ich ein Betriebssystem entwickeln und warten, bis ich wieder auf den Berg zurückkehre, um weitere hundert Jahre zu üben. Lasst uns heute Spaß haben und zuerst eine Startup-Schnittstelle erstellen.
Das fertige Bild:

Studenten, die befürchten, dass das Bild von mir mit Photoshop bearbeitet wurde, können zum Testen direkt an die folgende Adresse gehen:
http://www.cnblogs.com /yorhom/articles /3163078.html
Da lufylegend wirklich gut verpackt ist, wird diese Entwicklung immer noch mit dieser Engine durchgeführt. Es gibt nicht viel Code, interessierte Freunde können direkt einen Blick darauf werfen.
Code in index.html:

Code kopieren

Der Code lautet wie folgt:

;
/script>
>


Code in Main.js:





Code kopieren

Der Code lautet wie folgt:

init(50,"mylegend",450,640,main); LGlobal.setDebug(true); var loadData = [ {path : "./js/Shape.js",type:"js"}, {Pfad:"./js/BootPage.js",type:"js"},

{Name:"wallpaper" , Pfad:"./images/wall_paper.jpg"}

var datalist = {};

var backLayer,screenLayer,buttonLayer; ;
function main(){
LLoadManage.load(loadData,null,gameInit);
function gameInit(result){
datalist = result;
initLayer();
//iPhone-Shell hinzufügen
addShape();
//Startschnittstelle hinzufügen
addBack();
function initLayer(){
//Hintergrundebene
backLayer = new LSprite();
addChild(backLayer);
}
function addShape(){
iosShape = new Shape("IPHONE",400,600) ;
iosShape.x = 15;
iosShape.y = 5;
backLayer.addChild(
}
function addBack(){
bootPage = new BootPage(); ;
bootPage.x = 40;
bootPage.y = 40;
var wallPaperHeight = iosShape.getScreenHeight(); new LBitmapData(datalist["wallpaper"],200,480,wallPaperWidth,wallPaperHeight));
bootPage.addSlider();
iosShape.addChild(bootPage);


Der Code in Shape.js:





Kopieren Sie den Code


Der Code ist wie folgt folgt:


/*
* Shape.js
**/
function Shape(type,width,height){
var s = this; base(s,LSprite ,[]);

s.x = 0;
s.deviceWidth = width;
s.type = height ;
/ /Shell Layer

s.shapeLayer = new LSprite();

s.addChild(s.shapeLayer); //Home Button Layers.homeButtonLayer = new LSprite( ); s.addChild(s.homeButtonLayer); /Screen Layer

s.screenLayer = new LSprite();

/ Zeigt sich selbst

s._showSelf();
}
Shape.prototype._showSelf = function(){
var s = this;
switch(s.type){
case "IPHONE":
//Zeichne die Shell
varshadow = 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];//Den Bildschirm zeichnen
s.screenLayer. Graphics.drawRect(0," black",[s.deviceWidth/10,s.deviceWidth/10,s.deviceWidth*0.8,s.deviceHeight*0.8],true,"white");
//Zeichne die Home-Taste
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(){
return s.deviceWidth* 0,8;
};
Shape.prototype.getScreenHeight = function(){
var s = this;
Der letzte ist der Code in BootPage.js:

Kopieren Sie den Code

Der Code lautet wie folgt:

/*
* BootPage.js
**/
function BootPage(){
var s = this;
base(s,LSprite,[] );
s.x = 0;
s.y = 0;
s.sliderLayer = new LSprite(); .addWallPaper = function( bitmapdata){
var s = this; 🎜>};
BootPage.prototype.addTime = function(){
var s = this;
varshadow = new LDropShadowFilter(1,1,"black",8); addChild(s.timeLayer );
s.timeLayer.graphics.drawRect(0,"",[0,0,iosShape.getScreenWidth(),150],true,"black"); Zeittextbereich
s.timeLayer.alpha = 0.3;
s.timeText = new LTextField();
s.timeText.y = 20; >s.timeText.size = 50;
s.timeText.color = "white";
s.timeText.filters = [shadow]; >//Join-Datumstextbereich
s.dateText = new LTextField();
s.dateText.size = 20;
s.dateText.y = 100;
s.dateText.color = "white";
s.dateText.filters = [shadow]; timeText);
s.addChild(s.dateText);
//Datum durch Timeline-Ereignis aktualisieren
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 „Monat“ date.getDate() "day";
})
BootPage.prototype.addSlider = function(bitmapdata){
var s = this; >s.sliderLayer .graphics.drawRect(0,"",[0,iosShape.getScreenHeight()-100,iosShape.getScreenWidth(),100],true,"black");
s.sliderLayer.alpha = 0,3;
//Füge die Slider-Frame-Ebene hinzu
var barBorder = new LSprite();
barBorder.y = iosShape.getScreenHeight()-70; s.addChild( barBorder);
//Sliderbeschreibung hinzufügen
var moveBarCommont = new LTextField();
moveBarCommont.x = 80;
moveBarCommont.y = 10 ;
moveBarCommont.color = "white";
moveBarCommont.text = "Slide to unlock";
barBorder.addChild(moveBarCommont); bar = new LSprite();
bar.x = 35;
bar.y = iosShape.getScreenHeight()-70;
bar.canMoveBar = false;
//Mausklick und Maus hinzufügen Bewegung 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);
//Zeichne das Schiebereglerfeld
barBorder.graphics.drawRoundRect(2,"#191818",[0,0,250,40,5],true,"black" ) ;
barBorder.alpha = 0.7;
//Zeichne den Schieberegler
bar.graphics.drawRoundRect(2,"dimgray",[0,0,70,40,5],true,"lightgray ");
bar.alpha = 0.7;
};


Comme c'est juste pour mon propre divertissement, je n'entrerai pas dans les détails du code, je parlerai uniquement des utilisations de Shape.js et BootPage.js. Shape.js est la classe utilisée pour dessiner la coque de notre iPhone et BootPage.js est la classe de l'interface de démarrage. Les fonctions des deux sont différentes, ce qui équivaut à ce que Shape.js soit utilisé pour gérer l'apparence du matériel et que BootPage.js soit utilisé pour gérer l'affichage.
Je vous laisse le reste pour voir par vous-même. Même si le code est un peu long, il n'est pas logique. Lisez-le lentement ! Bien sûr, les étudiants qui ne comprennent pas ne connaissent peut-être pas lufylegend. Voici le site officiel du moteur :
http://lufylegend.com/lufylegend
Documentation de l'API du moteur :
http:/. /lufylegend.com /lufylegend/api
Pour les étudiants qui ont du mal à lire le code à l'aide des blogs CSDN, pourquoi ne pas utiliser votre éditeur pour ouvrir le code source et y jeter un œil. L'adresse de téléchargement du code source est la suivante : http://files.cnblogs.com/yorhom/iphone01.rar