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

最新推荐文章于 2022-05-13 15:45:00 发布

早起早睡的少年郎

最新推荐文章于 2022-05-13 15:45:00 发布

阅读量1.4k

点赞数

分类专栏： jQuery应用文章标签： jquery position relative absolute

本文链接：https://blog.csdn.net/reusli/article/details/48549919

版权

jQuery应用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
【jQuery应用】5秒后释放button键，position的relative和absolute心得

逛天猫时候突然想做一个和付款后温馨提示那个见面一样的button键功能（5秒后才可以点击关闭），就用jQuery试下了。
复制链接

扫一扫