相思资源网 Design By www.200059.com
今天我突发其想，想到可以用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="/UploadFiles/2021-03-30/lufylegend-1.7.7.min.js"><script src="./js/Main.js"></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="/UploadFiles/2021-03-30/lufylegend-1.7.7.min.js"><script src="./js/Main.js"></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
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无Html5实现iPhone开机界面示例代码的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/9
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。