web前端实现一个简单的登录页面跳转 |
您所在的位置：网站首页 › web表单验证完毕后才能浏览网页怎么搞 › web前端实现一个简单的登录页面跳转 |
web前端实现一个简单的登录页面跳转
|
本文来源于个人期末前端作业，实现了一个简单的登录验证及页面跳转的功能（如有错误欢迎立即指出） 1.首先是功能页面演示登录页面：
密码输入错误，会出现警示框：
密码正确则跳转到指定页面（本代码实现的是简单的登录验证，采用的用户名和密码都是固定的） 2：代码展示html部分： Document Login function getValue(id) { return document.getElementById(id).value; // 查找元素 } function checkuser() { if(getValue('uname') == "gy" && getValue('pwd') == "123") { return true; }else { alert("登录名或密码错误！") // 警告框 return false; } }注意：from 后面的action属性跳转的页面需要根据自己要跳转的页面设置 css部分： body { background:url("../xc4.jpg") no-repeat center center fixed; background-size:100% 100%; } body{ width: 100%; height: 100%; /* font-family: 'Open Sans',sans-serif; */ margin: 0; /* background-color: rgb(232, 175, 175); */ } .login { position: absolute; /*用position 当浏览器缩小的时候,盒子位置不变 */ top: 50%; left:50%; margin: -150px 0 0 -150px; width: 300px; height: 300px; } .login h1{ color: rgb(12, 7, 7); text-shadow:0 0 10px; letter-spacing: 1px; text-align: center; font-size: 2em; margin: 0.67em 0; } #uname,#pwd{ width: 278px; height: 18px; margin-bottom: 10px; outline: none; padding: 10px; font-size: 13px; color: #fff; text-shadow:1px 1px 1px; border-top: 1px solid #312E3D; border-left: 1px solid #312E3D; border-right: 1px solid #312E3D; border-bottom: 1px solid #56536A; border-radius: 4px; background-color: #2D2D3F; } #but{ width: 300px; min-height: 20px; /*设置段落的最小高度 */ display: block; background-color: #4a77d4; border: 1px solid #3762bc; color: #fff; padding: 9px 14px; font-size: 15px; line-height: normal; border-radius: 5px; margin: 0; } |
【本文地址】
今日新闻 |
推荐新闻 |