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>