web前端实验3

最新推荐文章于 2024-07-23 12:36:06 发布

不_要_挂_科

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量80

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57315637/article/details/130186296

版权

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

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

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

1.应用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>第一题</title>
    <style>
        .main{
            width: 254px;
        }

        .text{
            width: 250px;
            height: 100px;
            word-wrap: break-word;
        }

        .button{
            float:right;
        }

        .message{
            height: 500px;
            width: 254px;
        margin-top:30px;
        }

        ul{
            margin-top: 20px;
            padding: 0;
        }

        li{
            padding-left: 15px;
            padding-right: 15px;
            width: 224px;
            border-bottom: 1px solid;
            overflow: hidden;
            margin-top: 20px;
            margin-bottom: 20px;
            font:15px 黑体;
        }
    </style>
</head>
<body>
    <div class="main">
        <div >
            <input class="text" id="input">
        </div>
        <div class="button">
            <input type="button" value="提交" id="button">
        </div>
        <div class="message">
            <ul id="list">
                <li>
                    hello
                </li>
            </ul>
            <ul id="list">
                <li>
                    你好，西南石油大学
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">
    var bton=document.getElementById("button");
    bton.onclick=function(){
        var UL=document.getElementById("list");
        var message=document.getElementById("input");
        var LI=document.createElement("li");
        LI.innerHTML=message.value;
        document.getElementById("list").insertBefore(LI,UL.childNodes[0])
        message.value="";    
    }
</script>
</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>第二题</title>
    <style>
        body{
            background-color:lightgrey;
            width:450px;
        }

        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
            width: 450px;
            height: 30px;
        }

        li{
            float: left;
            background-color:#000;
            width: 150px;
            height: 30px;
            color:#FFF;
            font: 18px 黑体;
            text-align: center;
        }

        li:hover{
            background-color: #aaa;
        }

        .tab{
            height: 300px;
        }

        .main{
            margin-left: 100px;
            height: 30px;
            width: 450px;
        }

        .news{
            background-color:#FFF;
            border-bottom-color:#aaa;
            border-bottom-style: dotted;
            border-bottom-width: 1px;
            padding-left: 10px;
            padding-bottom: 5px;
            padding-top: 5px;
        }
    </style>
</head>
<body>
    <nav id="nav">
        <ul>
            <li>热图排行</li>
            <li>美图速递</li>
            <li>前沿科技</li>
        </ul>
    </nav>
    <div id="container">
        <section class="tab" >
            <div class="news">1111111111111111111111111111111111111</div>
            <div class="news">22222222222222222222222222222222222222</div>
            <div class="news">333333333333333333333333333333333333</div>
            <div class="news">44444444444444444444444444444444444</div>
        </section>
        <section class="tab" >
            <div class="news">鹅教官、羊陪练......这所中学养的动物成了网红</div>
            <div class="news">最伤身体的10个生活习惯，一定要避开</div>
            <div class="news">12岁孩子带着父亲去西藏 吃住行自己拿主意</div>
            <div class="news">16岁男孩暑假干了俩月工地，练出满身肌肉，只为赚学费</div>
        </section>
        <section class="tab" >
            <div class="news">111111111111</div>
            <div class="news">2222222222222222222</div>
            <div class="news">33333333333333333333333333</div>
            <div class="news">444444444444444444444444444444</div>
        </section>
    </div>
</body>
<script>
    window.onload=function () {
        var nav=document.getElementById('nav');
        var oNav=nav.getElementsByTagName('li');

        var container=document.getElementById('container');
        var oDiv=container.getElementsByClassName('tab');
        for(var i=0;i<oNav.length;i++){
            oNav[i].index=i;
            oNav[i].onmouseenter =function () {
                for(var i=0;i<oNav.length;i++){
                oNav[i].className='';
                oDiv[i].style.display="none";
                }
                this.className='act';
                oDiv[this.index].style.display="block";
            }
            for(var m=1;m<oNav.length;m++){
                oNav[m].className='';
                oDiv[m].style.display="none";
            }
        }
    };
</script>
</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>第三题</title>
    <style>
        body{
            background-color: darkgray;
            height:90%;width:40%;
            position:fixed;
            top:0;right:0;bottom:0;left:0;
            margin:auto;
        }

        .out{
            width: 450px;

        }

        .tiltle {
            padding: 10px;
            text-align: center;
            background-color: skyblue;
            
        }

        .tiltle a{
            text-align: center;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
        }

        .in{
            background-color: lightblue;
            height: 300px;
            padding-left: 70px;
            padding-top: 30px;
        }

        .id{
            height: 35px;
            width: 300px;
            padding-left: 10px;
        }

        .password{
            height: 35px;
            width: 300px;
            padding-left: 10px;
        }

        .warn{
            padding-top: 5px;
            padding-bottom: 5px;
            margin: 0px;
            height: 40px;
        }

        .warn1{
            font-size: 15px;
            color:red;
            display:none;
        }

        .warn2{
            font-size: 15px;
            color:red;
            display:block;
        }

        button{
            height: 40px;
            width: 300px;
            background-color:darkcyan;
            color:#fff;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="tiltle">
            <a>注册</a> 
        </div>
        <div class="in">
            <input class="id" id="name" placeholder="请输入您的用户名">
            <div class="warn">
                <p class="warn1" id="w1">用户名长度必须为6到18位！ </a>
                <p class="warn1" id="w2">用户名必须以英文字母开头！</a>
            </div>
            <input class="password" id="psd" placeholder="请输入您的密码">
            <div class="warn">
                <p class="warn1" id="w3">密码长度不能小于6位！</a>
            </div>
            <button id ="button">提交</button>
        </div>
    </div>
</body>
<script >
    window.onload=function () {
        var bton=document.getElementById("button");
        var W1=document.getElementById("w1");
        var W2=document.getElementById("w2");
        var W3=document.getElementById("w3");
        bton.onclick=function(){
            W1.setAttribute('style','display:none');
            W2.setAttribute('style','display:none');
            W3.setAttribute('style','display:none');
            var username=document.getElementById("name").value;
            var userkey=document.getElementById("psd").value;
            if(username.length>18||username.length<6){
                W1.setAttribute('style','display:block');
            }
            var keynode=username.charCodeAt(0);
            if(userkey.length<6){
                W3.setAttribute('style','display:block');
            }
            var keycode=username.charCodeAt(0);
            if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
                W2.setAttribute('style','display:block');
            }
        }
    }
</script>
</html>