jQuery框架的简单使用（H5）
生活随笔
收集整理的這篇文章主要介紹了
jQuery框架的简单使用（H5）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>作業(yè)</title><!--導(dǎo)入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">開(kāi)始</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>低頭思故鄉(xiāng)。</p></div><div class="right"><img src="images/內(nèi)網(wǎng)通截圖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的簡(jiǎn)單使用*/
$(document).ready(function(){/** $('.btn')獲取類(lèi)名為btn的標(biāo)簽* click()為點(diǎn)擊事件*/ $('.btn').click(function(){//隱藏標(biāo)簽$('.btn').hide('slow');// 慢慢淡出直達(dá)消失$('.left').fadeOut('slow');})$('.button').click(function(){$('.button').hide('slow');// 標(biāo)簽往上收直到消失$('.right').slideUp('slow');})// 設(shè)置定時(shí)器var interval = setInterval("countFuntion()",1000);$('.start').click(function(){if(interval ){clearInterval(interval);interval = null;}interval = setInterval(countFuntion,1000);// 定時(shí)器執(zhí)行的方法function countFuntion(){var num = $('.count').html();num ++;$('.count').html(num);}});/** 停止定時(shí)器*/$('.stop').click(function(){if(interval){clearInterval(interval);interval = null;}});
});
?
轉(zhuǎn)載于:https://www.cnblogs.com/lantu1989/p/6053330.html
總結(jié)
以上是生活随笔為你收集整理的jQuery框架的简单使用（H5）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： bash快捷建
- 下一篇： Caffe学习系列(13):对训练好的模