js原生实现倒计时

Wiktok

于 2023-09-29 21:36:44 发布

阅读量522

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript html5

本文链接：https://blog.csdn.net/m0_50037012/article/details/133420450

本文介绍了一位开发者在制作网站404错误页面时，如何使用JavaScript实现一个倒计时效果并在计时结束后自动跳转到首页的过程，包括使用`onload`和`window.load`事件，以及设置和操作倒计时字段的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：最近在制作网站的404错误页面，想做一个倒计时结束跳转的效果，从网上看了很多教程和方法都没有找到简单合适的，于是自己编写了一个，现在分享出来，供大家参考。

1、首页需要写一个判断页面加载完成开始执行的js，有两种做法，第一种是给html文档的body标签添加一个onload属性，指向加载的js函数；第二种是使用：window.load=function() {//倒计时代码 }

2、前端设置一个倒计时字段，比如：

<div><h2><span id="second"></span>秒后跳转至首页！</h2><div>

3、js这样写：

<script>
function djs() {
    var time = 5;
	var redi = setInterval(function(){ reTime() }, 1000);
    function reTime() {
		time--;
		document.getElementById("second").innerHTML = time;
		if(time == 0) {
		    clearInterval(redi);
            //写你要执行的倒计时结束代码，比如我需要跳转，就写跳转代码
		}
    }
}
</script>

如上，就能完美实现倒计时结束跳转了