用户登录界面

最新推荐文章于 2020-03-26 11:31:19 发布

Simms叔叔

最新推荐文章于 2020-03-26 11:31:19 发布

阅读量446

点赞数 1

分类专栏：前端文章标签：用户登录界面

本文链接：https://blog.csdn.net/qq_43241999/article/details/102538011

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用户登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<script>
    var DB;
    //创建数据库方法
    function initDatabase() {
        if(!window.openDatabase){
            alert('浏览器不支持Web SQL数据库.');
        }else {
            var dbName = 'mydb';//定义数据库名称
            var dbVersion = '1.0';//定义数据库版本
            var dbDec = 'DEMO Database';//定义数据库说明信息
            var dbSize = 100000;//定义数据库大小
            DB = openDatabase(dbName,dbVersion,dbDec,dbSize);//创建数据库
        }
    }
    //创建数据表
    function createTable() {
        DB.transaction(function (tx) {
            tx.executeSql('create table if not exists 	USERINFO(USERNAME,PASSWORD,EMAIL,HOBBY)');
            });
    }
    //注册方法
    function register() {
        initDatabase();
        createTable();
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var email = document.getElementById("email").value;
        var hobby = document.getElementById("hobby").value;
        DB.transaction(function (tx) {
            tx.executeSql(
                'select * from USERINFO where USERNAME = ?',
                [username],
                function (tx,rs) {
                    if(rs.rows.length>0)//用户名已经存在
                    {
                        alert("该用户名已经存在,请使用其他用户名注册.");
                    }
                    else
                    {
                        DB.transaction(function (tx) {
                            tx.executeSql(      //将新用户注册信息插入数据库
                                'insert into 	USERINFO(USERNAME,PASSWORD,EMAIL,HOBBY) values(?,?,?,?)',
                                [username,password,email,hobby],
                                function (tx,rs) {
                                    alert('注册成功');
                                },
                                function (tx, error) {
                                    alert('注册失败');
                                }
                             );
                        });
                    }
                }
            );
        });
    }
    //登陆方法
    function login() {
        initDatabase();
        var username = document.getElementById("login_username").value;
        var password = document.getElementById("login_password").value;
        DB.transaction(function (tx) {
            tx.executeSql(
                'select * from USERINFO where USERNAME=? and PASSWORD=?',
                [username,password],
                function (tx,rs) {
                    if (rs.rows.length==0)      //未查询到指定用户名与密码的用户信息
                    {
                        alert("登陆失败");
                    }
                    else
                    {
                        var msg = '';
                        for (var i = 0;i<rs.rows.length;i++)
                        {
                            msg += '您好,' +rs.rows.item(i).USERNAME
                            +'\n\n您的email是:' + rs.rows.item(i).EMAIL
                            +'\n\n您的爱好是:' + rs.rows.item(i).HOBBY;
                        }
                        alert(msg);
                    }
                }
            );
        });
    }
</script>
<body>
<div>
<div style="float: left;border-style: outset;width: 300px;height: 300px">
    <center>
        <h2>注册新用户</h2>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" id="username"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" id="password"></td>
            </tr>
            <tr>
                <td>电子邮箱</td>
                <td><input type="text" id="email"></td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td><input type="text" id=""></td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                <input type="button" value="注册新用户" onclick="register()"/>
                </td>
            </tr>
        </table>
    </center>
</div>
<div style="float: left; border-style: outset; margin-left: 30px;width: 300px;height: 300px">
    <center>
        <h2>用户登录</h2>
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" id="login_username"/></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" id="login_password"/></td>
            </tr>
            <tr>
               <td colspan="2" align="right">
                   <input type="button" value="用户登录" onclick="login()"/>
               </td>
            </tr>
        </table>
    </center>
</div>