用户登录界面设计代码js(用户登录界面设计代码java)
javascript 网页登陆代码
js是客户端语言，不具有操作数据库等动态语言的功能！
js唯一的可以影响数据库的是ajax，用它影响动态语言（asp、php)等，从而间接影响数据库
javascript html 设计一个登录界面
注册页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title注册/title
/head
body
form?method="post"?onsubmit="return?false"?id="form"
????input?type="text"?name="username"?placeholder="用户名"br
????input?type="password"?name="password"?placeholder="密码"br
????input?type="password"?name="rePassword"?placeholder="再次输入密码"br
????input?type="submit"?onclick="register_user()"?value="注册"br
/form
a?href="login.html"去登录/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????});
????function?register_user()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????var?rePassword?=?document.getElementsByTagName("input")[2].value;
????????if(password?!=?rePassword)
????????{
????????????alert("两次输入的密码不同，请重新输入");
????????}else
?{
????????????localDB.transaction(function(ts){
????????????????ts.executeSql("INSERT?INTO?user?(username,password)?VALUES?('"+username+"','"+password+"');");
????????????????alert("注册成功");
????????????});
????????}
????}
/script
/body
/html
登录页面代码：
!DOCTYPE?html
html?lang="en"
head
????meta?charset="UTF-8"
????title登录/title
/head
body
form?onsubmit="return?false"?method="post"
????input?type="text"?placeholder="用户名"br
????input?type="password"?placeholder="密码"br
????input?type="submit"?value="登录"?onclick="login()"br
/form
a?href="register.html"去注册/a
script
????var?localDB?=?openDatabase('localDB',?'1.0',?'Test?DB',?2?*?1024?*?1024);
????localDB.transaction(function?(ts)?{
????????ts.executeSql("SELECT?*?FROM?user",[],function?(tx,?results)?{
????????????var?len?=?results.rows.length;
????????????if(len=0)
????????????{
????????????????localDB.transaction(function?(ts)?{
????????????????????ts.executeSql('CREATE?TABLE?IF?NOT?EXISTS?user(username,password)')
????????????????});
????????????}
????????});
????});
????function?login()?{
????????var?username?=?document.getElementsByTagName("input")[0].value;
????????var?password?=?document.getElementsByTagName("input")[1].value;
????????localDB.transaction(function?(ts)?{
????????????ts.executeSql("SELECT?*?FROM?user?WHERE?username='"+username+"';",[],function?(ts,?res)?{
????????????????if(res.rows.length=0)
????????????????{
????????????????????alert("登录失败，用户未注册");
????????????????}else?if?(password?==?res.rows[0].password)
????????????????{
????????????????????alert("登录成功,三秒后跳转到百度");
????????????????????setInterval(function?()?{
????????????????????????location.href?=?"";
????????????????????},3000);
????????????????}else
?{
????????????????????alert("登录失败，密码错误");
????????????????}
????????????});
????????})
????}
/script
/body
/html
以上代码使用了WEB SQL，还请选择合适的浏览器查看。
如何用js制作Tab栏官网登录界面
1、在桌面找到并且打开js软件。
2、新建一个项目，并且保存打开项目。
3、依次写入想要的官网代码即可。以上就是用js制作tab栏官网登录界面的方法。