首先先放置按钮以及盒子
点击进入百度
然后在 script 内获取事件对象
var btn = document.querySelector('button')
var div = document.querySelector('div')
紧接着绑定对象
为按钮设置点击跳转链接事件:
btn.addEventListener('click', function () {
location.href = 'www.baidu.com'
})
点击以跳转页面部分完成,如图:
建立事件以实现跳转页面建立事件:
为倒计时定义倒计时秒数变量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)
倒计时跳转部分完成,如图: