| 利用JS实现简单登录 | 您所在的位置：网站首页 › js显示登录成功怎么回事啊 › 利用JS实现简单登录 |
利用JS实现简单登录
|
本文将介绍如何利用JS实现简单的账户验证及登录跳转。 目录 HTML JS CSS 背景图 测试 HTML首先建立跳转页。 系统首页 登录成功！此为系统首页模拟页面。然后建立登录页。 管理系统 网站管理系统© 2022 ocean 版权所有 JS 然后建立JS。 function check(thisform) { var name=document.getElementById("name").value; //读取表单数据，创建变量 var pass=document.getElementById("pass").value; if (name=="admin" && pass=="123456" || name=="admin2" && pass=="456789") { //验证变量。此处设置账号、密码（可设置多组，用||隔开） alert("登录成功！"); window.document.f.action="test.html"; //此处设置登录后跳转页面 window.document.f.submit(); } else{ alert("用户名或密码错误！"); } }CSS 然后建立CSS。笔者选的颜色不好，仅作示例。 这里将文本框与按钮分开设置，分原始与悬停两种情况。并设置了阴影。 html{ background-image: url("de.jpg"); } form{ text-align: center; position: absolute; /*表单于页面居中*/ top: 50%; left: 50%; transform: translate(-50%, -50%); } input[type=text],input[type=password]{ background-color: white; /*正常状态样式*/ color: black; border:none; border-radius: 20px; outline: none; text-align: center; height: 50px; width: 250px; margin: 5px; } input[type=button]{ background-color: #45A0F2; /*正常状态样式*/ color: white; border:none; border-radius: 20px; outline: none; text-align: center; height: 50px; width: 250px; margin: 5px; } input[type=text]:hover,input[type=password]:hover{ outline: none; /*悬停时样式*/ background-color: #65BCD6; color: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19); /*阴影*/ } input[type=button]:hover{ outline: none; /*悬停时样式*/ background-color:#168DBE; color: white; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.45), 0 6px 20px 0 rgba(0,0,0,0.19); /*阴影*/ }背景图 
de.jpg
测试 最后测试，perfect！ 
测试图
千古风流多少事（ocean） 2022.2.3 21:52 首编首发 |
【本文地址】
公司简介
联系我们