HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<div class="login">
<h4 class="text-center text-muted">电影登陆系统</h4>
<form>
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="请输入账号...." id="username" name="username" />
<div class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input class="form-control" placeholder="请输入密码...." id="password" name="password" type="password" />
<div class="input-group-addon">
<i class="glyphicon glyphicon-edit"></i>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-8">
<input class="form-control" placeholder="请输入验证码...." id="yzm" name="yzm" />
</div>
<div class="col-md-3">
<div class="yzm">
4444
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-success btn-group-justified" type="button" id="login_btn">登陆</button>
</div>
</form>
</div>
</body>
</html>
Js:
<script>
//用户名
$("#username").blur(function(){
var oUsername = $(this).val()
if(oUsername=="" || oUsername!="admin"){
$(this).parents(".form-group").addClass("has-error").removeClass("has-success")
}else{
$(this).parents(".form-group").addClass("has-success").removeClass("has-error")
}
})
//用户名
//密码
$("#password").blur(function(){
var oPassword = $(this).val()
if(oPassword=="" || oPassword!="1234"){
$(this).parents(".form-group").addClass("has-error").removeClass("has-success")
}else{
$(this).parents(".form-group").addClass("has-success").removeClass("has-error")
}
})
//密码
//验证
var arr = [0,1,2,3,4,5,6,7,8,9]
var len = 4
var str = ""
function code(){
str = ""
for (var i=0;i<len;i++) {
var a = arr[Math.floor(Math.random()*10)]
str+=a
}
$(".yzm").text(str)
}
code()
$(".yzm").click(function(){
var oCode = $(this).text()
var oYZM = $("#yzm").val()
if(oCode==oYZM){
// alert("大哥别点了")
}else{
code()
}
})
$("#yzm").blur(function(){
var oYzm = $(this).val()
var oCode = $(".yzm").text()
if(oYzm!=oCode){
$(this).parents(".form-group").addClass("has-error").removeClass("has-success")
}else{
$(this).parents(".form-group").addClass("has-success").removeClass("has-error")
}
})
//验证
//登陆
$("#login_btn").click(function(){
// if($(".form-group").eq(0).hasClass("has-success")&& $(".form-group").eq(1).hasClass("has-success")&& $(".form-group").eq(2).hasClass("has-success")){
// window.location.href="home.html"
// }else{
// alert("不可以登陆")
// }
if($("#username").val()=="admin" && $("#password").val()=="1234" && $("#yzm").val()==$(".yzm").text()){
window.location.href="home.html"
}else{
alert("不可以登陆")
}
//
})
</script>
CSS:
body {
/*background:black;*/
background: url(img/bg.jpg) no-repeat;
}
.login {
width: 320px;
margin: 200px auto;
border: 1px solid #ddd;
background: rgba(255, 255, 255, 0.5);
padding: 10px;
border-radius: 4px;
box-shadow: 1px 2px 10px #333333;
}
.yzm {
height: 34px;
background: #F8F8F8;
text-align: center;
line-height: 34px;
font-size: 16px;
cursor: pointer;
}
1622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
