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 相关文章推荐
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
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
德生S2000电路分析
2021/03/02 无线电
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
python包的导入方式总结
2021/03/02 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
担保贷款承诺书
2015/04/30 职场文书
民事上诉状范文
2015/05/22 职场文书
大学生受助感言
2015/08/01 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers