<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到登录界面，请登录</title>
<script type="text/javascript" src="../static/js/cao.js"></script>
<link rel="stylesheet" href="../static/css/font-awesome.min.css"/>
<link rel="stylesheet" href="../static/css/loginMy.css"/>
<link rel="stylesheet" href="../static/css/20.css"/>
<script>
function mySwitch() {
var oBody=document.getElementById("mybody");
var oOnOff=document.getElementById("myOnOff");
if (oOnOff.src.match("b9999_")){
oOnOff.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1509520370&di=f7ae57dab90eab30c78e8f4733607b02&src=http://pic29.photophoto.cn/20131121/0017029581107509_b.jpg" ;
oBody.style.background="black"
oBody.style.color="white";
}else {
oOnOff.src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg";
oBody.style.background="yellow"
oBody.style.color="black";
}
}
</script>
</head>
<body id="mybody">
<nav style="color: aliceblue">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1508335637&di=7f106eb01be1fcf1aecfbaa51a30b899&src=http://apps1.bdimg.com/store/static/kvt/d2159e26d2482d785baa15d7d49e3339.png" style="width: 50px">
<img id="myOnOff" onclick="mySwitch()" width="40px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1509532539555&di=5c7e5df90fa122e5a6dcae2de5fb45d5&imgtype=0&src=http%3A%2F%2Fwww.jbhdq.com%2Fuploadfile%2F2016%2F0617%2F20160617103213932.jpg">
<input align="center" type="text" placeholder="hahahahaha" style="width: 200px" >
<button type="submit" style="background-color: brown" >搜索</button>
<a href="" target="_blank">进入跑酷世界</a>
</nav>
<div class="main" style="width: 300px;margin-left: auto;margin-right: auto">
<div id="header"><h2 align="center">登陆界面</h2></div>
<div class="content">
<p align="center">用户 ：<input id="uname" type="text" name="user" placeholder="请输入账号"></p>
<p align="center"> 密码 ：<input id="upass" type="password" name="psw" placeholder="请输入密码"></p>
<br>
<div id="error_box"><br>
</div>
<br>
<input type="checkbox" value="true" id="dd" >记住密码 <br>
<p align="center"><button onclick="fnLogin()">登录</button></p>
<a href="register.html"><p align="center"><button onclick="fnLogin()">注册</button></p></a>
   
</div>
<div id="footer"><h3 align="center">版权所有@</h3></div>
<div class="recomend">
<div class="img">
<a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
<div class="dec">
<a href="http://www.gzcc.cn/">校园风光</a></div>
</div>
</div>
<div class="recomend">
<div class="img">
<a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
<div class="dec">
<a href="http://www.gzcc.cn/">校园风光</a></div>
</div>
</div>
<div class="recomend">
<div class="img" >
<a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
<div class="dec">
<a href="http://www.gzcc.cn/">校园风光</a></div>
</div>
</div>
<div class="recomend">
<div class="img">
<a href="http://www.gzcc.cn/"><img src="http://p2.so.qhimgs1.com/t0155506fc264d7422e.jpg"></a>
<div class="dec">
<a href="http://www.gzcc.cn/">校园风光</a></div>
</div>
</div>
</div>
</body>
</html>
V
javascript
var user = document.getElementById("user");
var pwd = document.getElementById("pwd");
var surePwd = document.getElementById("surePwd");
//获取span的所有id
var user_pass = document.getElementById("user_pass");
var pwd_pass = document.getElementById("pwd_pass");
var surePwd_pass = document.getElementById("surePwd_pass");
function checkUser(){
//如果昵称未输入，则提示输入昵称
if(!user.value){
user_pass.style.fontSize = "13px";
user_pass.style.width="31%";
user_pass.style.height="2em";
user_pass.style.textAlign="center";
user_pass.style.lineHeight="2em";
user_pass.style.marginTop=‘0.05%‘
user_pass.innerHTML = ‘你还没有填写用户名哦。‘;
user_pass.style.display="block";
}
else if(user.value){
user_pass.style.display="none";
}
}
//输入密码提示
function checkUser1(){
//如果未输入密码，则提示请输入密码
if(!pwd.value){
pwd_pass.style.fontSize = "13px";
pwd_pass.style.width="31%";
pwd_pass.style.height="2em";
pwd_pass.style.textAlign="center";
pwd_pass.style.lineHeight="2em";
pwd_pass.innerHTML = ‘你还没有填写密码哦。‘;
pwd_pass.style.display="block";
}
else{
pwd_pass.innerHTML =‘‘;
pwd_pass.style.backgroundColor= "#fff";
pwd_pass.style.border="none";
pwd_pass.style.display="none";
}
}
//确认密码提示
function checkUser2(){
//再次确认密码
if(!surePwd.value){
surePwd_pass.style.fontSize = "13px";
surePwd_pass.style.width="31%";
surePwd_pass.style.height="2em";
surePwd_pass.style.textAlign="center";
surePwd_pass.style.lineHeight="2em";
surePwd_pass.innerHTML = ‘你还没有填写验证码哦‘;
surePwd_pass.style.display="block";
}
else{
surePwd_pass.innerHTML =‘‘;
surePwd_pass.style.backgroundColor= "#fff";
surePwd_pass.style.border="none";
surePwd_pass.style.display="none";
}
}
function submitB(){
if(!user.value){
user_pass.style.fontSize = "13px";
user_pass.style.width="31%";
user_pass.style.height="2em";
user_pass.style.textAlign="center";
user_pass.style.lineHeight="2em";
user_pass.innerHTML = ‘请填写您的用户名。‘;
user.focus();
return false;
}
if(!pwd.value){
pwd_pass.style.fontSize = "13px";
pwd_pass.style.width="31%";
pwd_pass.style.height="2em";
pwd_pass.style.textAlign="center";
pwd_pass.style.lineHeight="2em";
pwd_pass.innerHTML = ‘请填写您的用户密码。‘;
pwd.focus();
return false;
}
if(!surePwd_pass.value){
surePwd_pass.style.fontSize = "13px";
surePwd_pass.style.width="31%";
surePwd_pass.style.height="2em";
surePwd_pass.style.textAlign="center";
surePwd_pass.style.lineHeight="2em";
surePwd_pass.innerHTML = ‘请填写您的登录验证。‘;
surePwd_pass.focus();
return false;
}
else{
var f = sendParam();
return f;
}
}
function fnLogin() { var oUname = document.getElementById("uname") var oUpass = document.getElementById("upass") var oUpass2=document.getElementById("upass2"); var oError = document.getElementById("error_box") oError.innerHTML="<br>" if (oUname.value.length > 20 || oUname.value.length < 6) { oError.innerHTML = "请输入用户名6-20位字符" return; }else if ((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="用户名首字母必须是字母" return; }else for(var i=0; i<oUname.value.length;i++){ if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){ oError.innerHTML="用户名必须为字母或数字"; return; } } if (oUpass.value.length > 20 || oUpass.value.length < 6) { oError.innerHTML = "请输入密码 6-20位字符" return; } else if (oUpass.value!==oUpass2.value){ oError.innerHTML="两次密码不一致"; return; } window.alert("注册成功") }
css
div.img{ border: 1px solid #ccc; width: 180px; float: left; margin: 5px; } div.img img{ width:100%; height: auto; } div.dec{ text-align: center; padding: 5px; } div.img:hover{ border: 1px solid #000000; } div.clearfloat{ clear: both; }
原文：http://www.cnblogs.com/cyj5201314/p/7773694.html