实验3

最新推荐文章于 2022-05-18 00:00:00 发布

Key_F

最新推荐文章于 2022-05-18 00:00:00 发布

阅读量75

点赞数

分类专栏： web实验文章标签： web

本文链接：https://blog.csdn.net/qq_45873798/article/details/116198750

版权

web实验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实验3

一.网页1

1.html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./css1.css">
</head>
<div id="div1">
    <textarea name="" id="textarea1" cols="" rows="10"></textarea>
    <button id="btn1" onclick="show();">提交</button>
    <ul id="ul1"></ul>
    <script src="./js1.js"></script>
</div>

<body>

</body>

</html>

2.css

#textarea1 {
    width: 400px;
    height: 200px;
}

#div1 {
    width: 420px;
    height: 500px;
    margin: auto;
}

#btn1 {
    width: 100px;
    height: 30px;
    margin-left: 308px;
}

#li1 {
    width: 415px;
    list-style-type: none;
    border-bottom: 2px solid black;
    text-indent: 1em;
    position: relative;
    right: 42px;
}

3.js

function show() {
    var textObj = document.getElementById('textarea1');
    var text = textObj.value;
    var ulObj = document.getElementById('ul1');
    ulObj.innerHTML += "<li id='li1'>" + text + "</li>";

}

界面展示：

二.网页2

1.html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./css2.css">
</head>

<body>
    <div class="div1">
        <div class="div2">
            <ul>
                <li class="li1">热门排行</li>
                <li>美图速递</li>
                <li>前沿科技</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                <ul>
                    <li>陈柘屹</li>
                    <li> 这些高压线不能碰</li>
                    <li>实施新课程使用新教材</li>
                    <li>个税法修正案草案将二审 起征点会否超5000元？</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>鹅教官、羊陪练......这所中学养的动物成了"网红"</li>
                    <li>最伤身体的10个生活习惯，一定要避开</li>
                    <li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
                    <li>16岁男孩暑假干了俩月工地，练出满身肌肉，只为赚学费</li>
                </ul>
            </div>
            <div class="item">
                <ul>
                    <li>敬请期待</li>
                </ul>
            </div>
        </div>
    </div>
    <script src="./js2.js"></script>
</body>


</html>

2.css

* {
    margin: 0;
    padding: 0;
}

body {
    background: rgb(230, 226, 226);
}

li {
    list-style-type: none;
}

.div1 {
    width: 700px;
    margin: 200px auto;
}

.div2 {
    height: 39px;
    width: 514px;
    border: 1px solid #ccc;
    background-color: #000;
}

.div2 li {
    display: inline-block;
    height: 39px;
    width: 168px;
    line-height: 39px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    color: #FFF
}

.div2 .li1 {
    background-color: #aaa;
}

.item ul {
    background: #fff;
}

.item ul li {
    text-indent: 1em;
    font-size: 18px;
    height: 30px;
    border-bottom: 1px dotted #aaa;
}

.item {
    width: 516px;
    display: none;
}

3.js

function valName() {
    var name = document.getElementById("username").value;
    var pwd = document.getElementById("userpwd").value;
    var judgename = document.getElementById("judgeusername");
    var judgepwd = document.getElementById("judgeuserpwd");
    var userNameLength = name.length;
    var pwdlength = pwd.length;
    var keycode = name.charCodeAt(0);
    if (userNameLength < 6 || userNameLength > 18) {
        judgename.innerHTML = "用户名长度必须为6到18位!";
    } else {
        judgename.innerHTML = "";
    }

    if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
        judgename.innerHTML = "用户名必须以英文字母开头!";
    } else {

    }
    if (pwdlength < 6) {
        judgepwd.innerHTML = "密码长度不能小于6位!";
    } else {
        judgepwd.innerHTML = "";
    }
}

function login() {
    alert("提交成功！");
}

界面展示：

三.网页3

1.html

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="./css3.css">
</head>

<body>
    <div id="div1">
        <div id="div2">
            注册
        </div>
        <div id="div3">
            <input class="input01" type="text" id="username" onchange="valName();" placeholder="请输入您的用户名">
            <div class="div01" id="judgeusername"></div>
            <input class="input01" type="password" id="userpwd" onchange="valName();" placeholder="请输入您的密码">
            <div class="div01" id="judgeuserpwd"></div>
            <button id="btn1" onclick="login();">
                提交
            </button>
        </div>
    </div>
    <script src="./js3.js"></script>
</body>

</html>

2.css

#div1 {
    width: 500px;
    height: 400px;
    margin: 100px auto;
}

#div2 {
    font-size: 25px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    padding: 5px 0;
    width: 500px;
    height: 40px;
    background: rgb(35, 140, 201);
}

#div3 {
    width: 500px;
    height: 330px;
    background: rgb(60, 194, 235);
}

#btn1 {
    height: 50px;
    width: 355px;
    margin-top: 0px;
    margin-left: 70px;
    color: #FFF;
    background: rgb(35, 140, 201);
    border: 1px solid #aaa;
    position: relative;
    top: 40px;
}

.input01 {
    text-indent: 1em;
    height: 50px;
    width: 350px;
    margin-left: 70px;
    margin-top: 0px;
    position: relative;
    top: 40px;
}

.div01 {
    height: 50px;
    width: 300px;
    margin-left: 70px;
    margin-top: 0px;
    line-height: 50px;
    position: relative;
    top: 40px;
    color: red;
}

3.js

function valName() {
    var name = document.getElementById("username").value;
    var pwd = document.getElementById("userpwd").value;
    var judgename = document.getElementById("judgeusername");
    var judgepwd = document.getElementById("judgeuserpwd");
    var userNameLength = name.length;
    var pwdlength = pwd.length;
    var keycode = name.charCodeAt(0);
    if (userNameLength < 6 || userNameLength > 18) {
        judgename.innerHTML = "用户名长度必须为6到18位!";
    } else {
        judgename.innerHTML = "";
    }

    if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
        judgename.innerHTML = "用户名必须以英文字母开头!";
    } else {

    }
    if (pwdlength < 6) {
        judgepwd.innerHTML = "密码长度不能小于6位!";
    } else {
        judgepwd.innerHTML = "";
    }
}

function login() {
    alert("提交成功！");
}

界面展示：

Key_F

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实验3

实验3一.网页11.html<!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"&gt
复制链接

扫一扫