扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Html5中怎么实现一个iPhone开机界面
  • 372

0
分享到

Html5中怎么实现一个iPhone开机界面

2024-04-02 19:04:59 372人浏览 八月长安
摘要

HTML5中怎么实现一个iPhone开机界面，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。index.html代码<!DOCTYPE h

HTML5中怎么实现一个iPhone开机界面，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

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

代码如下:



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

代码如下:



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

看完上述内容，你们掌握Html5中怎么实现一个iPhone开机界面的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网JavaScript频道，感谢各位的阅读！

--结束END--

本文标题: Html5中怎么实现一个iPhone开机界面

本文链接: https://lsjlt.com/news/67756.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Html5中怎么实现一个iPhone开机界面
    Html5中怎么实现一个iPhone开机界面，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。index.html代码<!DOCTYPE h...
    99+
    2024-04-02
  • Android中怎么实现右滑返回上一个界面
    今天就跟大家聊聊有关Android中怎么实现右滑返回上一个界面，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。Android右滑返回上一个界面的实现方法public clas...
    99+
    2023-05-30
    android
  • Android项目中怎么实现一个可拖拽界面
    本篇文章为大家展示了Android项目中怎么实现一个可拖拽界面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。以自定义ImageView为例：public class FloatingImageVie...
    99+
    2023-05-31
    android roi 目中
  • 怎么在Html5页面中使用JSON实现一个动画
    今天就跟大家聊聊有关怎么在Html5页面中使用JSON实现一个动画，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.demo.html里面有很多内联的东西，使用时堆积在页面内不好看仔...
    99+
    2023-06-09
  • 怎么在HTML5页面中实现一个音乐播放器
    这篇文章给大家介绍怎么在HTML5页面中实现一个音乐播放器，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。<audio id="music1">浏览器不支持audio标签<...
    99+
    2023-06-09
  • 怎么在Android中使用Kotlin实现一个登录界面
    怎么在Android中使用Kotlin实现一个登录界面？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。登录界面代码如下：class LoginActiv...
    99+
    2023-05-30
    android kotlin
  • HTML5中怎么实现一个拖放效果
    这篇文章给大家介绍HTML5中怎么实现一个拖放效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。先看html核心代码: 代码如下:<div> <p>把黄色小方块...
    99+
    2024-04-02
  • 使用PYQT5怎么实现一个界面嵌套功能
    这篇文章给大家介绍使用PYQT5怎么实现一个界面嵌套功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。简单演示下：首先主界面界面：在Form处设置下水平布局，就如下图：左右两侧分别是一个frame控件，左侧frame里...
    99+
    2023-06-08
  • 怎么在html5中实现一个时钟功能
    这期内容当中小编将会给大家带来有关怎么在html5中实现一个时钟功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。<!DOCTYPE HTML><html><hea...
    99+
    2023-06-09
  • HTML5中怎么制作一个注册页面
    本篇文章为大家展示了HTML5中怎么制作一个注册页面，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。<!DOCTYPE html> <ht...
    99+
    2024-04-02
  • 在ubuntu中，如何开机自启动一个有界面程序
    有多种方法可以开机自启动一个有界面程序，以下是其中两种常用的方法： 方法一：使用gnome-session-properties 打开终端，输入命令：gnome-session-properties，打开“启动应用程序首选项”窗口。 点...
    99+
    2023-09-04
    ubuntu 服务器 linux
  • 怎么Android应用中实现一个APP显示界面滑动优化
    这篇文章将为大家详细讲解有关怎么Android应用中实现一个APP显示界面滑动优化，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。1、界面布局<xml version=&quo...
    99+
    2023-05-31
    android pp roi
  • 怎么在Android应用中实现一个跳转到主界面功能
    怎么在Android应用中实现一个跳转到主界面功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。//homeIntent intent= new Intent(Intent.A...
    99+
    2023-05-31
    android roi
  • 基于HTML5的WebGL如何实现json和echarts图表展现在同一个界面
    这篇文章主要介绍了基于HTML5的WebGL如何实现json和echarts图表展现在同一个界面，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下...
    99+
    2024-04-02
  • 怎么在HTML5中实现一个3D旋转相册
    今天就跟大家聊聊有关怎么在HTML5中实现一个3D旋转相册，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。HTML5 代码如下：<!DOCTYPE html>&l...
    99+
    2023-06-09
  • HTML5 中怎么实现一个3D网络拓扑树
    这篇文章给大家介绍 HTML5 中怎么实现一个3D网络拓扑树，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。 创建一个树状结构有了解过HT for Web的朋友，对树状结构数据的创建应该都不陌生，在这里我就不做深入的探讨...
    99+
    2023-06-17
  • 怎么在Html5中实现一个剪切板功能
    这期内容当中小编将会给大家带来有关怎么在Html5中实现一个剪切板功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.不带input输入框的原生js方法这种情况适用于复制非输入框中的文本到剪切板&nbs...
    99+
    2023-06-09
  • 如何在Android界面中实现一个回弹效果
    这篇文章给大家介绍如何在Android界面中实现一个回弹效果，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。具体代码如下所示：public class MyScrollView extends ScrollView { ...
    99+
    2023-05-31
    android roi %d
  • 怎么在Html5中实现手机摇一摇事件
    怎么在Html5中实现手机摇一摇事件？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。<template>  <div id=&...
    99+
    2023-06-09
  • Python中怎么创建一个命令行界面
    这篇文章将为大家详细讲解有关Python中怎么创建一个命令行界面，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。通过创建命令行界面(CLI)，可以使程序功能强大并具有交互性。CLI允许您接受命...
    99+
    2023-06-16
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作