html登陆界面-JavaScript——登录页面的简单实现

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

撰写时间：2019年2月3日

本文为您呈现一个简单的页面登录；

实现一个登录页面的主要结构，这里给大家简单的讨论一下；

主要的css样式结构我就不多说了； 互联网上还有各种登录页面； 以下是我之前亲自完成的登录页面；

其中html登陆界面，完成一个登录页面的实现就是填写用户信息并点击登录，用JavaScript判断信息是否正确；

当前登录页面的判断会出现以下几种情况；

仅输入用户名；

输入错误用户名时的效果；

弹出提示框；

Alert("您的用户名或密码不正确，请重新输入")

输入用户名正确时的效果；

弹出提示框提醒您用户输入正确，但密码未填写；

alert("您的密码不能为空");

2、仅输入密码时；

密码输入错误时的效果；

弹出提示框；

Alert("您的用户名或密码不正确html登陆界面，请重新输入")

输入密码正确时的疗效；

弹出提示框提醒您密码输入正确，但用户未填写；

alert("您的用户不能为空");

当输入者三项都填写失败并点击直接登录时； 疗效如下；

当登录用户名和密码输入正确时； 实现页面跳转； 疗效如下

其中，我跳转到的页面是我在业余时间完成的； 您也可以自己创建；

下面是附加的 JavaScript 代码

	function myFunction(){
		var x = document.getElementById("demo").value;
		var z=document.getElementById("name").value;
		var y = document.getElementById("damo");
		
		/*console.log(z);*/
			/*alert('恭喜发财')*/
		if(x==""&&z==""){
				alert("表格内不能为空");
					}
		else{
			if(x=="123456"&&z=="my"){
			
				y.href = "图片查看/project.html";
			
				}
				else if(x==""&&z=="my"){
					alert("您的密码不能为空");
				
				}
				else if(x=="123456"&&z==""){
					alert("您的用户名不能为空");
				
				}
			else{
				alert("您填写的用户名或密码有误，请在输入一遍")
			}
		}
		
	}