js实现倒计时跳转页面

简介: js实现倒计时跳转页面

步骤

1显示页面效果,

2倒计时读秒效果实现

     2.1定义一个方法,获取span标签,修改span标签体内容,时间---------;

     2.2定义一个定时器,一秒执行一次该方法

3在方法中判断如果时间<0,则跳转页面。

注意

time.innerHTML=second+"";

innnerHTL是用来显示和修改标签里面内容的

**<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        text-align: center;
    }
    #time{
        color: red;
    }
</style>
<body>
    <p>
        <span id="time">5</span>秒后跳转到百度
    </p>
<script>
    var second=5;
    var time = document.getElementById("time");
    function show() {
        second--;
        if(second==0){
            //跳转页面
            location.href="https://www.baidu.com";
        }
        //用来动态设置里面的内容
        time.innerHTML=second+"";
    }
    //用来实现这个一秒实现一次这个方法
    setInterval(show,1000);
</script>
</body>
</html>**

效果如图所示倒计时后跳转百度页面

新创建一个公众号 Rockey小何同学 想相互交流的同学可以关注一下哈! 感谢支持!

相关文章
|
24天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
4月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
51 5
|
3月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
108 2
前端JS读取文件内容并展示到页面上
|
2月前
|
Web App开发 前端开发 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(一)
JavaScript动态渲染页面爬取——Selenium的使用(一)
61 4
|
2月前
|
Web App开发 数据采集 JavaScript
JavaScript动态渲染页面爬取——Selenium的使用(二)
JavaScript动态渲染页面爬取——Selenium的使用(二)
67 2
|
3月前
|
JavaScript 前端开发
js 回到页面顶部
本文提供了一个JavaScript函数`scrollToTop`,用于平滑滚动页面回到顶部。该函数利用`requestAnimationFrame`和`window.scrollTo`方法逐步减少滚动条距离,直到页面完全回到顶部。
32 1
|
2月前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
64 0
|
3月前
|
JavaScript 前端开发
js怎么定位不同的页面元素
在JavaScript中,有多种方法定位和选择页面元素。
|
2月前
|
JavaScript 前端开发 安全
JavaScript实现跳转的方法
JavaScript实现跳转的方法
18 0
|
2月前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
36 0