东师《Web前端综合案例开发》离线作业,2

2022-06-15 15:29:23 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《东师《Web前端综合案例开发》离线作业,2》，欢迎阅读！
前端,作业,案例,开发,综合
本文格式为Word版，下载可任意编辑，页眉双击删除即可。

|| start == 0) step *= -1; start += step; setTimeout(count(),1000); }

东师《Web前端综合案例开发》离线作业,2

下载文档猎取完好

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

小 A 是大四的学生，还有半年就要毕业了，就要跟她暗恋了三年的女神分开了。马上就是女神的生日，他想送给女神一个礼物，能让女神快乐并记住他的特殊礼物。他想到了电子相册，一个秀丽的网页版电子相册，因为他可以从班级网上找到女神的靓照。上一次制作的网页，女神收到礼物后跟小 A 说她很快乐，小 A 也特别高兴，觉得还应当在网页上增加一些小详情，来让女神感受到自己的心意。

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

!DOCTYPE html html head meta charset=utf-8 title倒计时/title /head body

script var start = 5; var step = 1; function count() { document.getElementById(div1).innerHTML = start; if(start == 5

window.onload = count; /script div id=div1/div /body /html /html 2. 倒计时做成百分比进度条的样式，可以是彩色的，女神肯定会喜爱的。

!DOCTYPE html html head meta charset=utf-8 title倒计时/title style type=text/css

* { box-sizing: border-box; } html { height: 100%; } body { background: ; margin:0; } .wrapper { width: 350px; margin: 200px auto; } .wrapper p a {color:0%; height: 25px; border-radius: 30px; background: 1px 0 rgba(255, 255, 255, 0.8), inset 0 2px 3px rgba(0, 0, 0,

0.2); } .wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover %; border-radius: inherit; position: relative; background: f6c8, f6c8, f6c8, f6c8, 1px 0 rgba(255, 255, 255, 1), 0 1px 5px rgba(0, 0, 0, 0.3), 0 4px 5px rgba(0, 0, 0, 0.3); animation: loader 10s linear infinite; -moz-animation: loader 10s linear

第 1 页共 3 页

本文格式为Word版，下载可任意编辑，页眉双击删除即可。

infinite; -webkit-animation: loader 10s linear infinite; -o-animation: loader 10s linear infinite; } .wrapper px;

@keyframes counter { from { left: -25px; } to { left: 323px; } } @-moz-keyframes counter { from { left: -25px; } to { left: 323px; } }

border-radius: 0.4em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, @-webkit-keyframes counter { from {

1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, left: -25px; } to { left: 323px; } } @-o-keyframes counter { from 0.1); left: -25px; top: -50px; font-size: 12px; font-weight: bold; { left: -25px; } to { left: 323px; } } /style script width: 44px; animation: counter 10s linear infinite;

-moz-animation: counter 10s linear infinite; -webkit-animation: counter 10s linear infinite; -o-animation: counter 10s linear infinite; } .wrapper %; margin-left: -4px; bottom: -4px;

src=js/jquery-2.2.0.min.js type=text/javascript charset=utf-8/script script src=js/jquery.js

type=text/javascript charset=utf-8/script /head body

div class=wrapper div class=load-bar div class=load-bar-inner

box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, data-loading=0 span id=counter/span /div /div h1Loading/h1 /div 0, 0, 0.1); border-radius: 0 0 3px 0; } .wrapper h1 { font-size: script type=text/javascript 28px; padding: 20px 0 8px 0; } .wrapper p { font-size: 13px; } @keyframes loader { from { width: 0%; } to { width: 100%; } }

$(function(){ var interval = setInterval(increment,100); var current = 0; function increment(){ current++; $("0) { current = 0; } }

@-moz-keyframes loader { from { width: 0%; } to { width: 100%; } } $(".load-bar").mouseover(function(){ clearInterval(interval); }@-webkit-keyframes loader { from { width: 0%; } to { width: 100%; } } ).mouseout(function(){ interval = @-o-keyframes loader { from { width: 0%; } to { width: 100%; } } setInterval(increment,100); }; };

第 2 页共 3 页

本文格式为Word版，下载可任意编辑，页眉双击删除即可。

/script /body /html

第 3 页共 3 页