當前位置：
首頁 >
jQuery框架的简单使用（H5）
發布時間：2025/3/20
39
豆豆
生活随笔
收集整理的這篇文章主要介紹了
jQuery框架的简单使用（H5）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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;}});
});
?
轉載于:https://www.cnblogs.com/lantu1989/p/6053330.html
總結
以上是生活随笔為你收集整理的jQuery框架的简单使用（H5）的全部內容，希望文章能夠幫你解決所遇到的問題。
