web 实验3

最新推荐文章于 2024-07-10 22:21:40 发布

Ayyy_

最新推荐文章于 2024-07-10 22:21:40 发布

阅读量69

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Ayyy_/article/details/130305040

版权

该HTML代码展示了用户注册页面的实现，包括输入验证（用户名、手机号、密码、确认密码、验证码）和交互功能（发送验证码、隐藏错误提示、注册按钮）。CSS用于样式设计，JavaScript处理表单验证逻辑和页面动态效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>王安妮-202031050293-实验3</title>
    <script type="text/javascript">
        function setRootFontSize() {
            var rootHtml = document.documentElement;
            var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
            rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    </script>
    <!-- 外链式 -->

    <link rel="stylesheet" href="maincss.css">
    <script>
        function register() {
            var user = document.getElementById("user");
            var error = document.getElementById("errorArea");
            var phone = document.getElementById("phone");
            var password = document.getElementById("password");
            var surepassword = document.getElementById("surepassword");
            var yanzhengma = document.getElementById("yanzhengma");
            var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (user.value == "") {
                error.innerHTML = "* 用户名不能为空"
                error.style.display = "block"
            }
            else if (phone.value == "") {
                error.innerHTML = "* 手机号不能为空"
                error.style.display = "block"
            }
            else if (password.value == "") {
                error.innerHTML = "* 密码不能为空"
                error.style.display = "block"
            }
            else if (surepassword.value == "") {
                error.innerHTML = "* 确认密码不能为空"
                error.style.display = "block"
            }
            else if (password.value != surepassword.value) {
                error.innerHTML = "* 两次输入密码不一致"
                error.style.display = "block"
            }
            else if (yanzhengma.value == "") {
                error.innerHTML = "* 验证码不能为空"
                error.style.display = "block"

            }
            else if (yanzhengma.value != "123456") {
                error.innerHTML = "* 验证码不正确"
                error.style.display = "block"
            }
            else if (!phoneReg.test(phone.value)) {
                error.innerHTML = "* 手机号不正确"
                error.style.display = "block"

            }
            else {
                alert("已提交注册信息")
                window.location.href = "news.html"
            }


        }
        function hideError() {
            var error = document.getElementById("errorArea");
            error.style.display = "none";
        }
        function sent() {
            var sent = document.getElementById("sent");
            var yanzhengma = document.getElementById("yanzhengma");
            var error = document.getElementById("errorArea");
            var phone = document.getElementById("phone");
            var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;

            if (phone.value == "") {
                error.innerHTML = "* 手机号不能为空"
                error.style.display = "block"

            }
            else if (!phoneReg.test(phone.value) && phone.value != "") {
                error.innerHTML = "* 手机号不正确"
                error.style.display = "block"

            }
            else {
                sent.style.display = "none";
                yanzhengma.style.display = "block";

            }



        }
        function hideyanzhengma() {
            var yanzhengma = document.getElementById("yanzhengma");
            var sent = document.getElementById("sent");
            yanzhengma.style.display = "none";
            sent.style.display = "block";


        }
    </script>


</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right"></div>
        <div class="head_center">用户注册</div>
    </div>
    <!-- 内容 -->
    <div id="content">
        <div class="kong"></div>
        <div class="content_left1">用户名</div>
        <div class="content_center1"><input type="text" placeholder="&nbsp;请输入用户名" class="mykk" id="user"
                onclick="hideError()"></div>
        <div class="content_left2">手机号</div>
        <button class="content_right2" id="sent" onclick="sent()">发送验证码</button>
        <div><input type="number" placeholder="请输入验证码" id="yanzhengma" onclick="hideError()"></div>
        <div class="content_center2" onclick="hideyanzhengma()"><input type="tel" placeholder="&nbsp;请输入手机号"
                class="mykk2" id="phone" onclick="hideError()"></div>
        <div class="content_left3">密码</div>
        <div class="content_center3"><input type="password" class="mykk" id="password" onclick="hideError()"></div>
        <div class="content_left4">确认密码</div>
        <div class="content_center4"><input type="password" class="mykk" id="surepassword" onclick="hideError()"></div>
        <div id="errorArea">* 用户名不能为空</div>
        <div class="register" onclick="register()">注&nbsp;&nbsp;册</div>

        <div class="id">已有账号</div>
        <div class="changenumber">更换手机号</div>
    </div>
    <!-- 底部 -->
    <div id="bottom">
        <div class="final1">首页</div>
        <div class="final3">设置</div>
        <div class="final2"></div>
    </div>


</body>

</html>

css部分：

body {
    margin: 0px;
}

.head_left {
    float: left;
    width: 1.04rem;
    height: 1.32rem;
    background-image: url("img/sub_back.png");
    background-repeat: no-repeat;
    background-size: .55rem .55rem;
    background-position: .45rem .36rem;


}

.head_center {

    height: 1.32rem;
    margin: 0rem 1.04rem 0rem 1.04rem;
    text-align: center;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem;
    line-height: .57rem;
    color: #fff;
    /* 自动内减 */
    box-sizing: border-box;


}

.head_right {
    float: right;
    width: 1.04rem;
    height: 1.32rem;
    background-image: url("img/sub_more.png");
    background-repeat: no-repeat;
    background-size: .55rem .55rem;
    background-position: 0rem .36rem;

}

#header {
    background-color: #e66c06;
    position: fixed;
    top: 0px;
    width: 100%;

}

.content_left1 {
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box;


}

.content_center1 {
    height: 1.22rem;



}

.content_left2 {
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box;
}

.content_center2 {
    height: 1.22rem;
}

.content_right2 {
    height: 1.22rem;
    width: 4.00rem;
    float: right;
    font-size: .34rem;
    text-align: left;
    padding-top: .67rem;
    padding-left: 0rem;
    box-sizing: border-box;
    color: #e66c06;
    background-color: #fff;
    border: 0;
}

.content_left3 {
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: left;
    padding: .62rem .75rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box;

}

.content_center3 {
    height: 1.22rem;
}

.content_left4 {
    width: 2.64rem;
    height: 1.22rem;
    float: left;
    font-size: .47rem;
    text-align: center;
    padding: .62rem .21rem .09rem .46rem;
    color: #5f5f5f;
    /* 自动内减 */
    box-sizing: border-box;
}

.content_center4 {
    height: 1.22rem;
}

.mykk {
    border: none;
    border-bottom: 2px solid #a1a1a1;
    font-size: .44rem;
    width: 70%;

}

.mykk2 {
    border: none;
    border-bottom: 2px solid #a1a1a1;
    font-size: .44rem;
    width: 35%;

}

input {
    border: 0;
    outline: none;
}

#yanzhengma {
    height: .9rem;
    width: 2.73rem;
    float: right;
    font-size: .36rem;
    border: 1px solid #a1a1a1;
    margin-top: 0.2rem;
    margin-right: 1.3rem;
    display: none;
}

.register {
    height: 1.08rem;
    text-align: center;
    font-size: .50rem;
    margin: 0.5rem .40rem 0rem .40rem;
    padding-top: .26rem;
    box-sizing: border-box;
    background-color: #e66c06;
    color: #fff;

}

.id {
    height: .61rem;
    width: 1.76rem;
    float: left;
    font-size: .27rem;
    text-align: center;
    padding-top: .33rem;
    box-sizing: border-box;
    color: #5f5f5f;


}

.changenumber {
    height: .61rem;
    width: 1.90rem;
    float: right;
    font-size: .27rem;
    text-align: center;
    padding-top: .33rem;
    padding-right: .52rem;
    box-sizing: border-box;
    color: #5f5f5f;


}

.kong {
    height: 1.32rem;
}

#bottom {
    background-color: #e66c06;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

.final1 {
    float: left;
    width: 1.47rem;
    height: 1.46rem;
    background-image: url("img/main_home1.png");
    background-repeat: no-repeat;
    background-size: .64rem .64rem;
    background-position: .53rem .17rem;
    font-size: .31rem;
    color: #fff;
    text-align: center;
    padding: .89rem .30rem .07rem .53rem;
    box-sizing: border-box;


}

.final2 {

    height: 1.32rem;
    margin: 0rem 1.47rem 0rem 1.47rem;
    text-align: center;
    font-size: .57rem;
    padding: .37rem 0rem .38rem 0rem;
    line-height: .57rem;
    /* 自动内减 */
    box-sizing: border-box;
}

.final3 {
    float: right;
    width: 1.47rem;
    height: 1.46rem;
    background-image: url("img/main_config1.png");
    background-repeat: no-repeat;
    background-size: .64rem .64rem;
    background-position: .25rem .17rem;
    font-size: .31rem;
    color: #fff;
    text-align: center;
    padding: .89rem .52rem .07rem .18rem;
    box-sizing: border-box;
}

#errorArea {

    margin: .5rem 0rem 0.4rem 2.49rem;
    color: red;
    font-size: .4rem;
    display: none;
}

选做：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setRootFontSize() {
            var rootHtml = document.documentElement;
            var rem = rootHtml.clientWidth / (1080 / 100);   //1080为设计图px宽度
            rootHtml.style.fontSize = rem + "px";
        }
        setRootFontSize();   //网页首次载入时执行一次
        window.addEventListener("resize", setRootFontSize, false);   //网页大小改变时执行
        window.addEventListener("orientationchange", setRootFontSize, false);   //横屏切换时执行
    </script>

    <title>Document</title>
    <style>
        body {
            margin: 0px;
            background-color: #f0f0f0;
            overflow: auto;
        }

        .head_left {
            float: left;
            width: 1.7rem;
            height: 1.32rem;
            background-image: url("img/icon.png");
            background-repeat: no-repeat;
            background-size: 1.1rem .9rem;
            background-position: .35rem 0.25rem;
        }

        .head_center {
            border-radius: 25px;
            height: .67rem;
            width: 65%;
            background: #fff;
            border: #fff;
            position: absolute;
            top: .3rem;
            background-image: url("img/search.png");
            background-repeat: no-repeat;
            background-size: .37rem .36rem;
            background-position: .20rem 0.17rem;
            font-size: .26rem;
            box-sizing: border-box;


        }

        .center1_div {
            position: relative;
            height: .70rem;
            margin-bottom: .2rem;
            box-sizing: border-box;

        }

        .head_right1 {
            float: right;
            width: .94rem;
            height: 1.32rem;
            background-image: url("img/message.png");
            background-repeat: no-repeat;
            background-size: .55rem .55rem;
            background-position: .2rem .35rem;

        }

        .head_right2 {
            float: right;
            width: .94rem;
            height: 1.32rem;
            background-image: url("img/sub_more.png");
            background-repeat: no-repeat;
            background-size: .55rem .55rem;
            background-position: 0rem .34rem;
        }

        #header {
            background-color: #e66c06;
            position: fixed;
            top: 0px;
            width: 100%;

        }

        .kong {
            height: 1.32rem;
        }

        .news {
            position: relative;
            border-radius: 10px;
            height: 1.95rem;
            background: #fff;
            margin: .15rem .15rem 0rem .15rem;
            box-sizing: border-box;


        }

        .biaoti {
            font-size: .35rem;
            width: 7.33rem;
            height: .73rem;
            padding: .33rem 0rem 0rem .3rem;
            box-sizing: border-box;
            color: #222222;


        }

        .from {
            font-size: .3rem;
            width: 2rem;
            height: .32rem;
            margin-top: .29rem;
            padding: .33rem 0rem 0rem .3rem;
            box-sizing: border-box;
            color: #777777;
        }

        .time {
            font-size: .3rem;
            width: 4rem;
            height: .32rem;
            margin-left: 4.45rem;
            color: #777777;

        }

        .photo1 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news01.jpg");
            background-size: 2.3rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo2 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news02.png");
            background-size: 2.7rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo3 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news03.png");
            background-size: 2.2rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo4 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news04.jpg");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo5 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news05.png");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo6 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news06.jpg");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo7 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news07.jpg");
            background-size: 2.2rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo8 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news08.jpg");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo9 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news09.png");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        .photo10 {
            position: absolute;
            top: .22rem;
            left: 7.96rem;
            background-image: url("img/news10.jpg");
            background-size: 2.5rem;
            background-repeat: no-repeat;
            width: 2.28rem;
            height: 1.95rem;
            float: right;
        }

        #bottom {
            background-color: #e66c06;
            position: fixed;
            bottom: 0px;
            width: 100%;
        }

        .final1 {
            float: left;
            width: 1.47rem;
            height: 1.46rem;
            background-image: url("img/main_home1.png");
            background-repeat: no-repeat;
            background-size: .64rem .64rem;
            background-position: .53rem .17rem;
            font-size: .31rem;
            color: #fff;
            text-align: center;
            padding: .89rem .30rem .07rem .53rem;
            box-sizing: border-box;


        }

        .final2 {

            height: 1.32rem;
            margin: 0rem 1.47rem 0rem 1.47rem;
            text-align: center;
            font-size: .57rem;
            padding: .37rem 0rem .38rem 0rem;
            line-height: .57rem;
            /* 自动内减 */
            box-sizing: border-box;
        }

        .final3 {
            float: right;
            width: 1.47rem;
            height: 1.46rem;
            background-image: url("img/main_config1.png");
            background-repeat: no-repeat;
            background-size: .64rem .64rem;
            background-position: .25rem .17rem;
            font-size: .31rem;
            color: #fff;
            text-align: center;
            padding: .89rem .52rem .07rem .18rem;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="head_left"></div>
        <div class="head_right2"></div>
        <div class="head_right1"></div>
        <div class="center1_div"><input type="text"
                placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;天价锂矿争夺大戏落幕！宁德时代. . ." class="head_center">
        </div>

    </div>
    <div class="kong"></div>
    <!-- 身体 -->
    <div id="bbody">
        <!-- 第一条新闻 -->
        <div class="news">
            <div class="biaoti">天价锂矿争夺大戏落幕！宁德时代截胡成功，豪掷超60亿控股斯诺威矿业</div>
            <div class="from">时代财经</div>
            <div class="time">2023年03月06日 22:42</div>
            <div class="photo1"></div>

        </div>
        <!-- 后几条新闻 -->
        <div class="news">
            <div class="biaoti">茅台再上新，惊蛰节气酒发布！夏系列也在酝酿中……</div>
            <div class="from">酒业内参</div>
            <div class="time">2023年03月07日 00:02</div>
            <div class="photo2"></div>
        </div>
        <div class="news">
            <div class="biaoti">超300万人围观！张兰淘宝首秀赢“麻”了？</div>
            <div class="from">证券时报</div>
            <div class="time">2023年03月07日 00:02</div>
            <div class="photo3"></div>
        </div>
        <div class="news">
            <div class="biaoti">开发供应链、收购美工厂，富士康紧锣密鼓拓展电动车业务</div>
            <div class="from">环球网</div>
            <div class="time">2023年03月07日 06:38</div>
            <div class="photo4"></div>

        </div>
        <div class="news">
            <div class="biaoti">成本攀升、增长乏力，低价白酒老村长，会走上高端涨价之路吗？</div>
            <div class="from">酒业内参</div>
            <div class="time">2023年03月08日 09:37</div>
            <div class="photo5"></div>

        </div>
        <div class="news">
            <div class="biaoti">A股女大佬，你只知道董明珠？316个女董事长14个90后，最小才24岁</div>
            <div class="from">媒体滚动</div>
            <div class="time">2023年03月08日 13:20</div>
            <div class="photo6"></div>

        </div>
        <div class="news">
            <div class="biaoti">数字经济概念满屏飘红！怎么布局？</div>
            <div class="from">市场资讯</div>
            <div class="time">2023年03月08日 12:48</div>
            <div class="photo7"></div>

        </div>

        <div class="news">
            <div class="biaoti">中国金融监管体系大变革！机构改革六大举措释放了什么信号</div>
            <div class="from">澎湃新闻</div>
            <div class="time">2023年03月08日 06:54</div>
            <div class="photo8"></div>

        </div>
        <div class="news">
            <div class="biaoti">百亿补贴终燃“战火”：京东补贴遭拼多多狙击，阿里承压？</div>
            <div class="from">新浪科技</div>
            <div class="time">2023年03月08日 08:07</div>
            <div class="photo9"></div>

        </div>
        <div class="news">
            <div class="biaoti">21万汽车降价9万！“史上最强补贴”来袭？这一车企强势涨停！影响有多大</div>
            <div class="from">市场资讯</div>
            <div class="time">2023年03月08日 01:02</div>
            <div class="photo10"></div>

        </div>




    </div>
    <!-- 底部 -->
    <div id="bottom">
        <div class="final1">首页</div>
        <div class="final3">设置</div>
        <div class="final2"></div>
    </div>

</body>

</html>