JS按钮倒计时并跳转到新地址的实现代码

js按钮倒计时跳转 js点击按钮倒计时跳转 js按钮倒计时 2023-02-06 18:02:30 529人浏览薄情痞子

摘要

目录js按钮倒计时并跳转到新地址补充：用javascript实现点击按钮倒计时跳转到其他页面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按钮倒计时跳转内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JS按钮倒计时并跳转到新地址的实现代码

本文链接: https://www.lsjlt.com/news/194396.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341