1.源代码：
<body class="zumian">
<div class="yemian">
<div class="top">
<span>运程学习与办公在线监督系统</span>
</div>
<div class="anying"></div>
<div class="botton" id="shuru">
<div class="juese">
角色：
<select name="" id="xialakuang">
<option value="0">超级管理员</option>
<option value="1">管理员</option>
<option value="2">学生</option>
</select>
</div>
<div class="name">
姓名: <input type="text" id="xingming">
</div>
<div class="shenfen">
身份证号: <input type="text" id="shenfen">
</div>
<div class="dianhua">
电话号码: <input type="text" id="dianhua">
</div>
</div>
<div class="denglu">
<button id="denglu" class="anniu">登录</button>
</div>
</div>
</body>
2.css样式
*{
margin: 0;
padding: 0;
user-select: none;
outline: none;
font-size: 15px;
}
.zumian{
background: #C8C8C8;
}
.yemian{
position: relative;
width: 463px;
height: 470px;
margin: 150px auto 0;
background-color:#ffffff;
border-radius: 6px;
}
.top{
width: 438px;
height: 60px;
background-color:#189F93;
position: relative;
top: 45px;
left: -22px;
clear: left;
}
.top span{
margin: 0px 0px 0px 0px ;
position: absolute;
top: 20px ;
left: 60px ;
color: aliceblue;
}
.anying{
position: absolute;
top: 105px;
left: -22px;
width: 22px;
height: 12px;
background: url("images/aiwrap.png");
background-size: 24px;
}
.botton{
position: absolute;
top: 140px;
left: 55px;
width: 350px;
height: 300px;
line-height: 55px;
}
.juese{
margin: 0px 0px 0px 32px ;
}
.name{
margin: 0px 0px 0px 32px;
}
.botton input {
width: 250px;
height: 40px;
margin: 0px 0px 0px 0px ;
border: 1px solid #BABABA;
border-radius: 6px;
}
.botton select{
width: 250px;
height: 40px;
border: 1px solid #BABABA;
border-radius: 6px;
margin: 0px 0px 0px -11px ;
}
.denglu{
position: absolute;
top: 395px;
left: 32px;
width: 400px;
height: 47px;
}
.denglu .anniu{
top: 395px;
left: 32px;
width: 400px;
height: 47px;
background-color:#189F93;
border-radius: 10px;
}
3.Js代码
var shuru=[
{
role:"超级管理员",
name:"小红",
idcard:"310106199003078055",
telphone:"18381336811"
},
{
role:"管理员",
name:"小绿",
idcard:"310106199003074337",
telphone:"18381336812"
},
{
role:"学生",
name:"小黄",
idcard:"310106199003076957",
telphone:"18381336813"
}
]
window.οnclick=function(){
var t1=document.getElementById("denglu");
var t2=document.getElementById("xingming");
var t3=document.getElementById("shenfen");
var t4=document.getElementById("dianhua");
//var t5=document.getElementById("xialakuang");
t3.οnblur=function(){
var idcard=this.value;
if(idcard!=""){
var reg=/^\d{18}|\d{15}$/;
if(reg.test(idcard)){
t3.style.borderColor="#ced4da";
}else{
t3.style.borderColor="#f00";
}
}
}
t4.οnblur=function(){
var telphone=this.value;
if(telphone!=""){
var reg=/^1[3-9]\d{9}$/;
if(reg.test(telphone)){
t4.style.borderColor="#ced4da";
}else{
t4.style.borderColor="#f00";
}
}
}
t1.οnclick=function(){
var potion=document.getElementsByTagName("option");
var txtRole=potion[0].text;
console.log(txtRole);
var user=checkPerson(txtRole,t2.value);
console.log(user);
if(user){
if(user.idcard==t3.value&&user.telphone==t4.value){
alert("登陆成功");
document.body.style.backgroundImage="url(5(1))"
}else{
alert("身份证号或电话号码错误，请检查后再登录系统");
}
}else{
alert("用户不存在");
}
};
}
function checkPerson(Role,names){
for(var p in shuru){
console.log(p);//0
if(shuru[p].role==Role&&shuru[p].name==names){
alert(123)
console.log(shuru[p]);
return shuru[p];
}
}
return false;
}
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
