JavaScript实现5秒后跳转界面

最新推荐文章于 2023-05-23 11:52:45 发布
最新推荐文章于 2023-05-23 11:52:45 发布
阅读量2.2k 收藏 6
点赞数
分类专栏： javascript练习 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61320547/article/details/125314631
版权

打开代码，静待5秒后跳转新界面

 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5秒后跳转界面</title>
    <style>
        .box {
            width: 500px;
            height: 400px;
            margin: auto;
            text-align: center;
            line-height: 400px;
            font-size: 34px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div class="box">
        距离跳转时间还有5秒
    </div>

    <script>
        mop(); //封装到函数里面，先调用一次防止第一次刷新显示空白

        function mop() {
            var box = document.querySelector('.box')
            var shi = 5;
            setInterval(function() {
                if (shi == 0) {
                    location.href = 'https://ys.mihoyo.com/';
                } else {
                    box.innerHTML = '距离跳转时间还有' + shi + '秒';
                    shi--;
                }
            }, 1000)
        }
    </script>
</body>

</html>

拂晓等明月
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript页面跳转常见实现方式汇总
10-23
主要介绍了Javascript页面跳转常见实现方式,结合实例汇总分析了JavaScript常用的七种页面跳转实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
使用javascript实现页面定时跳转总结篇
10-26
下面对使用JavaScript实现页面定时跳转做一下总结，各种定时跳转代码记录如下，希望对大家有所帮助
5秒之后自动跳转页面
ywt201010的博客
05-23 1万+
【代码】5秒之后自动跳转页面。
js实现5秒后跳转页面
SkyBulerain的博客
05-02 8594
不积跬步无以至千里，希望大家可以积少成多。
jdbc的内容以及如何在5秒钟后自动跳转到login.html页面
yooppa的博客
03-31 6805
首先，在5秒钟之后跳转到login.html: 最初的解决方法： try { Thread.sleep(5000); response.sendRedirect("login.html"); }catch (Exception e) { e.printStackTrace();; } 预设的是通过 Thread 这个线程类的sleep方法 来进行延时处理 以达到5秒之后的页面跳转
js：定时器setInterval、clearInterval的使用
彭世瑜的博客
02-03 4077
定时器：可以在固定时间间隔，重复调用一个函数。为了避免this指向问题，一般使用箭头函数。
5秒后跳转效果(setInterval/SetTimeOut)
09-05
`setInterval` 和 `setTimeout` 是JavaScript中的两个重要函数，常用于定时任务的执行，包括实现5秒后的自动跳转效果。下面将详细解释这两个函数的工作原理以及如何在实际应用中使用它们。 首先，`setInterval` ...
三秒后自动跳转页面
11-30
实现"三秒后自动跳转页面"通常有两种主要方法： 1. **HTML Meta 标签**：在HTML文档的`<head>`部分，可以添加一个`<meta>`标签来设置页面的刷新（redirect）计时器。例如： ```html ;URL=http://example.com"> `...
js实现界面向原生界面发消息并跳转功能
10-21
本篇将详细讲解如何使用JavaScript实现界面向原生Android界面发送消息并进行跳转。 1. **JavaScript与原生Android交互**： - 使用React Native框架，React Native允许开发者使用JavaScript编写跨平台的原生应用，...
登陆成功后自动计算秒数执行跳转
09-04
在本文中，我们将探讨一种常见的Web应用程序功能：用户登录成功后自动计时并跳转到特定页面。这个功能常用于确保用户在验证身份后能够安全地进入管理界面或其他受保护的区域。以下是如何实现这一功能的详细步骤： ...
JS 退出系统并跳转到登录界面的实现代码
12-10
Index.aspx页面 Login.aspx 在Index.aspx页面写入JS代码： 代码如下:[removed] function logout(){// ... }[removed]放一个退出系统按钮 当点击了退出系统按钮后，Index.aspx界面关闭，跳转到Login.aspx界面 代码
实现联系人前后端界面，实现分页查询
最新发布
04-17
在IT行业中，构建一个联系人管理系统的前后端界面并实现分页查询是一项常见的任务，尤其在Web应用开发中。这里，我们主要关注的是使用Servlet技术来实现这一功能。Servlet是Java平台上的一个标准，用于扩展服务器的...
30秒才能点击跳转页面代码.zip
11-16
在IT行业中，前端开发是构建网站用户界面的关键部分，涉及到CSS、JavaScript、jQuery以及HTML5等技术。"30秒才能点击跳转页面代码.zip"这个压缩包文件很可能包含了一个实现特定功能的示例代码，即让网页上的链接或者...
网页跳转源码简洁网页界面
11-24
网页跳转源码简洁网页界面是一个关于Web开发的专题，主要关注如何实现简单而高效的页面重定向功能。在网页设计和开发中，页面跳转是一个常见的需求，它可以帮助用户从一个页面平滑过渡到另一个页面，或者根据某些...
js实现页面5秒钟以后跳转到其他页面
01-02 1万+
<script language="javascript"> var num = 5; //倒计时的秒数 // var URL = "http://www.baidu.com"; var URL="index.php"; window.setTimeout("doUpdate()", 1000); function doUpdate(){ if(num != 0){ // document.getElementById..
这一次，彻底弄懂 JavaScript 执行机制
MK.Gao Blog
03-22 2112
本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执...
5秒钟之后跳转页面（点击按钮直接跳转）
qq_45879198的博客
09-20 1万+
文章目录前言一、5秒钟之后跳转页面（点击按钮直接跳转） 前言 一些javascript的小功能的实现 提示：以下是本篇文章正文内容，下面案例可供参考 一、5秒钟之后跳转页面（点击按钮直接跳转） <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
js延时函数
热门推荐
我想月薪过万的博客
03-01 3万+
js延时函数总结： 在js中，延迟执行函数有两种，setTimeout和setInterval，用法如下： setTimeout("test()","5000");//5秒后执行testFunction()函数，只执行一次。 setInterval("test()","5000");//每隔5秒执行一次testFunction()函数，执行无数次。 如何停止setInterval 呢？ var interval = window.setInterval("test()","5000"); ..
JS延迟5秒加载方法
x148368288的博客
12-30 3万+
setTimeout( function(){ //add your code }, 5 * 1000 );//延迟5000毫米
手写登陆界面并实现登陆后跳转
06-08
好的，下面是一个简单的手写登录界面的 HTML 和 JavaScript 代码示例： ```html <!DOCTYPE html> <html> <head> <title>Login</title> <meta charset="utf-8"> </head> <body> <h2>Login</h2> <form> <label for="username">Username:</label> <input type="text" id="username" name="username" required><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password" required><br><br> <input type="submit" value="Login"> </form> <script> // 获取表单元素 const form = document.querySelector('form'); const usernameInput = document.querySelector('#username'); const passwordInput = document.querySelector('#password'); // 监听表单提交事件 form.addEventListener('submit', (event) => { event.preventDefault(); // 阻止表单默认提交行为 // 获取输入的用户名和密码 const username = usernameInput.value; const password = passwordInput.value; // TODO: 进行登录验证 if (username === 'admin' && password === '123456') { // 登录成功，跳转到主页 window.location.href = 'home.html'; } else { // 登录失败，提示错误信息 alert('Incorrect username or password.'); } }); </script> </body> </html> ``` 在上面的代码中，我们创建了一个简单的表单，包含了用户名和密码的输入框，以及一个登录按钮。在 JavaScript 部分，我们监听了表单的提交事件，当用户点击登录按钮时，会阻止表单默认的提交行为，而是进行自定义的登录验证。如果用户名和密码正确，就会跳转到主页 `home.html`，否则会提示错误信息。 需要注意的是，这里的登录验证只是一个示例，实际情况下需要更加严谨的验证方式来确保用户信息的安全性。另外，这里的跳转方式是通过修改 `window.location.href` 来实现的，也可以使用其他方式来实现跳转，比如 JavaScript 的 `location.replace()` 或者 HTML 的 `<meta>` 标签等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值