前端-h5 移动端星空效果注册界面

最新推荐文章于 2024-04-28 15:34:18 发布

JokerLee...

最新推荐文章于 2024-04-28 15:34:18 发布

阅读量1.3k

点赞数 3

分类专栏：前端移动端文章标签： javascript jquery vue.js

本文链接：https://blog.csdn.net/qq_43399210/article/details/109162502

版权

前端同时被 2 个专栏收录

24 篇文章 2 订阅

订阅专栏

移动端

3 篇文章 1 订阅

订阅专栏

H5移动端登录界面

分享个人在学习前端过程中自己做的移动端的登录和和注册界面，部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。

html代码
下面是注册界面的HTML代码

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" href="frozen.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width = device-width,initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <script type="text/javascript" src="./js/vue.min.js"></script>
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <script src="./js/jQuery.js"></script>
    <script src="./js/prefixfree.min.js"></script>

</head>

<body>
    <div class="stars"></div>
    <div id="app" :style="appstyle">
        <h1>{{onlode()}}</h1>

        <!-- <img class="userimg" :src="imgsrc" :style="imgstyle"> -->
        <section class="user_input_sec" :style="secstyle">

            <div class="username_box">
                <input id="loginName" class="username_input" type="text" name="" placeholder="邮箱/手机号/帐号">
            </div>
            <div class="password_box">
                <input id="loginPsd" class="password_input" type="password" name="" placeholder="请输入密码"
                    >
            </div>
            <div class="password_box1">
                <input id="loginPsd2" class="password_input1" type="password" name="" placeholder="请确认输入密码"
                    >
            </div>
            <div class="submit_box" >
                <input class="submit_input" type="submit" name="" value="注册"  :style="loginbutstyle" onclick="register()" >
            </div>

            <div class="bot_text">
                <div class="txt">登录即同意 <a href="#">《用户协议》</a> </div>
                <br>
                <a @click='login()'>登录</a>

            </div>
        </section>

        <div class="tiao" id="hide"><a href="./index1.html">跳过登录 下次再说!!!</a></div>

    </div>



</body>

</html>

js代码
下面是js相关代码用到了jQuery 和Vue，利用数据缓存实现了注册和登录的效果

实现登录注册的方法
<script>
    $(function () {
            $('#loginName,#loginPsd,#loginPsd2').focus(function () {
                console.log('1');
                $('#hide').css('display', 'none');
            })
            .blur(function () {
                console.log('2');
                $('#hide').css('display', 'block');
            });
        })
    /**
     * 注册的主方法
     */
    function register() {
        if(isNone()) {
            // 定义一个空数组
            let arr = [];
            if(localStorage.user) {
                arr = eval(localStorage.user);
                for(e in arr) {
                    // 取出数据判断是否注册过
                    if($('#loginName').val().trim() == arr[e].loginName) {//$.trim() 函数用于去除字符串两端的空白字符。
                        alert('该账号已被注册');
                        clear();
                        return;
                    }
                }
            }
            const user = {
                'loginName': $("#loginName").val(),
                'loginPsd': $("#loginPsd").val()
            };
            // 添加数据
            arr.push(user);
            localStorage.user = JSON.stringify(arr);
            alert('注册成功');
            window.location.href="./index.html";
            clear();
        }
    }
    
    /**
     * 清空数据
     * 等同于
     * document.getElementById("loginName").value="";
     * document.getElementById("loginPsd").value="";
     */
    function clear() {
        $('#loginName').val('');
        $("#loginPsd").val('');
        $("#loginPsd2").val('');
    }
    
    /**
     * 注册的验证方法
     * 是否为空的判断
     * 两次密码是否相等的判断
     */
    function isNone() {
        if($('#loginName').val().trim() == "") {
            alert('用户名不能为空');
            return false;
        } else if($('#loginPsd').val().trim() == "") {
            alert('密码不能为空');
            return false;
        } else if($('#loginPsd').val().trim() != $('#loginPsd2').val().trim()) {
            alert('两次密码不一致，请检查！');
            return false;
        }
        return true;
    }
</script>

然后是Vue的代码

<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            appstyle: 'height:500px;',
            scrheight: 0,
            secstyle: '',
            imgstyle: '',
            loginbutstyle: '',
            userinfo: [{
                    username: '',
                },
                {
                    password: '',
                },
                {
                    password1: '',
                }

            ],
            imgsrc: './images/tou.png',
        },
        methods: {
            onlode: function () {

                if (this.scrheight == 0) //防止弹出键盘改变尺寸
                {
                    this.scrheight = document.documentElement.clientHeight;
                   // android.postheight(this.scrheight);
                }

                this.appstyle = 'height:' + this.scrheight + "px;";
                this.secstyle = 'top:' + this.scrheight / 3 + "px;";
                this.imgstyle = 'top:' + this.scrheight / 18 + "px;" + 'width:' + this.scrheight / 5 +
                    "px;" + 'height:' + this.scrheight / 5 + "px;" + 'margin-left:-' + this.scrheight / 10 +
                    "px;";
            },
            login: function () {
               // android.login(this.userinfo.username, this.userinfo.password);
               window.location.href = "./index.html";


            },
            // regester: function () {
            //     //android.regester();
            // }
        }

    })
</script>

注册界面的最终效果
背景是动态的星空效果
在这里插入图片描述

JokerLee...

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
前端-h5 移动端星空效果注册界面

H5移动端登录界面分享个人在学习前端过程中自己做的移动端的登录和和注册界面，部分内容参考大佬写的样式。如果有更好的建议或者有错误的地方希望各位大佬留言、评论。html代码下面是注册界面的HTML代码<!DOCTYPE html><!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" href="frozen.css"&gt
复制链接

扫一扫

专栏目录