【jQuery应用】5秒后释放button键，position的relative和absolute心得

来源：互联网发布：无间道天台对白知乎编辑：程序博客网时间：2024/06/05 08:02

逛天猫时候突然想做一个和付款后温馨提示那个见面一样的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的数据去设置标签位置

（如有不对，欢迎指出！）

0 0