逛天猫时候突然想做一个和付款后温馨提示那个见面一样的button键功能(5秒后才可以点击关闭),就用jQuery试下了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提醒5秒后开启确认</title>
<script src="js/jquery-2.1.3.min.js"></script>
</head>
<style type="text/css">
div{
width:
400px;
height:
200px;
display:
block;
background-color:
#CCC;
margin:
0 auto;
position:
relative
}
.btn {
width:
100px;
position:
absolute;
bottom:
1px;
left:
36%;
}
</style>
<body>
<div>
<button class="btn">关闭(5)</button>
</div>
</body>
<script type="text/javascript">
<span style="color:#009900;">//ready()</span>
$(document).ready(function() {
<span style="color:#009900;">//设置button不可视,鼠标为繁忙图标</span>
$(".btn").attr("disabled","disabled").css("cursor","wait");
<span style="color:#009900;">//页面加载时调用函数,5秒倒计时</span>
window.onload =function() {
var i =4;
<span style="color:#009900;">//setInterval() 方法会不停地调用函数</span>
setInterval(function(){
if(i == 0) {
<span style="color:#009900;"> //倒计时结束</span>
$(".btn").html("关闭");
return;
}
//倒计时
$(".btn").html("关闭(" + i +")" );
//i--是为了html()中可以显示秒数倒计时
i--;
<span style="color:#009900;">//而真正倒计时的是下面的1000
//1000表示每1000毫秒(1秒)执行一次函数
//所以也代表了i每1秒就会减一</span>
},1000);
};
//5000毫秒(5秒)后执行函数
setTimeout(function(){
<span style="color:#009900;"> //函数内包括去除button的不可视属性
//和把鼠标变回原样</span>
$(".btn").removeAttr("disabled");
$(".btn").css("cursor","default");
}
,5000);
});
</script>
</html>
注释上面都有了,收获是:对于position的relative和absolute
我的理解是这样的:
1. 什么时候<div>里面的<button>是怎么都离不开<div>的框框呢?
是当<div>的position被设置为relative的时候
2. 为什么margin:0 auto; 不会居中?
上面的例子而言,<div>的父类是<body> 子类是<button> ,也就是body > div > button ,而对于positon属性,relative被译为关联(关系)
如果position:relative,说明这个标签是和父类有关联的,他的位置是相对于父类而言,所以margin:0 auto; 不会居中有2个原因
第一是你的position:relative; 但是除了margin:0 auto; 还设置了top , left等。
第二是你的position:absolute;这是抛弃了父类的设置,这样一来标签的位置不能用auto这样的数值,要具体数据才可以移动标签
而且当position:absolute;其实可以看作默认父类是body,也就是整个窗口,所以就等于通过top padding的数据去设置标签位置
(如有不对,欢迎指出!)