Html5实现iPhone开机界面示例代码
程序员文章站
2023-11-21 12:53:46
可以用Html5来仿照苹果操作系统做一个能在Web平台运行的ios，今天就先娱乐一下，先搞一个开机界面，感兴趣的朋友可以参考下哈，希望对大家有所帮助... 13-06-30...
今天我突发其想，想到可以用html5来仿照苹果操作系统做一个能在web平台运行的ios。
当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。
完工后的图片：
担心图片是被我ps后的同学可以直接进入下面的地址测试：
http://www.cnblogs.com/yorhom/articles/3163078.html
由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋友可以直接看一下。
index.html中的代码：
<!doctype html>
<html>
<head>
<meta charset="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.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;
//初始化层
initlayer();
//加入iphone外壳
addshape();
//加入开机界面
addback();
}
function initlayer(){
//背景层
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里的代码：
/*
* 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;
//外壳层
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._showself();
}
shape.prototype._showself = function(){
var s = this;
switch(s.type){
case "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.prototype.getscreenheight = function(){
var s = this;
return s.deviceheight*0.8
};
最后是bootpage.js里的代码：
/*
* 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;
//加入背景图片
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.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);
//通过时间轴事件更新日期
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.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 = false;
//加入鼠标点击和鼠标移动事件
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);
//画出滑块框
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
当然，要开发出一个操作系统，等我再归山修练一百年再说吧。今天就先娱乐一下，先搞一个开机界面。
完工后的图片：
担心图片是被我ps后的同学可以直接进入下面的地址测试：
http://www.cnblogs.com/yorhom/articles/3163078.html
由于lufylegend封装得的确不错，本次开发还是用该引擎做的。代码不多，感兴趣的朋友可以直接看一下。
index.html中的代码：
复制代码
代码如下:<!doctype html>
<html>
<head>
<meta charset="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.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;
//初始化层
initlayer();
//加入iphone外壳
addshape();
//加入开机界面
addback();
}
function initlayer(){
//背景层
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里的代码：
复制代码
代码如下:/*
* 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;
//外壳层
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._showself();
}
shape.prototype._showself = function(){
var s = this;
switch(s.type){
case "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.prototype.getscreenheight = function(){
var s = this;
return s.deviceheight*0.8
};
最后是bootpage.js里的代码：
复制代码
代码如下:/*
* 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;
//加入背景图片
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.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);
//通过时间轴事件更新日期
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.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 = false;
//加入鼠标点击和鼠标移动事件
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);
//画出滑块框
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