东师《Web前端综合案例开发》离线作业,2
  下载文档猎取完好
    要求：在本文档中的题目下作答，在所写的代码下面粘贴运行后的网页截图，提交本word 文档即可。
web前端开发笔试题库  小 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() { ElementById(div1).innerHTML = start; if(start == 5 || start == 0) step *= -1; start += step; setTimeout(count(),1000); } load = count; /script div id=div1/div /bo
dy /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 infinite; -webkit-animation: loader 10s linear infinite; -o-animation: loader 10s linear infinite; } .wrapper px; border-radius: 0.4em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 2px 4px 1px rgba(0, 0, 0, 0.2), 0 1px 3px 1px rgba(0, 0, 0, 0.1); left: -25px; top: -50px; font-size: 12px; font-weight: bold; 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; } .wr
apper %; margin-left: -4px; bottom: -4px; 
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2), 1px 1px 1px 1px rgba(0, 0, 0, 0.1); border-radius: 0 0 3px 0; } .wrapper h1 { font-size: 28px; padding: 20px 0 8px 0; } .wrapper p { font-size: 13px; } @keyframes loader { from { width: 0%; } to { width: 100%; } } @-moz-keyframes loader { from { width: 0%; } to { width: 100%; } } @-webkit-keyframes loader { from { width: 0%; } to { width: 100%; } } @-o-keyframes loader { from { width: 0%; } to { width: 100%; } } @keyframes counter { from { left: -25px; } to { left: 323px; } } @-moz-keyframes counter { from { left: -25px; } to { left: 323px; } } @-webkit-keyframes counter { from { 
  left: -25px; } to { left: 323px; } } @-o-keyframes counter { from { left: -25px; } to { left: 323px; } } /style script 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 data-loading=0 span id=counter/span /div /div h1Loading/h1 /div
  script type=text/javascript
  $(function(){ var interval = setInterval(increment,100); var current = 0; function increment(){ current++; $("0) { current = 0; } } $(".load-bar").mouseover(function(){ clearInterval(interval); }).mouseout(function(){ interval = setInterval(increment,100); }); });
  /script /body /html
   

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。