Home > Article > Backend Development > js example code to implement simple login function

js example code to implement simple login function

不言Original: 2018-05-04 15:08:572672browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to install PHPUnit in CentOS environmentNext article：How to install PHPUnit in CentOS environment

See more

js example code to implement simple login function

Related articles