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

前端技术 2023/09/06 JavaScript

复制代码 代码如下:

<!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()函数。这样就完成了简单的登录功能。

本文地址：https://www.stayed.cn/item/16850

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案