用户登录模拟效果(原生js实现)
需求:
当用户名和密码获得焦点时,文本框背景颜色变黄,失去焦点时背景颜色恢复,
然后判断是否为空,如果为空,则给出提示,同时文本框继续获得焦点。如图所示。
单击登录按钮后,判断用户名(admin)和密码(123)是否正确。
若错误,则提示用户名或密码错误,
若正确,网页跳转到网页www.baidu.com.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function p1(){
document.getElementById("q1").innerHTML="";
document.getElementById("q2").innerHTML="";
var name = document.getElementById("name").value;
var pw = document.getElementById("pw").value;
if(name==""){
document.getElementById("q1").innerHTML="用户名不能为空!";
onover();
return;
}
if(name=="admin"){
if(pw=="123"){
window.location.href ='http://www.baidu.com';
}else{
document.getElementById("q2").innerHTML="密码错误!";
}
}else{
document.getElementById("q1").innerHTML="用户名错误!";
}
}
function onover(){
document.all.name.style.background="#EEEE00 ";
}
function onout(){
document.all.name.style.background="#fff";
}
function onover1(){
document.all.name.style.background="#fff";
document.all.pw.style.background="#EEEE00 ";
}
function onout1(){
document.all.pw.style.background="#fff";
}
</script>
<style>
.jdt{ width:400px; height:300px; border:1px #000 solid;}
#q1,#q2{color:red;}
</style>
</head>
<body>
<div class="jdt">
<h2 style="text-align:center;">用户登录</h2>
用户名:<input type=" text" name="name" value="" id="name" onfocus="onover();" onblur="onout();"/>
<span id ="q1"></span><br><br>
密 码 :<input type="text" name="password" value="" id="pw" onfocus="onover1();" onblur="onout1();"/>
<span id ="q2"></span><br>
<input type="button" name="an" value="登录" onclick="p1();">
</div>
</body>
</html>
点击查看更多内容
30人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦