87,918
社区成员
发帖
与我相关
我的任务
分享JS 连环弹出层--求源代码
写一个htm页面,点击［显示层］按钮出现层(如红色),在红色层上单击出现新层(如蓝色),再点蓝色层则切换到红色层(请注意：在5秒内点击进行互换！用两个层实现，不是一个层换颜色).10秒内没点击动作自动关闭层
这个是机试题。麻烦帮写下。。谢谢。很急。谁有例子也发来。qq:17860729
Email:o_wen@126.com
感激不尽
这个是机试题。麻烦帮写下。。谢谢。很急。谁有例子也发来。qq:17860729
Email:o_wen@126.com
感激不尽
...全文
请发表友善的回复…
发表回复
soommm 2010-03-17
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#div1{
border:1px solid #333;
position:absolute;
left:200px;
top:200px;
background:green;
width:200px;
height:200px;
}
#div2{
border:1px solid #333;
position:absolute;
left:150px;
top:150px;
background:red;
width:200px;
height:200px;
}
</style>
<script language="javascript">
var fou=null;
var t=0;
var c=null;
function run()
{
$("div1").style.zIndex=1;
fou=$("div1");
clearTimeout(c);
c=setTimeout("s()",1000);
}
function click(e)
{
if(t==10)t=0;
if(t<5)
{
if(e.id=="div1")
{
$("div1").style.zIndex=2;
$("div2").style.zIndex=1;
}
else
{
$("div1").style.zIndex=1;
$("div2").style.zIndex=2;
}
t=0;
fou=e;
clearTimeout(c);
c=setTimeout("s()",1000);
}
}
function s()
{
t++;
$("show").innerHTML=t;
if(t==10)
document.body.removeChild(fou);
else
{
clearTimeout(c);
c=setTimeout("s()",1000);
}
}
function $(_id)
{
if(document.getElementById(_id))
{ return document.getElementById(_id);}
else{ var obj=document.createElement("div");obj.id=_id; obj.innerHTML=_id; obj.onclick=function(){click(obj);};document.body.appendChild(obj);return document.getElementById(_id); }
}
</script>
</head>
<body>
<input name="" type="button" value="显示层" onclick="run()" />
<div id="show"></div>
</body>
</html>
shan1119 2010-03-17
- 打赏
- 举报
<HTML>
<head>
<title>sample</title>
<script language="JavaScript">
var t;
function show(div1,div2){
if(t)clearTimeout(t);
document.getElementById(div1).style.display="block";
document.getElementById(div2).style.display="none";
t=setTimeout(clear,10000);
}
function clear(){
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="none";
}
</script>
</head>
<body>
<input type=button id=btn1 onclick="show('div1','div2');" value="show">
<div id=div1 style="background:red;position:absolute;top:100px;left:100px;width:100px;height:100px;display:none;" onclick="show('div2','div1');"></div>
<div id=div2 style="background:green;position:absolute;top:100px;left:100px;width:100px;height:100px;display:none;" onclick="show('div1','div2');"></div>
</body>
</html>
archko 2010-03-17
- 打赏
- 举报
<script language="javascript">
function createDiv(id,color,callback){
var div=document.createElement('div');
div.setAttribute('id',id);
div.style.width="500";
div.style.height="400";
div.style.top="200";
div.style.left="400";
div.style.position="absolute";
div.style.zIndex=zi++;
div.style.backgroundColor=color;
div.onclick=callback;
document.body.appendChild(div);
}
var timeRed,timeBlue,zi=1000;
function popRed(){
createDiv("red","red",popBlue);
timeRed=setInterval("closeDiv()",5*1000);
}
function closeDiv(){
document.body.removeChild(document.getElementById('red'));
clearInterval(timeRed);
}
function popBlue(){
clearInterval(timeRed);
createDiv("blue","blue",blueCall);
timeBlue=setInterval("closeDiv2()",5*1000);
}
function blueCall(){
document.getElementById('txt').innerHTML="hello";
}
function closeDiv2(){
document.body.removeChild(document.getElementById('blue'));
clearInterval(timeRed);
timeRed=setInterval("closeDiv()",10*1000);
clearInterval(timeBlue);
}
</script>
<body>
<div id="main">
<input type="button" value="弹出层" onclick="popRed()">
<div id="txt"></div>
<div>
function createDiv(id,color,callback){
var div=document.createElement('div');
div.setAttribute('id',id);
div.style.width="500";
div.style.height="400";
div.style.top="200";
div.style.left="400";
div.style.position="absolute";
div.style.zIndex=zi++;
div.style.backgroundColor=color;
div.onclick=callback;
document.body.appendChild(div);
}
var timeRed,timeBlue,zi=1000;
function popRed(){
createDiv("red","red",popBlue);
timeRed=setInterval("closeDiv()",5*1000);
}
function closeDiv(){
document.body.removeChild(document.getElementById('red'));
clearInterval(timeRed);
}
function popBlue(){
clearInterval(timeRed);
createDiv("blue","blue",blueCall);
timeBlue=setInterval("closeDiv2()",5*1000);
}
function blueCall(){
document.getElementById('txt').innerHTML="hello";
}
function closeDiv2(){
document.body.removeChild(document.getElementById('blue'));
clearInterval(timeRed);
timeRed=setInterval("closeDiv()",10*1000);
clearInterval(timeBlue);
}
</script>
<body>
<div id="main">
<input type="button" value="弹出层" onclick="popRed()">
<div id="txt"></div>
<div>
fydnet8 2010-03-17
- 打赏
- 举报
恩。谢谢了。
archko 2010-03-17
- 打赏
- 举报
<script language="javascript">
function createDiv(id,color){
var div=document.createElement('div');
div.setAttribute('id',id);
div.style.width="500";
div.style.height="400";
div.style.top="200";
div.style.left="400";
div.style.position="absolute";
div.style.backgroundColor=color;
document.body.appendChild(div);
}
var time;
function popRed(){
createDiv("red","red");
time=setInterval("closeDiv()",10*1000);
}
function closeDiv(){
document.body.removeChild(document.getElementById('red'));
}
function popBlue(){}
</script>
<body>
<div id="main">
<input type="button" value="弹出层" onclick="popRed()">
<div>
作为参考,还有蓝色部分你自己写吧.
写一半总该有交代了吧
function createDiv(id,color){
var div=document.createElement('div');
div.setAttribute('id',id);
div.style.width="500";
div.style.height="400";
div.style.top="200";
div.style.left="400";
div.style.position="absolute";
div.style.backgroundColor=color;
document.body.appendChild(div);
}
var time;
function popRed(){
createDiv("red","red");
time=setInterval("closeDiv()",10*1000);
}
function closeDiv(){
document.body.removeChild(document.getElementById('red'));
}
function popBlue(){}
</script>
<body>
<div id="main">
<input type="button" value="弹出层" onclick="popRed()">
<div>
作为参考,还有蓝色部分你自己写吧.
写一半总该有交代了吧
justwalking 2010-03-17
- 打赏
- 举报
楼主是想要个现成的，
fydnet8 2010-03-17
- 打赏
- 举报
要实例啊。现在没时间了。在机试。麻烦好心人帮帮忙
archko 2010-03-17
- 打赏
- 举报
没有例子,先给些建议,建一个DIV作为弹出的遮罩层,高宽自然要和屏幕一般,
两个弹出的红层和蓝层自己建了,当弹出红层时,设置setInterval()计时器启动,10内无点击关闭,
如果这时点击了要弹出蓝层,那把这个清除,然后在蓝层里再设置一个计时器,启动.10内有点击就切换,没点击就关闭,
这个计时器可以是相同的一个.
两个弹出的红层和蓝层自己建了,当弹出红层时,设置setInterval()计时器启动,10内无点击关闭,
如果这时点击了要弹出蓝层,那把这个清除,然后在蓝层里再设置一个计时器,启动.10内有点击就切换,没点击就关闭,
这个计时器可以是相同的一个.
