JS按钮倒计时并跳转到新地址的实现代码
更新时间：2023年02月06日 16:02:04 作者：前端-文龙刚
在完成某项操作时，按钮上有个倒计时效果，倒计时结束后，跳转到新地址，这篇文章主要介绍了JS按钮倒计时并跳转到新地址,需要的朋友可以参考下
JS按钮倒计时并跳转到新地址
场景：在完成某项操作时，按钮上有个倒计时效果，倒计时结束后，跳转到新地址
效果如下：
实现代码：
<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按钮倒计时跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇网页前端登录js按Enter回车键实现登陆的两种方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
这篇文章主要为大家详细介绍了Openlayers实现地图的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了EL表达式截取字符串的函数说明，在文章下面给大家介绍了JSTL中自带的方法列表以及其描述，需要的朋友参考下吧2017-09-09
这篇文章主要为大家详细介绍了基于HTML+JavaScript实现简单的随机抽取幸运员工系统,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下2023-11-11
promise结合requestAnimationFrame用法示例
这篇文章主要为大家介绍了promise结合requestAnimationFrame用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Bootstrap登陆注册页面开发教程，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了24个ES6方法解决JS实际开发问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了javascript检测浏览器的缩放状态实现代码,需要的朋友可以参考下2014-09-09
本文主要介绍了手把手教会你使用redux的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
JavaScript 5 发布有一段时间了，Array 对象新增了很多方法。但在老版本的浏览器上还不能使用，得益于 JavaScript 的动态可扩展性，我实现了这些方法，在此晒出来与君共勉2012-02-02
最新评论