本文介绍如何使用JavaScript实现点击按钮后显示倒计时并自动跳转至新页面的功能。通过获取按钮和显示区域元素，利用setInterval定时器每秒更新剩余秒数，倒计时归零时触发页面跳转并重置按钮状态。代码包含防止重复点击的逻辑，适用于需要用户等待的操作场景。
JavaScript实现按钮倒计时并跳转至新地址
应用场景：在执行特定操作时，按钮显示倒计时动画，倒计时结束后自动跳转至指定新地址。
效果如下：
实现代码：
<a class="backUpPage" href="javascript:void(0);" rel="external nofollow" ><span></span>秒后 返回</a>$(function () {
var time = 5
$('.backUpPage span').html(time)
var timeFn = setInterval(function(){
time--
$('.backUpPage span').html(time)
if(time==0){
clearTimeout(timeFn)
window.location = 'http://www.baidu.com/'
}
},1000)
})补充：使用JavaScript实现点击按钮后倒计时并跳转至其他页面
使用JavaScript实现点击按钮后倒计时并跳转至其他页面
目前正学习大前端开发，若代码或思路存在不规范或不正确之处，敬请谅解并欢迎指正。
在网页开发中，点击按钮通常不会立即跳转，而是先显示倒计时，等待数秒后再进行跳转。下面通过代码具体实现这一功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点我跳转</button>
<div></div>
<script>
var div=document.querySelector('div')
var btn=document.querySelector('button')
btn.addEventListener('click',function () {
var timeer = 5
btn.disabled=true
x()
setInterval(x,1000)
function x() {
if (timeer == 0) {
btn.disabled=false
location.href = 'http://www.baidu.com'
} else {
btn.innerHTML = '还剩' + timeer + '秒'
div.innerHTML = '宁再' + timeer + '秒跳转'
timeer--
}
}
})
</script>
</body>
</html>效果展示：
代码解释： 此处需要修改两个元素，因此分别获取按钮和div对象。当点击按钮时，触发点击事件，使按钮变为不可点击状态并开始倒计时，以此防止用户多次快速点击导致无法跳转。定义变量timmer初始值为5。接着创建一个函数，判断倒计时时间是否等于0；若等于0，则直接跳转至新页面和新网址，并将按钮状态恢复为可点击，文字也恢复为初始值。若大于0，按钮保持不可点击，文字修改为“还剩”加上timeer的值再加“秒”，同时修改按钮下方文字为“宁再”加上timeer的值再加“秒跳转”，随后继续减少倒计时时间。最后创建一个定时器，将该函数放入其中，时间间隔设为1秒，从而实现该功能。
到此这篇关于JS按钮倒计时并跳转到新地址的文章就介绍到这了，更多相关js按钮倒计时跳转内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！