JS 连环弹出层--求源代码

没有例子,先给些建议,建一个DIV作为弹出的遮罩层,高宽自然要和屏幕一般,
两个弹出的红层和蓝层自己建了,当弹出红层时,设置setInterval()计时器启动,10内无点击关闭,
如果这时点击了要弹出蓝层,那把这个清除,然后在蓝层里再设置一个计时器,启动.10内有点击就切换,没点击就关闭,
这个计时器可以是相同的一个.

解决方案 »

  1.   

    <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>
    作为参考,还有蓝色部分你自己写吧.
    写一半总该有交代了吧
      

  2.   

    <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>
      

  3.   

    <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>
      

  4.   


    <!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>