通过JS实现点击、倒计时跳转页面

633 阅读1分钟
首先先放置按钮以及盒子

点击进入百度

然后在 script 内获取事件对象

var btn = document.querySelector('button')
var div = document.querySelector('div')

紧接着绑定对象

为按钮设置点击跳转链接事件:

btn.addEventListener('click', function () {
location.href = 'www.baidu.com'
})

点击以跳转页面部分完成,如图:
微信图片_20221230165350.png

百度2.png
建立事件以实现跳转页面建立事件:

为倒计时定义倒计时秒数变量timer:

var timer=5

为倒计时设定定时器:

setInterval(function () {
if (timer == 0) {
location.href = 'www.bilibili.com'
}
else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转至bilibili'
timer--
}}, 1000)


当倒计时秒数timer为0时进行跳转

if (timer == 0) {
location.href = 'www.bilibili.com'
}

其他情况显示距离跳转剩余时间
div盒子的倒计时每秒刷新一次,同时倒计时秒数timer每次刷新减少一

else {
div.innerHTML = '您将在' + timer + '秒钟之后跳转至bilibili'
timer--
}}, 1000)

倒计时跳转部分完成,如图:

bilibili.png 1111.png

1111.png