9.0.102 倒计时按钮点击第一次无效

登录

进来第一次点击按钮没进入倒计时，第二次后才正常进入倒计时

$(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); // 每秒执行一次
});
});

福星 · 福星

感谢孙工远程帮忙，最终实现代码如下
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);
});

豪～豪 · 豪～豪

福星发表于 2024-5-10 17:11
我意思是该按钮没有做跳转页面，当点击的时候也不会跳转，所以不能使用页面加载命令

你不是要这个效果吗

豪～豪 · 豪～豪

本帖最后由豪～豪于 2024-5-10 17:05 编辑

JS放到编辑页面加载时命令...,去掉$(document).ready
保留里面的核心代码即可

福星 · 福星

豪～豪发表于 2024-5-10 17:03
JS放到编辑页面加载时命令...,去掉$(document).ready
保留里面的核心代码即可

点击按钮并没有跳转页面，使用页面加载时只能执行一次

豪～豪 · 豪～豪

福星发表于 2024-5-10 17:07
点击按钮并没有跳转页面，使用页面加载时只能执行一次

你这个JS代码里面没有看到有跳转代码

福星 · 福星

豪～豪发表于 2024-5-10 17:08
你这个JS代码里面没有看到有跳转代码

我意思是该按钮没有做跳转页面，当点击的时候也不会跳转，所以不能使用页面加载命令

福星 · 福星

豪～豪发表于 2024-5-10 17:15
你不是要这个效果吗

是的大佬

不过第一次进入页面怎么倒计时（现在是要点击按钮）

豪～豪 · 豪～豪

福星发表于 2024-5-10 17:25
是的大佬
不过第一次进入页面怎么倒计时（现在是要点击按钮）

调用就行了

Simon.Sun · Simon.Sun

感谢豪豪大佬的支持，客户那边还需要已进入页面就有倒计时的效果，把倒计时逻辑在页面加载时也执行一下就可以了。

		自动登录	找回密码
密码			立即注册

[已处理] 9.0.102 倒计时按钮点击第一次无效

最佳答案

10 个回复

评分

本帖子中包含更多资源

本帖子中包含更多资源

评分

评分

浏览过的版块

时代开发者征文活动

活字格高级认证

悬赏达人

圣诞拼拼乐

活字格认证

Wyn高级认证

Wyn认证