请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

福星
金牌服务用户   /  发表于:2024-5-10 17:01  /   查看:239  /  回复:10
6金币
进来第一次点击按钮没进入倒计时,第二次后才正常进入倒计时


$(document).ready(function(){
    $('#r24c1p_btn').click(function(){
        var countdown = 3; // 倒计时秒数
        var button = $(this); // 获取按钮的jQuery对象
        // 禁用按钮
        button.prop('disabled', true);
        
        // 创建一个倒计时函数
        var countdownFunction = setInterval(function(){
            countdown--;
            console.log(countdown);
            // 更新按钮上的文本显示剩余时间
            button.text(countdown + '秒');
            // 倒计时结束后清除定时器并启用按钮
            if (countdown < 0) {
                clearInterval(countdownFunction);
                button.text('下一页'); // 可以根据需要更改按钮文本
                button.prop('disabled', false);
            }
        }, 1000); // 每秒执行一次
    });
});





附件: 您需要 登录 才可以下载或查看,没有帐号?立即注册

最佳答案

查看完整内容

你不是要这个效果吗

10 个回复

倒序浏览
福星
金牌服务用户   /  发表于:2024-5-10 18:08:31
来自 10#
感谢孙工远程帮忙,最终实现代码如下
var button = $("#r24c1p_btn"); // 获取按钮的jQuery对象
bind(button);


function bind(btn) {
    var countdown = 6; // 倒计时秒数
    var button = btn; // 获取按钮的jQuery对象
    // 禁用按钮
    button.prop('disabled', true);
   
    // 创建一个倒计时函数
    var countdownFunction = setInterval(function(){
        countdown--;
        // 更新按钮上的文本显示剩余时间
        button.text(countdown + '秒');
        // 倒计时结束后清除定时器并启用按钮
        if (countdown < 0) {
            clearInterval(countdownFunction);
            button.text('下一页'); // 可以根据需要更改按钮文本
            button.prop('disabled', false);
        }
    }, 1000); // 每秒执行一次
}

$('#r24c1p_btn').click(function(){
    bind(button);
});

评分

参与人数 1金币 +5 收起 理由
Simon.Sun + 5 赞一个!

查看全部评分

回复 使用道具 举报
最佳答案
最佳答案
豪~豪悬赏达人认证 活字格认证
银牌会员   /  发表于:2024-5-10 17:01:31
来自 6#
福星 发表于 2024-5-10 17:11
我意思是该按钮没有做跳转页面,当点击的时候也不会跳转,所以不能使用页面加载命令

你不是要这个效果吗


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
豪~豪悬赏达人认证 活字格认证
银牌会员   /  发表于:2024-5-10 17:03:27
2#
本帖最后由 豪~豪 于 2024-5-10 17:05 编辑

JS放到编辑页面加载时命令...,去掉$(document).ready
保留里面的核心代码即可
回复 使用道具 举报
福星
金牌服务用户   /  发表于:2024-5-10 17:07:35
3#
豪~豪 发表于 2024-5-10 17:03
JS放到编辑页面加载时命令...,去掉$(document).ready
保留里面的核心代码即可

点击按钮并没有跳转页面,使用页面加载时只能执行一次
回复 使用道具 举报
豪~豪悬赏达人认证 活字格认证
银牌会员   /  发表于:2024-5-10 17:08:36
4#
福星 发表于 2024-5-10 17:07
点击按钮并没有跳转页面,使用页面加载时只能执行一次

你这个JS代码里面没有看到有跳转代码
回复 使用道具 举报
福星
金牌服务用户   /  发表于:2024-5-10 17:11:37
5#
豪~豪 发表于 2024-5-10 17:08
你这个JS代码里面没有看到有跳转代码

我意思是该按钮没有做跳转页面,当点击的时候也不会跳转,所以不能使用页面加载命令
回复 使用道具 举报
福星
金牌服务用户   /  发表于:2024-5-10 17:25:18
7#
豪~豪 发表于 2024-5-10 17:15
你不是要这个效果吗

是的大佬
不过第一次进入页面怎么倒计时(现在是要点击按钮)
回复 使用道具 举报
豪~豪悬赏达人认证 活字格认证
银牌会员   /  发表于:2024-5-10 17:28:36
8#
福星 发表于 2024-5-10 17:25
是的大佬
不过第一次进入页面怎么倒计时(现在是要点击按钮)

调用就行了

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

评分

参与人数 1满意度 +5 收起 理由
福星 + 5

查看全部评分

回复 使用道具 举报
Simon.Sun活字格认证 Wyn认证
超级版主   /  发表于:2024-5-10 18:06:06
9#
感谢豪豪大佬的支持,客户那边还需要已进入页面就有倒计时的效果,把倒计时逻辑在页面加载时也执行一下就可以了。

评分

参与人数 1满意度 +5 收起 理由
福星 + 5

查看全部评分

回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部