Using js to achieve logon, buffer animation, and page Jump as an example, js jump
This is an example of using js to achieve login, buffer animation, and page Jump. No need for databases, complex logic, or thousands of lines of code; you only need a few simple labels, several GIF images, and a few lines of code to implement the above functions. This article mainly consists of three HTML pages, one login page, one loading buffer page, and the last buffered homepage. In order to make this GIF image, I immediately launched a software program on the Internet, which was simple and rude. Although there were flaws, it was good that the sparrow was small and dirty. I will present it first.
1. In the HTML of the logon interface, an account and a password box are added with two buttons. The structure is as follows:
<Body> <div style = "height: 150px; width: 250px; border: 1px solid gray; margin: 0 auto; padding-left: 10px; "> <p> <label> account: </label> <input id = "userName" placeholder = "Enter the user name" type = "text" name = "name" value = ""/> </p> <p> <label> password: </label> <input id = "userPwd" placeholder = "enter the password" type = "password" name = "name" value = ""/> </p> <p> <input id = "login" type = "button" name = "name" value = "login" style = "margin-left: 80px ;"/> <Input id = "close" type = "button" name = "name" value = "cancel"/> </p> </div> <! -- Js part --> <script >$ ("# login "). click (function () {var userName = document. getElementById ("userName "). value; // js gets the value in the input box, and uses value var userPwd = document. getElementById ("userPwd "). value; // verify the account and password if (userName = "wdk" & userPwd = "123456") {window. location. href = "/donghua.html";} else {alert ("incorrect user name or password! "); Return ;}}) </script> </body>
2. the HTML of the buffer interface is mainly a GIF image. Of course, you can add other accessories according to your personal interests. The structure is as follows:
<Body> <div style = "height: 300px; width: 300px; margin: 0 auto; "> <div id =" time01 "> 5 </div>3. For the HTML of the first page, we name it shouye.html, which means the homepage is automatically displayed after the buffer is complete. On this page, you can write the code you need. The structure is as follows:<Body> <div style = "height: 300px; width: 300px; margin: 0 auto;"> <Span> start to write your own code on this page </span> </div> </body>Note: In many web pages, one or more images or even videos are used between page jumps. Of course, there are other methods. The buffer effect in this article is achieved by using an image in GIF format and a timer. There are not many functions in the content, but it is a start and end to log on to the homepage, you are welcome to criticize and advise on content defects or errors that may be useful to those in need.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
