php - html的按钮怎么设计就是按了一次然后会倒数120秒之后才能再按？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

php - html的按钮怎么设计就是按了一次然后会倒数120秒之后才能再按？

巴扎黑 2017-04-11 10:38:12

[PHP讨论组]

595

html的按钮怎么设计就是按了一次然后会倒数120秒之后才能再按？要用js解决吗？求大神用jquery的方法写一下

巴扎黑

全部回复(5)

阿神2017-04-11 10:40:12 5楼

點擊時候，js或者jq設置button不可點擊，css顏色變灰。旁邊添加個span顯示倒計時，至於倒計時怎麼寫可以用setinterval做個定時任務，不斷更改秒數，到120秒時候，clean掉計時器，執行回調方法，還原按鈕和隱藏倒計時

赞 +0

添加回复

ringa_lee2017-04-11 10:40:12 4楼

用button 设置属性 disabled=true 120s后设置为false

赞 +0

添加回复

黄舟2017-04-11 10:40:12 3楼

点击按钮处理三个事：按钮点击事件disable掉或者remove掉，样式置灰，启动计时器；
计时器每秒执行的事件：计数i--,判断i是否达到0，到达则重新恢复点击事件，按钮样式；

赞 +0

添加回复

伊谢尔伦2017-04-11 10:40:12 2楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button id="one" style="width:50px;">点击</button>

    <script>
        var obj = $('#one');
        var ttt;
        var i = 1;
        obj.click(function(){
            obj.attr('disabled',true);
            ttt = setInterval('test()',1000);
        });
        
        function test(){
            if(i > 120){
                obj.attr('disabled',false);
                obj.text('点击');
                i =1;
                clearInterval(ttt);
            }else{
                obj.text(i);
                i++;
            }
        }
    </script>
</body>
</html>

代码很糙,只是给提供一个思路~

赞 +0

添加回复

PHP中文网2017-04-11 10:40:12 1楼

$(document).ready(function(){    
    $("input").click(function(){
        $(this).attr("disabled","ture")
        setTimeout(function(){
            $("input").removeAttr("disabled","disabled"); 
        },1000);
    })
})

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>