<ol id="ebnk9"></ol> 
下載文檔獲取完整
要求：在本文檔中的題目下作答，在所寫的代碼下面粘貼運行后的網頁截圖，提交本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 || start == 0) step *= -1; start += step; setTimeout("count()",1000); } 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: #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", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; text-align: center; } h1, p { padding:0; margin:0; } .wrapper { width: 350px; margin: 200px auto; } .wrapper p a {color:#757575; text-decoration:none;} .wrapper .load-bar { width: 100%; height: 25px; border-radius: 30px; background: #dcdbd7; position: relative;
box-shadow: 0 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 #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: inset 0 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 #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: 5px 10px; 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; } .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: 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> <h1>Loading</h1> </div>
<script type="text/javascript">
$(function(){ var interval = setInterval(increment,100); var current = 0; function increment(){ current++; $("#counter").html(current+"%"); if(current == 100) { current = 0; } } $(".load-bar").mouseover(function(){ clearInterval(interval); }).mouseout(function(){ interval = setInterval(increment,100); }); });
</script> </body> </html>
<ol id="ebnk9"></ol>