js实现简单登录功能的实例代码


Posted in Javascript onNovember 09, 2013
<!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()函数。这样就完成了简单的登录功能。

Javascript 相关文章推荐
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
Vue slot用法(小结)
Oct 22 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
ExtJS实现文件下载的方法实例
Nov 09 #Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 #Javascript
5分钟理解JavaScript中this用法分享
Nov 09 #Javascript
Mac地址验证的javascript代码
Nov 09 #Javascript
详解jquery uploadify 上传文件
Nov 09 #Javascript
深入理解Javascript中的循环优化
Nov 09 #Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 #Javascript
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
爱岗敬业演讲稿范文
2014/01/14 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
医药公司采购员岗位职责
2015/04/03 职场文书
2015年纪委工作总结
2015/05/13 职场文书
时尚女魔头观后感
2015/06/04 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python