This is an example of using js to realize login, buffer animation and page Jump. It does not need to use database, complex logic, or thousands of lines of code; it only needs a few simple labels, several GIF format pictures, plus a few lines of code to achieve the above functions. This paper mainly consists of three HTML pages, one login page, one load buffer page, and the last one is the buffered homepage. In order to make this GIF map, I immediately downloaded a software on the Internet, which is simple and rough, although flawed, fortunately, sparrow is small and has all five internal organs. I'll present the renderings first.
1. HTML of login interface, one account and one password box, plus 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 number:</label>
<input id="userName" placeholder="enter one user name" type="text" name="name" value="" />
</p>
<p>
<label>password:</label>
<input id="userPwd" placeholder="Please input a password" type="password" name="name" value="" />
</p>
<p>
<input id="login" type="button" name="name" value="Sign in" 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 Obtain input Box, using value
var userPwd = document.getElementById("userPwd").value;
//Verify account and password
if (userName == "wdk" && userPwd == "123456") {
window.location.href = "/donghua.html";
}
else {
alert("Wrong user name or password!");
return;
}
})
</script>
</body>
2. Buffer interface HTML, mainly a GIF image, of course, according to personal preferences you can add some other accessories. The structure is as follows:
<body>
<div style="height:300px;width:300px;margin:0 auto;">
<div id="time01">5</div>
<img src="images/catBall.gif" />
<h3>Desperately loading, please wait</h3>
</div>
<!--js Part-->
<script>
var t = 5;//Custom time is 5 seconds
setInterval("jishi()", 1000); //Timer, call function every 1 second
function jishi() {
if (t==1) {
location = '/shouye.html'; //After buffering, the page will jump to the first page
}
t--; //Self reducing, realizing countdown
document.getElementById("time01").innerHTML = t + "Seconds to go to the home page";
};
</script>
</body>
3. The HTML of the home page, which we call shouye.html, is to automatically enter the home page after buffering. On this page, you can write your own code. The structure is as follows:
<body>
<div style="height:300px;width:300px;margin:0 auto;">
<h3>Here is the homepage interface</h3>
< span > start writing your own code on this page < / span >
<img src="images/jiafeimao.gif" />
</div>
</body>
Postscript: in many web pages, one or more pictures or even videos are used to jump between pages. Of course, there are other ways. The buffering effect of this paper is realized by using a GIF image plus a timer. The content function is not much, but from login to entering the home page, it has a head and a tail. For the friends in need, we hope to find references from it. For the defects or errors of the content, we are welcome to criticize and teach.