为了账号安全,请及时绑定邮箱和手机立即绑定

老师,不加cookie的时候程序一切正常,加了cookie和判断条件之后第一次条件正常运行,第二次的时候那个半透明背景就一直去不掉,找不到哪里出了错误,有帮我看下的吗?谢谢

谢谢

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新手引导页面</title>
<link rel="stylesheet" type="text/css" href="css/style.css">


<style type="text/css">
		html,p,div{ margin: 0; padding: 0;}
	html{ height: 100%}
	body{ height: 100%; background: url(../images/body.png) center top no-repeat;}
	#mask{ 
		height: 100%; 
		width: 100%; 
		position: absolute; 
		left: 0; 
		top: 0;
		background-color: #000;
		opacity: 0.3;
		filter:alpha(opatity=30);}
	#seachTip{
		width: 980px;
		height: 800px;
		position: absolute;
		left: 50%;
		top: 0;
		margin-left: -490px;
		display: none; 
	}
	#seachTip div{ position: absolute; display: none;}
	#seachTip div a{ 
		width: 91px;
		height: 30px;
		position: absolute;
		cursor: pointer;
		opacity: 0; }
	#seachTip div span{ 
		width: 29px;
		height: 29px;
		line-height: 29px;
		position: absolute;
		opacity: 0;
		cursor: pointer;}

	#seachTip .seachA{ 
		background-image: url(../images/guide11.png);
		width: 745px;
		height: 329px;
		left: -8px;
		top: 130px;
		}
	.seachA a{
		left: 493px;
		top: 232px;
	}
	.seachA span{
		left: 684px;
		top: 144px;
	}
	#seachTip .seachB{ 
		background-image: url(../images/guide21.png);
		width: 647px;
		height: 405px;
		left: 324px;
		top: 3px;
		}
	.seachB a{
		left: 148px;
		top: 308px;
	}
	.seachB span{
		left: 332px;
		top: 198px;
	}
	/*#seachTip .seachC{ 
		background-image: url(../images/guide21.png);
		width: 647px;
		height: 405px;
		left: 324px;
		top: 3px;
		}
	.seachC a{
		left: 148px;
		top: 308px;
	}
	.seachC span{
		left: 332px;
		top: 198px;
	}*/
	#seachTip .seachD{ 
		background-image: url(../images/guide31.png);
		width: 654px;
		height: 257px;
		left: 318px;
		top: 292px;
		}
	.seachD a{
		left: 404px;
		top: 156px;
	}
	.seachD span{
		left: 589px;
		top: 44px;
	}
	#seachTip .seachE{ 
		background-image: url(../images/guide41.png);
		width: 558px;
		height: 348px;
		left: 163px;
		top: 79px;
		}
	.seachE a{
		left: 308px;
		top: 247px;
	}
</style>
<!-- <script type="text/javascript" src="js/jquery-1.7.min.js"></script> -->
<script type="text/javascript">
	window.onload=function(){
		var omask=document.getElementById("mask");
		var oseachTip=document.getElementById("seachTip");
		var oseach=oseachTip.getElementsByTagName("div");
		var oA=oseachTip.getElementsByTagName("a");
		var oclose=oseachTip.getElementsByTagName("span") ;
		
		// 读取cookie
		var reg=document.cookie.substring(5);
		alert(reg);

		if(reg!="www.open.com.cn"){
			// mask  父框 及第一个引导块显示出来
			omask.style.display=oseachTip.style.display=oseach[0].style.display="block";

			// 下一步按钮
			for(var i=0;i<oseach.length;i++){
				oA[i].index=i;
				oA[i].onclick=function(){
					this.parentNode.style.display="none";
					if(this.index<oseach.length-1){
						oseach[this.index+1].style.display="block";
					}
					else if(this.index==oseach.length-1){
						oMask.style.display="none";
						this.style.display=oSearch.style.display="none";
					}
				}
			}

			// 关闭按钮
			for(var i=0;i<oclose.length;i++){
				oclose[i].onclick=function(){
					omask.style.display=oseachTip.style.display="none";
				} 
			}

			/* 添加cookie;*/
			var oDate=new Date();//先new一个实例时间对象
			oDate.setDate(oDate.getDate()+30);//先得到这个失效时间,再强制给他设置成30天;
			document.cookie="name=www.open.com.cn;expires="+oDate;
        }
	}
</script>
</head>
<body>
	<div id="mask"></div>
	<div id="seachTip">
		<div class="seachA"><a>下一步</a><span title="关闭">关闭</span></div>
		<div class="seachB"><a>下一步</a><span title="关闭">关闭</span></div>
		<!-- <div class="seachC"><a>下一步</a><span title="关闭">关闭</span></div> -->
		<div class="seachD"><a>下一步</a><span title="关闭">关闭</span></div>
		<div class="seachE"><a>开始体验</a></div>
	</div>
</body>
</html>


正在回答

1 回答

145行 oSearch应该是oseach吧

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何实现“新手引导”效果
  • 参与学习       46286    人
  • 解答问题       184    个

学会用 原生JavaScript代码和JQuery两种方式实现依次显示效果

进入课程

老师,不加cookie的时候程序一切正常,加了cookie和判断条件之后第一次条件正常运行,第二次的时候那个半透明背景就一直去不掉,找不到哪里出了错误,有帮我看下的吗?谢谢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信