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

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

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

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;

/script>

divid="

/div>

/body>

/html>

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

styletype="

text/css"

*{

box-sizing:

border-box;

html{height:

100%;

body{

background:

#efeeea;

linear-gradient（#f9f9f9,#cecbc4）;

background:

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

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

-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:

.wrapper{width:

350px;

margin:

200pxauto;

.wrapperpa{color:

#757575;

text-decoration:

none;

.wrapper.load-bar{width:

100%;

height:

25px;

border-radius:

30px;

#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:

-o-animation-play-state:

-webkit-animation-play-state:

.wrapper.load-bar-inner{height:

99%;

width:

0%;

inherit;

#c2d7ac;

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

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

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

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

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

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

animation:

loader 10slinearinfinite;

-moz-animation:

-webkit-animation:

-o-animation:

.wrapper#counter{position:

absolute;

#eeeff3;

linear-gradient（#eeeff3,#cbcbd3）;

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

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

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

padding:

5px10px;

0.4em;

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;

counter10slinearinfinite;

.wrapper#counter:

after{content:

"

;

position:

8px;

8px;

#cbcbd3;

transform:

rotate（45deg）;

-moz-transform:

-webkit-transform:

-o-transform:

50%;

margin-left:

-4px;

bottom:

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

003px0;

.wrapperh1{font-size:

28px;

20px08px0;

.wrapperp{font-size:

13px;

@keyframesloader{from{

to{

@-moz-keyframesloader{from{

@-webkit-keyframesloader{from{

@-o-keyframesloader{from{

@keyframescounter{from{

left:

323px;

@-moz-keyframescounter{from{

@-webkit-keyframescounter{from{

@-o-keyframescounter{from{

/style>

scriptsrc="

js/jquery-2.2.0.min.js"

type="

text/javascript"

charset="

js/jquery.js"

utf-8"

divclass="

wrapper"

divclass="

load-bar"

load-bar-inner"

data-loading="

0"

<

spanid="

counter"

/span>

h1>

Loading<

/h1>

scripttype="

$（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）;

}）;