Комментарий: Вы можете использовать HTML5 для подражания операционной системе Apple, чтобы сделать iOS, который может работать на веб -платформе. Давайте сегодня получим развлечения и начнем интерфейс загрузки. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Сегодня я внезапно подумал об использовании HTML5 для подражания операционной системе Apple для создания iOS, который может работать на веб -платформе.Конечно, я должен разработать операционную систему, и я расскажу об этом после того, как вернусь в горы еще на сотню лет практики. Давайте сегодня получим развлечения и начнем интерфейс загрузки.
Заполненные картинки:
Я обеспокоен тем, что изображение будет для меня, и я смогу напрямую ввести следующий адрес -тест:
Поскольку Lufylegend действительно хорошо упакована, эта разработка все еще делается с этим двигателем. Кода не так много, и заинтересованные друзья могут посмотреть напрямую.
Код в index.html:
<! Doctype html>
<html>
<голова>
<meta charset = "utf-8" />
<title> iPhone </title>
<script src = "./ lufylegend-1.7.7.min.js"> </script>
<script src = "./ js/main.js"> </script>
</head>
<тело>
<div> загрузка ... </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: "обои", path: "./ Images/wall_paper.jpg"}
];
var Datalist = {};
var Backlayer, Iphonelayer, Screenlayer, Buttonlayer;
var iosshape;
var bootpage;
функция main () {
Lload manage.load (LoadData, Null, GameInit);
}
Function Gameinit (результат) {
datalist = result;
// слой инициализации
initLayer ();
// Добавить чехол для iPhone
addShape ();
// Добавить в загрузочный интерфейс
addback ();
}
function initlayer () {
// фоновый слой
backlayer = new lsprite ();
AddChild (Backlayer);
}
функция addShape () {
iosshape = новая форма («iPhone», 400 600);
iosshape.x = 15;
iosshape.y = 5;
Backlayer.addchild (iosshape);
}
функция addback () {
bootpage = new BootPage ();
bootpage.x = 40;
Bootpage.y = 40;
var Wallpaperwidth = iosshape.getScreenWidth ();
var WallpaperHeight = iosshape.getScreenHeight ();
bootpage.addwallpaper (new lbitmapdata (datalist ["обои"], 200 480, Wallpaperwidth, WalpaperHeight));
bootpage.addtime ();
bootpage.addslider ();
iosshape.addchild (Bootpage);
}
Код в shape.js:
/*
* Shape.js
**/
форма функции (тип, ширина, высота) {
var s = это;
база (s, lsprite, []);
SX = 0;
sy = 0;
S.DeviceWidth = ширина;
S.DeviceHeight = высота;
s.type = type;
// корпус слой
s.shapelayer = new lsprite ();
S.Addchild (S.Shapelayer);
// Домашний слой кнопки
s.homebuttonlayer = new lsprite ();
S.Addchild (S.HomeButtonLayer);
// Слой экрана
s.screenlayer = new lsprite ();
S.Addchild (S.ScreenLayer);
// показать себя
s._showself ();
}
Shape.prototype._showself = function () {
var s = это;
Switch (s.type) {
Case "iPhone":
// Нарисуйте оболочку
var shadow = new ldropshadowfilter (15,45, "черный", 20);
s.shapelayer.graphics.drawroundrect (10, «черный», [0,0, S.DeviceWidth, S.DeviceHeight, 15], True, «Black»);
s.shapelayer.filters = [shadow];
// Нарисуйте экран
s.screenlayer.graphics.drawrect (0, «черный», [s.devicewidth/10, s.devicewidth/10, s.devicewidth*0,8, s.deviceheight*0,8], true, «белый»);
// Нарисуйте кнопку домой
s.homebuttonlayer.graphics.drawarc (1, «черный», [s.devicewidth/2, s.deviceheight*0,87 + s.devicewidth/10, s.devicewidth/16,0,2*Math.pi], True, «#191818»);
s.homebuttonlayer.graphics.drawroundrect (3, «белый», [s.devicewidth/2-10, s.deviceheight*0,87 + s.devicewidth/10 - 10,20,20,5]);
перерыв;
}
};
Shape.prototype.getScreenWidth = function () {
var s = это;
вернуть S.DeviceWidth*0,8;
};
Shape.prototype.getscreenheight = function () {
var s = это;
Вернуть S.DeviceHeight*0,8
};
Наконец, есть код в bootpage.js:
/*
* Bootpage.js
**/
function bootpage () {
var s = это;
база (s, lsprite, []);
SX = 0;
sy = 0;
S.TimeLayer = new LSPrite ();
s.sliderlayer = new lsprite ();
}
Bootpage.prototype.addwallpaper = function (bitmapdata) {
var s = это;
// Добавить фоновое изображение
s.wallape = new lbitmap (bitmapdata);
S.AddChild (S.Wallpaper);
};
Bootpage.prototype.addtime = function () {
var s = это;
var shadow = new Ldropshadowfilter (1,1, «черный», 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 = "белый";
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, функция (s) {
var date = new Date ();
if (date.getminutes () <10) {
if (date.gethours () <10) {
s.timetext.text = "0" + date.gethours () + ": 0" + date.getminutes ();
}еще{
s.timetext.text = date.gethours () + ": 0" + date.getminutes ();
}
}еще{
if (date.gethours () <10) {
s.timetext.text = "0" + date.gethours () + ":" + date.getminutes ();
}еще{
s.timetext.text = date.gethours () + ":" + date.getminutes ();
}
}
S.DateText.Text = date.getMonth () + 1 + "месяц" + date.getDate () + "day";
})
};
Bootpage.prototype.addslider = function (bitmapdata) {
var s = это;
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 = "Слайд для разблокировки";
Barborder.addchild (Movbarcommont);
// Добавить слой слайдера
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.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 (бар);
// Нарисуйте коробку слайдера
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. SHAME.JS - это класс, используемый для рисования нашей оболочки телефона iPhone, в то время как bootpage.js является классом для интерфейса загрузки. Функции двух различны, что эквивалентно форме. JS используется для обработки внешнего вида аппаратного обеспечения, а Bootpage.js используется для обработки дисплея.
Давайте оставим остальное, чтобы вы увидели. Хотя код немного длинный, он не логичен. Прочитайте это медленно! Конечно, студенты, которые не могут понять, могут не понять Lufylegend. Ниже приведен официальный сайт двигателя:
Документация по API двигателя:
Студенты, которые считают, что трудно читать коды с помощью блогов CSDN, не используйте свой редактор, чтобы открыть исходный код и увидеть адрес загрузки исходного кода следующим образом: