Html5实现iPhone开机界面示例代码

更新时间:2023-04-06 17:22:57 阅读：评论：0

今天我突发其想，想到可以用html5来仿照苹果操作系统做一个能在web平台运行的ios。

当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。

完工后的图片：

担心图片是被我ps后的同学可以直接进入下面的地址测试：

/d/file/titlepic/3163078.html />
由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋友可以直接看一下。

index.html中的代码：

复制代码代码如下:

<!doctype html>

<html>

<head>

<meta chart=”utf-8″ />

<title>iphone</title>

<script src=”./lufylegend-1.7.7.min.js”></script>

<script src=”./js/main.js”></script>

</head>

<body>

<div id=”mylegend”>loading……</div>

</body>

</html>

main.js中的代码：

复制代码代码如下:

init(50,”mylegend”,450,640,main);

lglobal.tdebug(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;

//初始化层

initlayer();

//加入iphone外壳

addshape();

//加入开机界面

addback();

}

function initlayer(){

//背景层

backlayer = new lsprite();

addchild(backlayer);

}

function addsha客家酿酒pe(){

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里的代码：

复制代码代码如下:

/*

* shape.js

**/

function shape(type,width,height){

var s = this;

ba(s,lsprite,[]);

s.x = 0;

s.y = 0;

s.devicewidth = width;

s.deviceheight = height;

s.type = type;

//外壳层

s.shapelayer = new lsprite();

s.addchild(s.shapelayer);

//home按钮层

s.homebuttonlayer = new lsprite();

s.addchild(s.homebuttonlayer);

//屏幕层

s.screenlayer = new lsprite();

s.addchild(s.screenlayer);

//显示自身

s._showlf();

}

shape.prototype._showlf = function(){

var s = this;

switch(s.type){

ca “iphone”:

//画外壳

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];

//画屏幕

s.screenlayer.graphics.drawrect(0,”black”,[s.devicewidth/10,s.devicewidth/10,s.devicewidth*0.8,s.deviceheight*0.8],true,”white”);

//画home按钮

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.protot父亲的英文单词ype.getscreenheight = function(){

var s = this;

return s.deviceheight*0.8

};

最后是bootpage.js里的代码：

复制代码代码如下:

/*

* bootpage.js

**/

function bootpage(){

var s = this;

ba(s,lsprite,[]);

s.x = 0;

s.y = 0;

s.timelayer = new lsprite();

s.sliderlayer = new lsprite();

}

bootpage.prototype.addwallpaper = function(bitmapdata){

var s = this;

//加入背景图片

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”);

//加入时间文本区

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];

//加入日期文本区

s.da"致富项目 "tetext = 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);

//通过时间轴事件更新日期

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();

}el{

s.timetext.text = date.gethours() + “:0” + date.getminutes();

}

}el{

if(date.gethours() < 10){

s.timetext.text = “0” + date.gethours() + “:” + date.getminutes();

}el{

s.timetext.text = date.gethours() + “:” + date.getminutes();

}

}

s.datetext.text = date.getmonth() + 1 + “月” + date.getdate() + “日”;

})

};

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;

//加入滑块框层

var barborder = new lsprite();

barborder.x = 35;

barborder.y = iosshape.getscreenheight()-70;

s.addchild(barborder);

//加入滑块说明文字

var movebarcommont = new ltextfield();

movebarcommont.size = 12;

movebarcommont.x = 80;

movebarcommont.y = 10;

movebarcommont.color = “white”;

movebarcommont.text = “slide to unlock.”;

barborder.addchild(movebarcommont);

//加入滑块层

var bar = new lsprite();

bar.x = 35;

bar.y = iosshape.getscreenheight()-70;

bar.canmovebar = fal;

//加入鼠标点击和鼠标移动事件

bar.addeventlistener(lmouevent.mou_down,function(event,s){

s.canmovebar = true;

});

bar.addeventlistener(lmouevent.mou_up,function(event,s){

l励志的话语tweenlite.to(bar,0.5,{

x:35,

oncomplete:function(s){

s.canmovebar = fal;

}

});

s.canmovebar = fal;

});

s.addchild(bar);

bar.addeventlistener(双减政策解读lmouevent.mou_out,function(event,s){

ltweenlite.to(bar,0.5,{

x:35,

oncomplete:function(s){

s.canmovebar = fal;

}

});

s.canmovebar = fal;

});

s.addeventlistener(lmouevent.mou_move,function(event){

if(bar.canmovebar == true){

bar.x = event.offtx – 70;

if(bar.x > 215){bar.x = 215;}

if(bar.x < 35){bar.x = 35;}

}

});

s.addchild(bar);

//画出滑块框

barborder.graphics.drawroundrect(2,”#191818″,[0,0,250,40,5],true,”black”);

barborder.alpha = 0.7;

//画出滑块

bar.graphics.drawroundrect(2,”dimgray”,[0,0,70,40,5],true,”lightgray”);

bar.alpha = 0.7;

};

由于本次是偶自娱自乐，所以代码就不多讲了，只讲一下shape.js和bootpage.js的用途。shape.js是用来绘画我们iphone手机外壳用的类，而bootpage.js是开机界面的类。两者的功能不同，相当于shape.js用来处理硬件外观，bootpage.js用来处理显示。

其他的就留个大家自己看吧。虽然代码有点长，但是都不带逻辑性。慢慢读就ok！当然，读不懂的同学可能是没有了解过lufylegend，以下是引擎官方的网站：

http://lufylegend.com/lufylegend

引擎api文档：

http://lufylegend.com/lufylegend/api

觉得用csdn博客阅读代码有些困难的同学，不仿用你的编辑器打开源代码看看，源代码下载地址如下：

http://files.cnblogs.com/yorhom/iphone01.rar