建议在MUI中增加一个倒计时按钮

分类：MUI

button 倒计时

例如发送短信验证码的场合使用

2015-06-15 20:38 负责人:无分享

8 个回复

大树哥 - 有没有iOS的兼职

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
    <title>hello world</title>  
    <script type="text/javascript">  
        function wait(t, obj){  
            v = obj.value;  
            setInterval(function(){  
                if(t > 0) {  
                    obj.value = t--;  
                    obj.disabled = true;  
                } else {  
                    window.clearInterval(0);  
                    obj.value = v;  
                    obj.disabled = false;  
                }  
            }, 1000);  
        }  

    </script>  
</head>  
<body>  
    <input type="button" name="" id="wait" value="点击我" onclick="wait(3, this)"/>  
</body>  
</html>

KingMario (作者)

多谢楼上！
对函数略加修改如下：

function disableWait(t, obj, waitMessage) {  
    var objTag = obj.tagName.toLowerCase();  
    if (objTag !== "input" && objTag != "button") {  
        return;  
    }  

    var v = objTag !== "input" ? obj.innerText : obj.value;  
    var i = setInterval(function() {  
        if (t > 0) {  
            switch (objTag) {  
                case "input":  
                    obj.value = (--t) + waitMessage;  
                    break;  
                case "button":  
                    obj.innerText = (--t) + waitMessage;  
                    break;  
                default:  
                    break;  
            }  
            obj.disabled = true;  
        } else {  
            window.clearInterval(i);  
            switch (objTag) {  
                case "input":  
                    obj.value = v;  
                    break;  
                case "button":  
                    obj.innerText = v;  
                    break;  
                default:  
                    break;  
            }  
            obj.disabled = false;  
        }  
    }, 1000);  
}