[JavaScript] 实现登录并跳转界面

JavaScript 实现登录并跳转界面

在搭建个人网站过程中,我们可能需要前置登陆页面以保护站点私密性与安全性,本文主要介绍如何使用javascript,实现登录并跳转界面。

首先给一段基础源码:

<script>
        function checkLogon(){
            var name = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
//判断非空
            if((name==null || name=="") || (pass==null || pass=="")){
                alert("用户名或密码不能为空!!");
            }
            else{
                if(name=="你的账户名" && pass=="你的密码"){
                    alert("登录成功!");
//这里写你页面跳转的语句
                    window.location.href="跳转站点";
                }
                else{
                    alert("用户名或密码错误!!");
                }
            }
        }
    </script>

其次就是将代码运用到具体网页中去:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    <script>
        function checkLogon(){
            var name = document.getElementById("username").value;
            var pass = document.getElementById("password").value;
//判断非空
            if((name==null || name=="") || (pass==null || pass=="")){
                alert("用户名或密码不能为空!!");
            }
            else{
                if(name=="123" && pass=="123"){
                    alert("登录成功!");
//这里写你页面跳转的语句
                    window.location.href="https://dengxj.blog.csdn.net/";
                }
                else{
                    alert("用户名或密码错误!!");
                }
            }
        }
    </script>
</head>
<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td height="25">用户名</td>
        <td><input name="textfield" type="text" size="14" id="username"></td>
    </tr>
    <tr>
        <td height="25">密码</td>
        <td><input name="textfield2" type="text" size="14" id="password"></td>
    </tr>
    <tr>
        <td height="25" colspan="2"><div align="center">
            <input type="submit" name="Submit" value="登录" onClick="checkLogon()">
        </div></td>
    </tr>
</table>
</body>
</html>
发布了75 篇原创文章 · 获赞 505 · 访问量 68万+

猜你喜欢

转载自blog.csdn.net/deng_xj/article/details/96853696