JS按钮倒计时并跳转到新地址的实现代码
前端-文龙刚 人气:0JS按钮倒计时并跳转到新地址
场景:在完成某项操作时,按钮上有个倒计时效果,倒计时结束后,跳转到新地址
效果如下:
实现代码:
<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秒,这样就实现了这个功能
加载全部内容