집 >백엔드 개발 >PHP 튜토리얼 >간단한 로그인 기능을 구현하는 js 예제 코드

간단한 로그인 기능을 구현하는 js 예제 코드

不言원래의: 2018-05-04 15:08:572689검색

이 글은 간단한 로그인 기능을 구현하기 위한 js의 예제 코드를 주로 소개하고 있습니다. 이제는 모든 사람들과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

코드를 복사하세요

<!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($(&#39;uname&#39; == "lala") && $(&#39;pwd&#39;) == "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值
           $(&#39;myspan&#39;).innerText=$(&#39;myspan&#39;).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() 함수를 호출합니다. 이로써 간편 로그인 기능이 완료되었습니다.

간단한 로그인 기능을 구현하는 js 예제 코드

관련 기사