使用 jQuery 来实现当点击 #Button 按钮时进行 15 秒的倒计时功能

最新推荐文章于 2024-09-09 09:20:08 发布

月落

最新推荐文章于 2024-09-09 09:20:08 发布

阅读量408

点赞数

文章标签： jquery javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/a535069587/article/details/129765842

版权

该代码示例展示了如何使用JavaScript创建一个倒计时计时器。它定义了一个变量`timer`来存储计时器，创建一个`<p>`元素显示倒计时，并通过`setInterval`每秒更新剩余时间。当倒计时结束时，计时器自动清除，相关元素从页面中移除。

摘要由CSDN通过智能技术生成

// 定义一个变量来存储倒计时计时器
var timer;

// 在页面中创建一个用于显示倒计时的元素
var countdownElement = $('<p>倒计时：15秒</p>');
$('body').append(countdownElement);

// 启动倒计时计时器
timer = setInterval(function() {
  var remainingSeconds = parseInt(countdownElement.text().match(/\d+/)[0], 10) - 1; // 获取剩余秒数并减少1
  countdownElement.text('倒计时：' + remainingSeconds + '秒');

  // 如果倒计时完成，清除计时器，并从页面中移除倒计时元素
  if (remainingSeconds === 0) {
    clearInterval(timer);
    countdownElement.remove();
  }
}, 1000); // 倒计时计时器的间隔是 1 秒（1000 毫秒）