页面上一个发送验证码的按钮,要每三十秒才能点击,点击后继续开始三十秒计时,不知道怎么写循环计时

解决方案 »

  1.   

    大概是这样
    <!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>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <script type="text/javascript">
    <!--
    window.onload = function(){
    var submit = document.getElementById("btn");
    var form = document.getElementById("myForm");
    setTimeout(function(){
    submit.disabled = false;
    submit.onclick = function(){
    setTimeout(function(){
    form.submit();
    }, 30000);
    };
    }, 30000);
    }
    //-->
    </script>
    </head><body><form id="myForm" method="post" action="">
    <input type="button" value="Submit" id="btn" disabled="disabled" />
    </form></body>
    </html>
      

  2.   


    $(function(){
        var allowSend = true;
        var btn = $("#get_random_key");
        var errorPlace = $("errorPlace");    btn.click(function(){
            if(allowSend) {
                checkAndSendKey();
            }
            return false;
        });    function checkAndSendKey(){
            var phone = $("#phone").val();
            if(/^1\d{10}$/.test(phone) === false) {
                errorPlace.html('请先填写正确的手机号').fadeOut(200).fadeIn(200);
                return;
            }        $.post('/sendSMS',{phone:phone},function(ret){
                if(!ret.ok){
                    errorPlace.html(ret.msg);
                } else {
                    errorPlace.html('发送成功,请注意查收');
                    countDown();
                }
            },'json');
        }    function countDown(){
            allowSend = false;
            var count = 60;
            var loop = function(){
                if(count < 0) {
                    btn.val('重新获取').removeClass("disabled");
                    allowSend = true;
                    return;
                }
                btn.val(count+'秒后可重新发送');
                count--;
                setTimeout(loop,1000);
            };
            btn.addClass("disabled");
            loop();
        }
    });
      

  3.   

      var btn = $("#get_random_key");
      var errorPlace = $("errorPlace");btn就是那个按钮,errorPlace是提示的地方,丢了一个#号,呵呵。
      

  4.   


    <html>
    <head>
    <title>Test</title>
    <script>
    window.onload = function() {
    var btn = document.getElementById("btn");
    btn.onclick = function() {
    btn.disabled = true;
    setTimeout(function() {
    btn.disabled = false;
    }, 5000);
    };
    }
    </script>
    </head>
    <body><form id="myForm" method="post" action="">
    <input type="button" value="Submit" id="btn" />
    </form></body>
    </html>
      

  5.   

    <input  type="button" id="testbutton" value="test" onclick="changeEvent();"  /> var curTimeOut = null;
        changeEvent();
        function changeEvent() {
            document.getElementById("testbutton").disabled = true;
            if (curTimeOut != null)
            { clearTimeout(curTimeOut); }
            curTimeOut = setTimeout(changeOption, 30000);
        }
        function changeOption() {
            document.getElementById("testbutton").disabled=false;
        }
      

  6.   

    没写注释应该是你要的意思 等待30秒30秒后可以点击按钮 点击后又开始等待<!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>
    <title>Bug-CJ</title>
    <style>
    #btn{
    width:100px;
    height:100px;
    background:yellow;}
    </style>
    <script>
    //<![CDATA[
    var flag=30;
    var can = true;
    window.onload=function(){
    index();
    document.getElementById("btn").onclick=clk;
    }
    function index(){
    var ob = document.getElementById("btn");
    go(ob);
    }
    function go(obj){
    if(can){
    if(flag>0){
    obj.value="(" + flag + ")";
    flag--;
    setTimeout(function(){go(obj)},1000);
    }
    else{
    obj.value="Click Me!";
    obj.disabled=false;
    }
    }
    }
    function clk(){
    can=false;
    flag=30;
    ob = document.getElementById("btn");
    setTimeout(function(){can=true;go(ob);},1000);
    }
    //]]>
    </script>
    </head>
    <body>
    <input id="btn" type="botton" value="click" disabled="true"/>
    </body>
    </html>
      

  7.   

    obj.disabled=false   是错误的。可以自己实验一下,然后看看CSS手册说明寻找原因。一开始允许点击,点击后等待指定秒数后才能继续点击:
    <input  type="button" id="theforever" value="test" onclick="changeEvent();" />
    <script>
    var theBtn=document.getElementById('theforever');
    var delaySecond=20;//单位是秒
    var curTimeOut = null;
    function changeEvent() {
        theBtn.disabled = "true";
        if (curTimeOut != null){ clearTimeout(curTimeOut); }
        curTimeOut = setTimeout(changeOption, delaySecond*1000);
    }
    function changeOption(obj) {
        theBtn.removeAttribute('disabled');
    }
    </script>要想一开始就不允许点击,等待指定秒数后才能点击,点击后再等待:
    <input  type="button" id="theforever" value="test" onclick="changeEvent();" disabled = "true" />
    只需要一开始在HTML中设置disabled属性即可。
      

  8.   

    不对不对 disabled属性可以用啊 我这里ie和ff没报错啊 就是代码那里setTimeout(function(){can=true;go(ob);},1000);少写了个ob.disabled=true;
      

  9.   

    为什么是错误的?IE Maxthon Chrome FF Safari全部测试通过。
    翻了一下W3Schools。明明就是这样写的。element.disabled=true|false
    Input Button disabled Property
    Definition and Usage
    The disabled property sets or returns whether a button is disabled, or not.
    A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers.Syntax
    Set the disabled property:
    element.disabled=true|falseReturn the disabled property:
    element.disabled
      

  10.   

    LZ是说按钮按下后才等30秒吧。。而且LZ没说按钮按下要等30秒才提交表单吧。。
      

  11.   

    嗯,你仔细看了,你说得对,不过思路是没错的,稍微改一下就可以了,把提交表单改成ajax发送验证码。