45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网络编程 > javascript >

使用js简单实现登录功能

电脑软硬件应用网 45IT.COM 时间:2012-10-09 17:18 作者:佚名
      js验证用户身份,登录成功之后等待一定秒数,跳转到操作页面。使用window函数。代码如下:
 
[html]
 <!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,是在用户名和密码输入不符时,阻止页面跳转。登录成功页面中,含有等待秒数,代码为:
 [html]
 <!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()函数。这样就完成了简单的登录功能。
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识