<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作业</title> <!--导入jQuery框架--> <script src="jQuery/jquery-3.1.0.min.js"></script> <script src="javascript/index.js" type="text/javascript"></script> <link href="css/index.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="bground"> <div class="time"> <button class="start">开始</button> <button class="stop">停止</button> <div class="count">0</div> </div> <div class="content"> <div class="left"> <button class="btn">x</button> </div> <div class="center"> <h3>静夜思</h3> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </div> <div class="right"> <img src="images/内网通截图20161110180030.png"/> <button class="button">x</button> </div> </div> <div id="bm"> © by LF </div> </div> </body> </html>
body{ background-color: deepskyblue; } #bground{ /*background: yellow;*/ position: relative; height: 1000px; width: 100%; } #bground .content{ /*background: red;*/ position: relative; height: auto; } #bground .count{ /*background: white;*/ margin-left: 10px; margin-top: 15px; text-align: center; font-size: 65px; color: red; width: 100px; height: 60px; line-height: 50px; } #bground .content .left{ background-color: deeppink; position: relative; /*opacity: 0.5;*/ display: inline-block; width: 150px; height: 300px; left: 30px; top: 200px; } #bground .content .left button{ position: absolute; right: 2px; top: 2px; } #bground .content .center{ background: greenyellow; position: absolute; display: inline-block; width: 300px; height: 600px; /*margin-top: 50px; margin-left: 22%;*/ left: 35%; top: 50px; text-align: center; } #bground .content .center h3{ /*background: red;*/ padding-top: 60px; } #bground .content .right{ display: inline-block; position: fixed; right: 10px; top: 120px; width: 120px; height: 200px; } #bground .content .right img{ width: 100%; height: 100%; } #bground .content .right button{ position: absolute; left: 2px; top: 2px; } #bground #bm{ background-color: chocolate; position: absolute; opacity: 0.8; left: 25%; bottom: 50px; width: 50%; height: auto; text-align: center; }
/* * jQuery的简单使用 */ $(document).ready(function(){ /* * $('.btn')获取类名为btn的标签 * click()为点击事件 */ $('.btn').click(function(){ //隐藏标签 $('.btn').hide('slow'); // 慢慢淡出直达消失 $('.left').fadeOut('slow'); }) $('.button').click(function(){ $('.button').hide('slow'); // 标签往上收直到消失 $('.right').slideUp('slow'); }) // 设置定时器 var interval = setInterval("countFuntion()",1000); $('.start').click(function(){ if(interval ){ clearInterval(interval); interval = null; } interval = setInterval(countFuntion,1000); // 定时器执行的方法 function countFuntion(){ var num = $('.count').html(); num ++; $('.count').html(num); } }); /* * 停止定时器 */ $('.stop').click(function(){ if(interval){ clearInterval(interval); interval = null; } }); });