如何用最基本的前端知识做一个最简单登录界面

最新推荐文章于 2022-12-28 20:43:26 发布

inathanxu

最新推荐文章于 2022-12-28 20:43:26 发布

阅读量1.1k

点赞数 1

文章标签： web javascript css

本文链接：https://blog.csdn.net/qq_35908441/article/details/107453254

版权

直接上源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
</head>
<script type="text/javascript">
	function check(){
		var userName =document.getElementById("useerName").value;
		var password =document.getElementById("password").value;
		var tipUserName=document.getElementById("tipUserName");
		var tipUserName=document.getElementById("tipPassword");
		if(userName!=""){
			if(password!="")
				{
					if(userName=="admin"){
						if(password=="123"){
							alert("登陆成功！")；
						} else｛
						tipPassword.innerText="密码错误！"；
						｝
					}else{
						tipUserName.innerText="账号错误！";
					}
				}else{
					tipPassword.innerText="密码不能为空！";
				}
		}else{
			tipUserName.innerText="账号不能为空！";
		}
	}
	</script>
<body align="center">
	<br><br><br><br><br><br>
	账号：
	<input type="text" name="userName" id="userName"oninput="document.getElementById('tipUserName').innerText ='';">
	<p id="tipUserword" style="color: red;display: inline;"></p><br>
	密码：
	<input type="password"name="password" id="password" oninput="document.getElementById('tipPassword').innerText='';"><p id="tipPassword"
	style="color:red;display: inline;"></p>	<br>																							<input type="button" id="btnSubmit"	onclick="check();"	value="提交">	  
																													
</body>
</html>

他的结果是这样的：
在这里插入图片描述

兄弟！别要求太多好吧！应付你的社团作业还是绰绰有余的！！
在这里插入图片描述

inathanxu

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何用最基本的前端知识做一个最简单登录界面

直接上源码<!doctype html><html><head><meta charset="utf-8"><title>登录界面</title></head><script type="text/javascript"> function check(){ var userName =document.getElementById("useerName").value; var pass
复制链接

扫一扫