计时器的页面自动跳转"/>
用JavaScript简单的实现带计时器的页面自动跳转
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、效果图
- 二、使用步骤
- 1.HTML代码
- 2.CSS代码
- 3.JavaScript代码
- 总结
前言
用JavaScript实现页面的自动跳转
一、效果图
二、使用步骤
1.HTML代码
代码如下(示例):
<div class="box4"></div>
这个div需要写在html中
2.CSS代码
代码如下(示例):
.box4{text-align: center;line-height: 0.4rem;font-size: 0.15rem;position: absolute;top: 0.5rem;right: 0.3rem;width: 0.4rem;height: 0.4rem;border: #666666 0.01rem solid;border-radius: 0.2rem;
}
这个主要就是设计一下这个计时器的样式,以及计时器在HTML页面的位置。
3.JavaScript代码
<script type="text/javascript">var div = document.querySelector('.box4')//括号中写你div的类名var time = 3;//这个位置写跳转时间setInterval(function(){if(time==0){location.href = "登录注册.html";//双引号中写你需要跳转到的页面}else{div.innerHTML = time +'S' ;//单引号中是倒计时3、2、1后边加的样式 详见效果图time--;}},1000);</script>
总结
以上就是今天要讲的内容,本文仅仅简单介绍了怎么利用JavaScript去做一个计时器进行自动的页面跳转。
更多推荐
用JavaScript简单的实现带计时器的页面自动跳转
发布评论