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>
jquery框架定义
<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;
}
});
});

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