js example code to implement simple login function-PHP Tutorial-php.cn

js example code to implement simple login function

不言

Release： 2023-03-25 11:54:01

Original

2694 people have browsed it

This article mainly introduces the example code of js to implement simple login function, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Copy code The code is as follows:

<!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>

Copy after login

This is the login page. The login is successful only when the user name is lala and the password is 123. Use return at the onclick event to prevent the page from jumping when the username and password input do not match. The successful login page contains the waiting seconds, the code is:

Copy code The code is as follows:

<!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>

Copy after login

The key lies in the use of several functions, setTimeout( "tiao()",5000); The function is to open the page, wait 5 seconds, and call the tiao() function. The setInterval("changeSec()",1000); function calls the changeSec() function every 1 second. This completes the simple login function.

Related recommendations:

Detailed explanation of steps to implement caching algorithm with JS

JS implements Ferris wheel lottery

The above is the detailed content of js example code to implement simple login function. For more information, please follow other related articles on the PHP Chinese website!