开发工具与关键技术:DW/浏览器 ;简单使用javascript。
作者:刘佳明
撰写时间:2019年 2 月 3 日
本篇为大家呈现一个简单的页面登陆;
要实现一个登陆的页面主要的构造在这为大家简单阐述一下;
主要的css样式构造就不多说;现网络是的登陆页面也是五花八门;下面是我个人在之前所完成的一个登陆页面;
其中,要完成一个登陆页面的实现,是在将用户的信息填写是JavaScript中的点击登陆对信息的正确与否来进行判断;
当前登陆页面的判断会出现以下情况;
- 只输入用户名;
输入用户名错误时效果;
弹出一个提示框;
alert(“您填写的用户名或密码有误,请在输入一遍”)
当输入的用户名正确时的效果;
弹出一个提示框 提示你用户输入正确,但密码未填写;
alert(“您的密码不能为空”);
2.只输入密码时;
输入密码错误时效果;
弹出一个提示框;
alert(“您填写的用户名或密码有误,请在输入一遍”)
当输入的密码正确时的效果;
弹出一个提示框 提示你密码输入正确,但用户未填写;
alert(“您的用户不能为空”);
- 当输入者两者都未填写,直接点击登陆时;效果如下;
- 当登陆者用户名与密码都输入正确时;将会实现一个页面的跳转;效果如下
其中,跳转的这个页面是我个人闲时完成的;各位看官也可以自己创始;
以下为大家附属JavaScript处的代码
<script>
function myFunction(){
var x = document.getElementById("demo").value;
var z=document.getElementById("name").value;
var y = document.getElementById("damo");
/*console.log(z);*/
/*alert('恭喜发财')*/
if(x==""&&z==""){
alert("表格内不能为空");
}
else{
if(x=="123456"&&z=="my"){
y.href = "图片查看/project.html";
}
else if(x==""&&z=="my"){
alert("您的密码不能为空");
}
else if(x=="123456"&&z==""){
alert("您的用户名不能为空");
}
else{
alert("您填写的用户名或密码有误,请在输入一遍")
}
}
}
</script>