书签分享收藏举报版权申诉 / 5

立即下载加入VIP,免费下载

当前位置：首页 > 求职职场 > 简历 > 东师20《Web前端综合案例开发》离线作业2答案.docx

东师20《Web前端综合案例开发》离线作业2答案.docx

文档编号：110242
上传时间：2023-04-28
格式：DOCX
页数：5
大小：21.11KB

《东师20《Web前端综合案例开发》离线作业2答案.docx》由会员分享，可在线阅读，更多相关《东师20《Web前端综合案例开发》离线作业2答案.docx（5页珍藏版）》请在冰点文库上搜索。

东师20《Web前端综合案例开发》离线作业2答案.docx

要求：

在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本

word文档即可。

小A是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。

马上就是女神的生日，他想送给女神一个礼物，能让女神开心并记住他的特别礼物。

他想到了电子相册，一个漂亮的网页版电子相册，因为他可以从班级网上找到女神的靓照。

上一次制作的网页，女神收到礼物后跟小A说她很开心，小A也非常高兴，觉得还应该在网页上增加一些小细节，来让女神感受到自己的心意。

1.加一个播放时的数字倒计时，倒计时完了还有下一张，时间永远都用不完。

DOCTYPEhtml>

倒计时

< script>varstart=5;varstep=1;functioncount（）

{

document.getElementById（"div1"）.innerHTML=start;if（start==5||start==0）

step*=-1;start+=step;

setTimeout（"count（）",1000）;

}

window.onload=count;

2.倒计时做成百分比进度条的样式，可以是彩色的，女神一定会喜欢的。

DOCTYPEhtml>

倒计时

*{

box-sizing:

border-box;

}

html{height:

100%;

}

body{

background:

#efeeea;

background:

linear-gradient（#f9f9f9,#cecbc4）;background:

-moz-linear-gradient（#f9f9f9,#cecbc4）;background:

-webkit-linear-gradient（#f9f9f9,#cecbc4）;background:

-o-linear-gradient（#f9f9f9,#cecbc4）;color:

#757575;

font-family:

"HelveticaNeue-Light","HelveticaNeueLight","HelveticaNeue",Helvetica,Arial,"LucidaGrande",sans-serif;text-align:

center;

}

h1,p{

padding:

0;margin:

0;

}

.wrapper{width:

350px;

margin:

200pxauto;

}

.wrapperpa{color:

#757575;text-decoration:

none;}

.wrapper.load-bar{width:

100%;height:

25px;

border-radius:

30px;background:

#dcdbd7;position:

relative;

box-shadow:

01px0rgba（255,255,255,0.8）,inset02px3pxrgba（0,

0,0,0.2）;

}

.wrapper.load-bar:

hover.load-bar-inner,.wrapper.load-bar:

hover#counter{

animation-play-state:

paused;

-moz-animation-play-state:

paused;

-o-animation-play-state:

paused;

-webkit-animation-play-state:

paused;

}

.wrapper.load-bar-inner{height:

99%;

width:

0%;

border-radius:

inherit;position:

relative;background:

#c2d7ac;

background:

linear-gradient（#e0f6c8,#98ad84）;

background:

-moz-linear-gradient（#e0f6c8,#98ad84）;background:

-webkit-linear-gradient（#e0f6c8,#98ad84）;background:

-o-linear-gradient（#e0f6c8,#98ad84）;

box-shadow:

inset01px0rgba（255,255,255,1）,01px5pxrgba（0,

0,0,0.3）,04px5pxrgba（0,0,0,0.3）;

animation:

loader 10slinearinfinite;

-moz-animation:

loader 10slinearinfinite;

-webkit-animation:

loader 10slinearinfinite;

-o-animation:

loader 10slinearinfinite;

}

.wrapper#counter{position:

absolute;background:

#eeeff3;

background:

linear-gradient（#eeeff3,#cbcbd3）;background:

-moz-linear-gradient（#eeeff3,#cbcbd3）;background:

-webkit-linear-gradient（#eeeff3,#cbcbd3）;background:

-o-linear-gradient（#eeeff3,#cbcbd3）;padding:

5px10px;

border-radius:

0.4em;

box-shadow:

inset01px0rgba（255,255,255,1）,02px4px1px

rgba（0,0,0,0.2）,01px3px1pxrgba（0,0,0,0.1）;left:

-25px;

top:

-50px;

font-size:

12px;font-weight:

bold;width:

44px;

animation:

counter10slinearinfinite;

-moz-animation:

counter10slinearinfinite;

-webkit-animation:

counter10slinearinfinite;

-o-animation:

counter10slinearinfinite;

}

.wrapper#counter:

after{content:

"";

position:

absolute;width:

8px;height:

8px;

background:

#cbcbd3;transform:

rotate（45deg）;

-moz-transform:

rotate（45deg）;

-webkit-transform:

rotate（45deg）;

-o-transform:

rotate（45deg）;left:

50%;

margin-left:

-4px;bottom:

-4px;

box-shadow:

3px3px4pxrgba（0,0,0,0.2）,1px1px1px1pxrgba（0,0,0,0.1）;

border-radius:

003px0;

}

.wrapperh1{font-size:

28px;

padding:

20px08px0;

}

.wrapperp{font-size:

13px;

}

@keyframesloader{from{

width:

0%;

}

to{

width:

100%;

}

@-moz-keyframesloader{from{

width:

0%;

}

to{

width:

100%;

}

@-webkit-keyframesloader{from{

width:

0%;

}

to{

width:

100%;

}

@-o-keyframesloader{from{

width:

0%;

}

to{

width:

100%;

}

@keyframescounter{from{

left:

-25px;

}

to{

left:

323px;

}

@-moz-keyframescounter{from{

left:

-25px;

}

to{

left:

323px;

}

@-webkit-keyframescounter{from{

left:

-25px;

}

to{

left:

323px;

}

@-o-keyframescounter{from{

left:

-25px;

}

to{

left:

323px;

}

< divclass="wrapper">

Loading

$（function（）{

varinterval=setInterval（increment,100）;varcurrent=0;

functionincrement（）{current++;

$（'#counter'）.html（current+'%'）;if（current==100）{current=0;}

}

$（'.load-bar'）.mouseover（function（）{clearInterval（interval）;

}）.mouseout（function（）{

interval=setInterval（increment,100）;

}）;

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: Web前端综合案例开发东师 20 Web 前端综合案例开发离线作业答案

冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：东师20《Web前端综合案例开发》离线作业2答案.docx
链接地址：https://www.bingdoc.com/p-110242.html

东师20《Web前端综合案例开发》离线作业2答案.docx

Loading

热门标签