web实验三

最新推荐文章于 2024-08-14 15:45:18 发布

好多头发

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量112

点赞数

文章标签： javascript html servlet

本文链接：https://blog.csdn.net/m0_56993984/article/details/130246102

版权

该文展示了如何使用JavaScript来实现网页上的常见交互功能。首先，通过动态创建`

`元素和更新`

`的`innerHTML`，实现了文本留言提交后在页面下方显示。接着，设计了一个选项卡功能，当鼠标悬停在选项卡上时，能切换显示不同的内容区域。最后，文章演示了如何对用户输入的用户名和密码进行验证，确保它们满足特定的长度和格式要求。

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

应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。

提示：可将下方内容以列表体现，提交时动态创建列表的项。可使用以下两种方式之一的方法：

使用CreateElenment动态创建li标签及li中的文本
在列表标签ul或者ol对象上设置InnerHtml

列表对象.innerHTML += "<li>文本内容</li>"

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        textarea {
            resize: none;
        }

        #btn {
            width: 100px;
            margin-left: 282px;
        }
        li {
            list-style: none;
            border-bottom: 1px solid #000;
            width: 382px;
            padding-top: 10px;
            text-indent: 20px;
        }
    </style>
</head>

<body>
        <div>
            <textarea name="" id="text" cols="50" rows="10"></textarea>
        </div>
        <input type="button" value="提交" id="btn">

    <ul></ul>

    <script>
        let btn = document.getElementById("btn")
        btn.onclick = function() {
            let textValue = document.getElementsByTagName("textarea")[0].value
            let ulValue = document.getElementsByTagName("ul")[0]
            //使用innerHTML
            ulValue.innerHTML += "<li>" + textValue + "</li>"

            //使用createElement
            // let li = document.createElement("li")
            // let liText = document.createTextNode(textValue)
            // li.appendChild(liText)
            // ulValue.appendChild(li)


        }
    </script>
</body>

</html>

2.设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。

提示：

选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa
选项卡内容可采用三个不同列表
针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。
通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”

如mydiv. className = "selectSpanStyle"

鼠标移至选项卡设置onmouseenter事件

如：mySpan.onmouseenter = function(){

…………

}

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 600px;
            height: 400px;
            margin: 0 auto;

        }

        .title {
            width: 200px;
            height: 40px;
            float: left;
            background-color: #000;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
        .title:hover {
            background-color: #aaa;
        }

        #content {
            width: 600px;
            margin-top: 20px;
        }

        li {
            list-style-type: none;
            border-bottom: 1px dashed #aaa;
            line-height: 40px;
        }

        #two {
            display: none;
        }
        
        #three {
            display: none;
        }
        
    </style>
</head>

<body>
    <div class="box">
        <div class="title" onmouseenter=show1()>热门排行</div>
        <div class="title" onmouseenter=show2()>美图速递</div>
        <div class="title" onmouseenter=show3()>前沿科技</div>

        <div id="content">
            <ul id="one">
                <li>建设工作5周年座谈会</li>
                <li>这些高压线不能碰</li>
                <li>高中2019年球季起分步实施新课程使用新课程</li>
                <li>起征点会否超5000元</li>
            </ul>
            <ul id="two">
                <li>鹅教官、羊陪练......这所中学养的动物成了“网红”</li>
                <li>最伤身体的10个生活习惯，一定要避开</li>
                <li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
                <li>16岁男孩暑假干了两月工地，练出满身肌肉，只为赚学费</li>
            </ul>
            <ul id="three">
                <li>前沿科技1</li>
                <li>前沿科技2</li>
                <li>前沿科技3</li>
                <li>前沿科技4</li>
            </ul>
        </div>
    </div>

    <script>
        let one = document.getElementById("one")
        let two = document.getElementById("two")
        let three = document.getElementById("three")

        function show1() {
            one.style.display = "block";
            two.style.display = "none";
            three.style.display = "none"; 
        }

        function show2() {
            one.style.display = "none";
            two.style.display = "block";
            three.style.display = "none"; 
        }
        function show3() {
            one.style.display = "none";
            two.style.display = "none";
            three.style.display = "block"; 
        }

    </script>

</body>

</html>

3.设计如下表单，并进行数据验证。

提示：

输入元素取值可通过var name =document.getElementsById(“元素id”).value;
判断长度name.length
是否英文字符开头
首字母是大小写字符，获取输入的字符对应的编码

var keycode=name.charCodeAt(0);

if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){

不是英文字符

}

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 450px;
            height: 400px;
            margin: 0 auto;
            text-align: center;
            background-color: #00CCFF;
        }

        .title {
            height: 50px;
            background-color: #0099CC;
            color: white;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 40px;
        }

        li {
            list-style: none;
            width: 350px;
            height: 50px;
            margin: 0 auto;
        }

        input {
            width: 350px;
            height: 50px;
            text-indent: 20px;
            border: 0;
        }

        #nameErr,
        #pwdErr {
            color: red;
            text-align: left;
            line-height: 50px;
        }

        #submit {
            background-color: #0099CC;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <form action="">
        <div class="title">注册</div>
        <ul>
            <li></li>
            <li><input type="text" placeholder="请输入您的用户名" id="uname"></li>
            <li id="nameErr"></li>
            <li><input type="password" placeholder="请输入您的密码" id="pwd"></li>
            <li id="pwdErr"></li>
            <li><input type="button" id="submit" value="提交"></li>
        </ul>
    </form>
    <script>
        let submit = document.getElementById("submit")
        submit.onclick = function () {
            let uname = document.getElementById("uname").value
            let pwd = document.getElementById("pwd").value
            let nameErr = document.getElementById("nameErr")
            let pwdErr = document.getElementById("pwdErr")

            if (uname.length < 6 || uname.length > 18) {
                nameErr.innerHTML = "用户名长度必须为6到18位！"
            }
            if (pwd.length < 6) {
                pwdErr.innerHTML = "密码长度不能小于6位！"
            }
            if (!isE(uname)) {
                nameErr.innerHTML = "用户名必须以英文字母开头！"
            }

            function isE(str) {
                let keycode = str.charCodeAt(0)
                if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {
                    return false
                }
                return true
            }

        }
    </script>
</body>

</html>