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

实现了注册，登录流程
html+js实现简单四六级报名系统第一天
当点击注册，跳转到另一个页面

输入账户密码后，数据将会保存在数据库当中去，不能重复注册
注册完成后点击登录，跳转到下一个页面（待完成）
实现数据库的操作参考的：https://blog.****.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实现简单四六级报名系统 第一天

相关推荐

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