html+js实现简单四六级报名系统第一天

实现了注册，登录流程

当点击注册，跳转到另一个页面

输入账户密码后，数据将会保存在数据库当中去，不能重复注册
注册完成后点击登录，跳转到下一个页面（待完成）
实现数据库的操作参考的：https://blog.csdn.net/sweetllh/article/details/76408472###

代码：

login.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>英语四六级在线报名</title><style type="text/css">body{background-image: url(../images/test2.jpg)}</style></head><body><h1 style="position: absolute; left: 38%;">四六级在线报名系统</h1><div style="position: absolute;top: 200px;left: 40%;"><p>请输入账户名</p><!--默认value为空--><input id="username" type="text"/><br /></div><div style="position: absolute;top: 300px;left: 40%; "><p>请输入密码</p><input id="password" type="password"/></div><div id="submit" style="position: absolute; top: 400px; left: 40%;"><!--ctr+/快速注释--><!--<input type="submit" value="登录" /><input type="button" value="注册" style="margin-left: 83px;"/>--><button type="button" id="register">注册</button><button type="submit" id="btn" style="margin-left: 83px;" onclick="iflogin()">登录</button></div><script src="login.js" type="text/javascript"> </script></body>
</html>

var aInputs = document.getElementsByTagName('input');
//数据库名，版本号，数据库描述，数据大小，没有就创建
var db = openDatabase('zuche', '1.0', 'textdb', '1024*1024');
db.transaction(function(contex) {contex.executeSql('create table if not exists userinf(id integer primary key AutoIncrement,name,password)');
});
var oBtn = document.getElementById('btn');
var reg=document.getElementById('register');
var blogin = true;
reg.onclick=function(){window.location.href="register2.html";
}
oBtn.onclick = function() {if(aInputs[0].value && aInputs[1].value) {db.transaction(function(contex) {contex.executeSql('select * from userinf', [], function(con, data) {var leg = data.rows.length,i;console.log(leg);for(var i = 0; i < leg; i++) {if(aInputs[0].value == data.rows.item(i).name && aInputs[1].value == data.rows.item(i).password) {console.log(data.rows.item(0).name);console.log(data.rows.item(0).password);blogin = false;break;}}if(blogin) {alert('请输入正确的账号和密码！');} else {alert('登陆成功！');}});});} else {alert('请填写完整的账号密码！');}
}

  <!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{background-image: url(../images/register2.jpg);}</style></head><body><div align="center"><h1>注册账号</h1><p>请输入用户名</p><input type="text" /><p>请输入密码</p><input type="password" /><br /><br /><button type="submit" id="btn">注册</button></div><script src="register.js" type="text/javascript"></script></body>
</html>

var aInputs = document.getElementsByTagName('input');
var db = openDatabase('zuche', '1.0', 'textdb', '1024*1024');
db.transaction(function(contex) {contex.executeSql('create table if not exists userinf(id unique,name,password)');
});
var oBtn = document.getElementById('btn');
var num = 0;
oBtn.onclick = function() {if(aInputs[0].value && aInputs[1].value) {db.transaction(function(contex) {//con的作用是什么contex.executeSql('select * from userinf', [], function(con, data) {var leg = data.rows.length,i;//先提示注册成功？为何会先执行后面的代码？for(var i = 0; i < leg; i++) {if(aInputs[0].value == data.rows.item(i).name) {alert('该用户名已注册！');return;}}num = leg + 1;});contex.executeSql('insert into userinf(id,name,password) values("' + num + '","' + aInputs[0].value + '","' + aInputs[1].value + '")');alert('注册成功');
//          window.location.href="login.html"});} else {alert('请填写完整的账号密码！');}
}

代码还有许多值得精简的地方，但饶了弯路反而学习到更多
问题：有时候注册需要点击多次才能完成注册

html+js实现简单四六级报名系统第一天相关推荐

【计算机毕业设计】Java ssm高校英语四六级报名系统
毕设帮助.源码交流及指导,见文末随着报名人数不断的增加,而且高校四六级报名管理系统也通过网络系统来完成日常高校四六级报名管理系统信息中的各种需求,所以网上高校四六级报名管理系统的开发给学生带来了足够 ...
四六级考试报名系统c语言,四六级考试系统课程设计报告.doc
四六级考试系统课程设计报告 <.NET架构及应用>期末考试 (课程设计总结) 设计名称: 英语四.六级考试报名系统组长: 白缔祖参加人: 白缔祖.霍晓文指导教师: 付向东班 ...
java计算机毕业设计高校四六级报名管理系统源程序+mysql+系统+lw文档+远程调试
java计算机毕业设计高校四六级报名管理系统源程序+mysql+系统+lw文档+远程调试 java计算机毕业设计高校四六级报名管理系统源程序+mysql+系统+lw文档+远程调试本源码技术栈: 项目 ...
用JSP/Servlet应用开发一个简单的考试报名系统
用JSP/Servlet实现一个简单的考试报名系统背景一.任务/要求二.对项目需求进行简要的建模概括分析. 2.项目实现. 2.1项目结构. 2.1.1层次结构 2.1.1数据表结构. 2.2项 ...
php四六级报名考试源码,又一波省市6月四六级报名时间公布！速看！
一起来看,有你们所在省和学校吗? 根据各省教育考试院官网的报名公告,可以确定 2021 年上半年四六级考试时间是: 2021 年上半年英语四六级考试时间英语四级考试时间四级笔试 : 6 月 12 ...
南开计算机要过英语四六级吗,（天津）南开大学2017年6月英语四六级报名通知...
[手机用户]→点击进入免费试听>>[CET4] * [CET6] [电脑用户]→点击进入免费试听>>四六级考试课程! (天津)南开大学2017年6月英语四六级报名通知根据教育 ...
昆明理工大学毕业的英语及计算机资格怎么填,昆明理工大学2019年12月四六级报名流程...
2019年下半年大学英语四六级考试报名于9月开始.具体各省大学英语四六级笔试.大学英语四六级口试报名时间.报名官网均不一致,英语四六级考试报名网站除少数省份有统一报名入口外,一般采用的是以院校为考点. ...
分享一下英语四六级报名过程中遇到的惊心动魄的问题
早在26号学校就下达了通知,可以报名六级了,但是我由于昨晚睡太晚,上午十点半开始报名的时候自己迷迷糊糊没带电脑,想着中午吃完饭后再去图书馆把名报了(这里我犯了第一个错误,四六级报名不需要电脑,手机平板 ...
【计算机毕业设计】基于微信小程序的英语四六级助手系统
毕设帮助.技术指导.源码交流,联系方式见文末. 随着社会的发展和科学技术的进步,互联网技术越来越受欢迎.网络传播的生活方式逐渐受到广大人民群众的喜爱.越来越多的互联网爱好者开始在互联网上满足他们的基本 ...

html+js实现简单四六级报名系统第一天

html+js实现简单四六级报名系统第一天相关推荐

最新文章

热门文章

html+js实现简单四六级报名系统 第一天

html+js实现简单四六级报名系统 第一天相关推荐

最新文章

热门文章

html+js实现简单四六级报名系统第一天

html+js实现简单四六级报名系统第一天相关推荐