JS制作一个跳转提示页面

<!DOCTYPE html>
<html>
 <head>
  <title>浏览器对象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先编写好网页布局-->
  <h2>操作成功</h2>
  <span id="second">5</span>
  <span>秒后返回主页</span> 
  <a href="javascript:back();">返回</a>


  <script type="text/javascript">  

   //获取显示秒数的元素,通过定时器来更改秒数。
var num=document.getElementById("second").innerHTML;
function count(){
    num--;
    if(num>0){
    document.getElementById("second").innerHTML=num;
    }
    if(num==0){
        location.assign("www.baidu.com");
    }      
    }
    setInterval("count()",1000);
   //通过window的location和history对象来控制网页的跳转。
   function back(){
       window.history.back();
   }
 </script> 
</body>
</html>

这里写图片描述

好的,我可以为您提供一个简单的登录页面跳转的示例。 首先,您需要创建一个HTML文件,并添加如下代码: ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <style type="text/css"> body { background-color: #f1f1f1; font-family: Arial, sans-serif; } .container { margin: 100px auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px #555; width: 400px; } h1 { text-align: center; margin-bottom: 20px; } input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; width: 100%; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>Login</h1> <form> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Enter username" required> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter password" required> <button type="submit" onclick="login()">Login</button> </form> </div> <script type="text/javascript"> function login() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "admin" && password == "admin123") { window.location.href = "welcome.html"; } else { alert("Invalid username or password!"); } } </script> </body> </html> ``` 在这个示例中,我们使用了HTML和CSS来创建登录页面的样式,并使用JavaScript实现登录和跳转的功能。在登录按钮上添加了一个`onclick`事件,当用户点击登录按钮时,会调用`login()`函数来对用户名和密码进行验证。如果用户名和密码正确,就跳转到`welcome.html`页面;如果用户名或密码不正确,就弹出一个提示框告诉用户输入的用户名或密码错误。 接下来,您需要创建一个名为`welcome.html`的文件,并添加一些欢迎页面的内容。在这个示例中,我们简单地在页面上显示了用户的用户名: ```html <!DOCTYPE html> <html> <head> <title>Welcome Page</title> </head> <body> <h1>Welcome</h1> <p>Hello, <span id="username"></span>! Welcome to our website.</p> <script type="text/javascript"> var username = localStorage.getItem("username"); document.getElementById("username").innerHTML = username; </script> </body> </html> ``` 在这个示例中,我们使用了JavaScript来获取用户的用户名,并将其显示在页面上。我们将用户名存储在localStorage中,以便在欢迎页面中获取该值。 希望这个示例可以帮助您实现您的登录页面跳转功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值