js实现简单登录功能的实例代码
更新时间：2013年11月09日 15:25:19 作者：
js验证用户身份，登录成功之后等待一定秒数，跳转到操作页面。使用window函数。代码如下
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Login.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function checkuser() {
if($('uname' == "lala") && $('pwd') == "123") {
return true;
}else {
return false;
}
}
function $(id) {
return document.getElementById(id).value;
}
</script>
</head>
<body>
<form action="ok.html">
u:<input type="text" id="uname"/><br>
p:<input type="password" id="pwd"/><br>
<input type="submit" value="登录" onclick="return checkuser()"/>
</form>
</body>
</html>
这是登录页面，只有当用户名为lala，密码为123时登录成功。在onclick事件处使用return,是在用户名和密码输入不符时，阻止页面跳转。登录成功页面中，含有等待秒数，代码为:
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ok.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
function tiao() {
clearInterval(mytime);
window.open("manage.html","_self");
}
setTimeout("tiao()",5000);
function changeSec() {
//得到myspan值
$('myspan').innerText=$('myspan').innerText-1;
}
function $(id) {
return document.getElementById(id);
}
var mytime = setInterval("changeSec()",1000);
</script>
</head>
<body>
登录成功，<span id="myspan">5</span>秒后自动跳转到管理页面
</body>
</html>
关键在几个函数的使用，setTimeout("tiao()",5000);函数是打开页面，等待5秒，调用tiao()函数。setInterval("changeSec()",1000);函数是每隔1秒调用一次changeSec()函数。这样就完成了简单的登录功能。
相关文章
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Knockout是一个以数据模型（data model）为基础的能够帮助你创建富文本，响应显示和编辑用户界面的JavaScript类库。这篇文章介绍了KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定的相关知识，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了js限制文本框只能输入中文的方法,涉及javascript正则匹配及鼠标事件的相关技巧,非常简单实用,需要的朋友可以参考下2015-08-08
可以获取网页中相同class的节点的脚本，然后就可以统一做一些调整。2008-12-12
Javascript技术技巧大全（五）...2007-01-01
装饰器模式（Decorator Pattern）是一种结构型设计模式，它允许动态地向一个对象添加新的行为，本文将带大家详细了解一下JavaScript装饰器模式，文中有相关的示例代码供大家参考，感兴趣的同学可以跟着小编一起学习2023-05-05
下面小编就为大家带来一篇全面了解javascript中的错误处理机制。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了如何解决日期函数new Date()浏览器兼容性问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JSONP和批量操作功能的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
最近小编做项目遇到这样的需求，要求实现一个全屏滚动的效果，在网上找了实例代码，但是不是很完美，小编又结合自己的知识给大家补充下，对微信小程序全屏滚动效果的实例代码感兴趣的朋友参考下本文吧2018-11-11
下面小编就为大家带来一篇浅谈webpack下的AOP式无侵入注入。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论