【Java学习20170418】CSS、JavaScript_html+css+js+java架构-优快云博客

CSS

JavaScript

在网页中实现菱形输出

用js实现简单的登陆验证界面逻辑

<!DOCTYPE html>
<html>
	<head><title>登陆界面</title>
	
	
	</head>
	<body>
		<form action="" name="myform">
			<table>
				<tr>
					<td>用户名：<input type="text" id="user"></td>
					<td><span id="usershow"></span></td>
				</tr>
				<tr>
					<td>密 码：<input type="password" id="password"></td>
					<td><span id="passwordshow"></span></td>
				</tr>
				<tr>
					<td><input type="button" onclick="d()" value="登陆"></td>
					<td><span id="successshow"></span></td>
				</tr>
			</table>
		</form>
	</body>
	<script type="text/javascript">
			
		function d(){
			var user = document.getElementById("user");
			var password = document.getElementById("password");
			var usershow = document.getElementById("usershow");
			var passwordshow = document.getElementById("passwordshow");
			var successshow = document.getElementById("successshow");
			if(user.value=="edison"&&password.value=="123"){
				successshow.innerHTML="登录成功";
			}
			if(user.value!="edison"){
				usershow.innerHTML ="账号错误";
				passwordshow.innerHTML="";
			}
			if(user.value=="edison"&&password.value!="123"){
				passwordshow.innerHTML="密码错误";
				usershow.innerHTML="";
			}
		}
	</script>
	
</html>