web前端之登录界面

最新推荐文章于 2024-06-16 01:19:55 发布

扣门僧

最新推荐文章于 2024-06-16 01:19:55 发布

阅读量6.4k

点赞数 5

分类专栏：笔记文章标签： javascript css html5

本文链接：https://blog.csdn.net/PaxtonWu/article/details/108044178

版权

笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

题目如下:
在这里插入图片描述 1.首先构建HTML代码(骨骼):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Register</title>
    <link rel="stylesheet" href="css/test2.css">
</head>
<body>

    <div class="login-box">
        <div class="head">
            <div class="ref-login"><a href="https://www.pearvideo.com/">登录</a></div>
            <div class="ref-reg"><a href="">注册</a></div>
        </div>

        <form action="http://www.baidu.com" id="myform" onsubmit="return check(this)">
        <div class="mid">
            <div class="mid-input">
                <div class="mid-text">手机</div>
                <input type="text" name="tel" placeholder="请输入手机号" form="myform">
            </div>
            <div class="mid-input">
                <div class="mid-text">图形码</div>
                <input type="text" name="gcode" placeholder="请输入右边图形码" form="myform"><img src="imgs/vcode.jpg" alt="">
            </div>

            <div class="mid-input">
                <div class="mid-text">验证码</div>
                <input type="text" name="vcode" placeholder="请输入短信验证码" form="myform">
                <button class="btn" onclick="getvcode()">获取验证码</button>
            </div>
            <div class="mid-input">
                <div class="mid-text">昵称</div>
                <input type="text" name="nickname" placeholder="请输入您的昵称" form="myform">
                <div class="note">您在社区的名字</div>
            </div>
            <div class="mid-input"><div class="mid-text">密码</div>
                <input type="password" name="pwd" placeholder="请输入密码" form="myform">
                <div class="note">6-16个字符</div>
            </div>
            <div class="mid-input">
                <div class="mid-text">确认密码</div>
                <input type="password" name="pwd2" placeholder="请再次输入密码" form="myform">
            </div>
            <input type="checkbox" value="同意用户服务条款" form="myform">同意用户服务条款
            <div class="btn-reg">
                <button class="btn" form="myform">立即注册</button>
            </div>
        </div>
        </form>
    </div>
</body>
</html>

2.编写CSS文件代码(肉身):

*{
    box-sizing: border-box;
    outline: none;
}
div,
input,
img{
    display: inline-block;
}
.login-box{
    position: relative;
    top: 50%;
    left: 50%;
    margin: 50px -300px;
    width: 600px;
    height: 600px;

}
.head{
    position: absolute;
    width: 100%;
    height: 60px;
    z-index: 10;
    border-bottom: 1px solid darkgray;
}
.ref-login{
    width: 120px;
    height: 60px;
    float: left;
    background: white;
    text-align: center;
    padding-top: 12px;
    font-size: 2em;

}
.ref-reg{
    width: 120px;
    height: 60px;
    margin-left: 50px;
    background: white;
    text-align: center;
    padding-top: 12px;
    font-size: 2em;
}
.head>div>a{
    text-decoration-line: none;
    color: gray;
}
.head>div>a:hover{
    color: aquamarine;
    cursor: pointer;
    border-bottom: 4px solid aquamarine;
}
.mid{
    height: 540px;
    width: 100%;
    margin: 60px 0;

}
.mid-input{
    display: flex;
    height: 50px;
    width: 100%;
    margin: 10px 0;
    border: 0;
}
.mid-text{
    width: 25%;
    height: 100%;
    line-height: 50px;
    border: 1px solid darkgray;
    text-align: center;
    font-size: 1.2em;

}
.mid-input>input{
    width: 45%;
    height: 100%;
    border: 1px solid darkgray;

}
img{
    width: 20%;
    margin: 0 30px;

}
.btn{
    height: 50px;
    width: 120px;
    margin: 0 30px;
    line-height: 50px;
    background: #1E9FFF;
    font-size: 1.2em;
    color: white;
    border: 0;
    cursor: pointer;
}
.note{
    height: 50px;
    line-height: 50px;
    margin: 0 30px;
}
.btn-reg{
    padding-top: 30px;
}

3.编写JavaScript代码用于绑定点击事件:

function check(f) {
            var tel=f.tel.value;
            var gcode=f.gcode.value;
            var vcode=f.vcode.value;
            var nickname=f.nickname.value;
            var pwd=f.pwd.value;
            var pwd2=f.pwd2.value;
            if(tel.match('/^[1][3,4,5,7,8][0-9]{9}$/')&&gcode=='QNMx'&&vcode==code&&nickname.length>=6&&pwd.length>=8&&pwd.length<=12&&pwd==pwd2){
                alert('注册成功')
                return true;
            }else{
                return false;
            }
        }
        var code='';
        function getvcode() {
        var codeset='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';
        for (var i=0;i<6;i++){
            var randomNum=Math.floor(Math.random()*codeset.length);
            code+=codeset[randomNum];
        }
        alert('您的验证码为:'+code);
        }

总结:以上就是一个简单的注册界面,由于我只学习了一个星期的web前端,因为我在JS部分写得比较简单,有可能在JS部分进行数据提交的时候会有一些小bug,仅供参考,欢迎大神来纠错哈.

扣门僧

关注

5
点赞
踩
85

收藏

觉得还不错? 一键收藏
0
评论
web前端之登录界面

题目如下:1.首先构建HTML代码(骨骼):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Register</title> <link rel="stylesheet" href="css/test2.css"></head><body> <div class=
复制链接

扫一扫

专栏目录