如何创建具有两种状态的按钮？ [关闭]答案

【问题标题】：How to create a button with two states? [closed]如何创建具有两种状态的按钮？ [关闭]
【发布时间】：2013-01-06 01:00:41
【问题描述】：

好吧，我需要创建一个具有两种状态的按钮（HTML、JavaScript 等）。

首先，当它被点击时，将开始倒计时，以强制用户查看表单。然后，当倒计时结束时，同一个按钮将提交表单。我该怎么做？

此系统不会删除任何编辑，因此需要完美填写表格。我在 JavaScript 中试过这个函数：

<script language="JavaScript">
var contador = 10;

alert("Verifique os dados");
function conta() {

document.getElementById("btn").disabled=true;
if(contador==0) {
document.getElementById("btn").disabled=false;
return false;
}

contador = contador-1;
setTimeout("conta()", 1000);

document.getElementById("valor").innerHTML = contador;
}

倒计时，但我不能用这个做第二个状态

抱歉，这是我第一次来这里尝试

【问题讨论】：

让它改变背景颜色并添加一个事件监听器。
请查看我的回答并让我知道任何问题，您可能有

标签： javascript html forms button

【解决方案1】：

HTML 按钮有一个“禁用”属性。将其与更改按钮上的文本（称为“值”）和一些计时器相结合。

不过要小心。这会惹恼你的用户。

【讨论】：

【解决方案2】：

http://jsfiddle.net/z2J3B/2/

将功能包含在您的脑海中

function test() {
    var submit = document.getElementById("submit");
    var message = document.getElementById("message");
    if (submit.className == "check") {
        submit.setAttribute("disabled");
        var inc = 10;
        message.innerHTML = "you have " + inc + " seconds left, check the form";
        var interval = setInterval(function () {
            inc--;
            message.innerHTML = "you have " + inc + " seconds left, check the form";
            if (inc <= 0) {
                clearInterval(interval);
                message.innerHTML = "you can now submit the form";
                submit.removeAttribute("class");
                submit.removeAttribute("disabled");
            }
        }, 1000);
        return false;
    }
}

【讨论】：

谢谢老兄。这就是我需要的解决方案。