求 js 带倒计时的对话框

我是想法，用户点提交后出现对话框，同时启动倒计时，期间用户不点【取消】就自动提交，点【取消】还是停留在该页面，求JS高手啊！！

解决方案 »

  1.   

    <html> 
    <head> 
    <title>hello</title> 
    <style type="text/css">
    div{border:1px solid black; width:200px; } 
    span{align:center; width:100%;} 
    input{margin:15px} 
    </style> 
    </head>  
    <script language=javascript>
    var timer = 0;
    var $ = function(i){return document.getElementById(i)}
    function abc(i){
      $('submit').disabled=true;
      $("confirm").style.display='';
      var clock = $("clock");
      clock.innerText = i + "秒后将自动确认";
      if(i==0){
        $('ok').onclick();
      }else{
        timer = setTimeout("abc("+i+"-1)",1000);
      }
    }
    function bcd(){
        clearTimeout(timer);
        $('submit').disabled=false;
        $('confirm').style.display='none';
    }
    function efg(){
        clearTimeout(timer);
        alert("Ok is click!");
    }
    </script>
    <body>
    <input id="submit" type="button" value="submit" onclick="abc(5)">
    <div id="confirm" style="display:none">
    <span id="clock"></span><br>
    <input id="ok" type="button" value="OK" onclick="efg()">
    <input type="button" value="Cancel" onclick="bcd()">
    </div>
    </body> 
    </html> 
      

  2.   

    test:<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>caiying2009</title>
    <style>
    #sub{border:1px #00f solid;width:280px;height:100px;position:absolute;display:none;background:#fff}
    #tit{width:280px;height:22px;background:#00f;font-size:14px;font-weight:700;color:#fff;line-height:24px;;padding-left:1px;}
    #tit_time{margin-left:100px;font-size:12px;}
    #inf{width:280px;height:80px;padding:30px;}
    #inf span{width:100px; text-align:center;CURSOR: pointer}
    </style>
    </head><body>
    <script language="javascript">
    <!--
    function $(id){return document.getElementById(id)}
    var t=0,timer;
    function RunTimer(k){//倒计时
    changeColor(2)
    $("tit_time").innerHTML="倒计时: "+k+" 秒"
    k--
    if (k>=0)timer=setTimeout(function(){RunTimer(k)},1000)
    else subFoem()
    }function changeColor(s){//"【提交】变色
    var obj=$("sub_form")
    obj.style.color=obj.style.color=="#f00"?"":"#f00"
    s--
    if (s>0)setTimeout(function(){changeColor(s)},200)
    }function showSub(_this){//显示对话框
        var posX=document.body.offsetWidth ||document.documentElement.offsetWidth
        var posY=document.body.offsetHeight ||document.documentElement.offsetHeight   with($("sub").style){
    top=posY/2-100+"px"
    left=posX/2-160+"px"
    display="block"
    }
    t=10
    RunTimer(t)
    _this.disabled=1
    }function  hidSub(){//隐藏对话框
    if ($("sub").style.display="block"){
    clearTimeout(timer)
    $("sub").style.display="none"
    $("sub_bt").disabled=0
    }
    }
    function subFoem(){//提交
    hidSub()
    //myForm.submit()
    alert()//for test
    }
    //-->
    </script>
    <input id=sub_bt type=button value="提交" onclick="showSub(this)">
    <div id="sub">
    <div id=tit>请您确定提交<span id=tit_time>倒计时</span></div>
    <div id="inf">
    <span id="sub_form" onclick="subFoem()">【提交】</span>
    <span onclick=" hidSub()">【取消】</span></div>
    </div>
    </body></html>