【iPhone】用Html5实现iPhone开机界面的示例代码-代码

欢迎您访问52ij手机之家，今天小编为你分享的手机知识是：【用Html5实现iPhone开机界面的示例代码】，请阅读以下详细内容！

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

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开机界面的示例代码的用户互动如下：

　　相关问题：如何实现html5页面，自动提示添加到主屏幕

　　答：添加图标到主屏幕是Web App的第一步： 添加图标到屏幕里的有两种属性值apple-touch-icon和apple-touch-icon-precomposed，区别就在于是否会应用iOS中自动给图标添加的那层高光。 由于iPhone以及iPad都有两种分辨率的设备存在，图标的尺寸就需要... >>详细

　　相关问题：HTML5用canvas怎么实现动画效果

　　答：主要思想： 首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。 关键技术点： JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法， 另外一... >>详细

　　相关问题：如何实现html5页面，自动提示添加到主屏幕

　　答：虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。 既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。 添加图标到主屏幕是Web App的第... >>详细