WEB前端实验三

于 2023-04-22 17:48:25 发布
阅读量136 收藏 2
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_57340552/article/details/130307931
版权

实验内容：

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

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

  1. 使用CreateElenment动态创建li标签及li中的文本  
  2. 在列表标签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>实验三_1</title>
</head>
<style>
    .main {
        width: 254px;
        height: 100px;
    }

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

    }

    .butt {
        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>

<body>
    <div class="main">
        <div>
            <input class="text" name="" id="input">
        </div>
        <div class="butt">
            <input type="button" value="提交" id="button1">
        </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("button1");
    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.设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。

 

提示：

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

如mydiv. className = "selectSpanStyle"

  1. 鼠标移至选项卡设置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>实验三_2</title>
</head>

<style>
    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;
        line-height: 30px;
    }

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

    section {
        height: 300px;
    }

    body {
        background-color: lightgrey;
        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;
    }

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

</style>

<body>
    <nav id="nav">
        <ul>
            <li>热图排行</li>
            <li>美图速递</li>
            <li>前沿科技</li>
        </ul>
    </nav>
    <div id="cont">
        <section class="tab">
            <div class="news">5周年座谈会</div>
            <div class="news">这些高压线不能碰</div>
            <div class="news">全国高中使用新教材</div>
            <div class="news">会否超过5000元？</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">室温超导真的来了吗？</div>
            <div class="news">在“智能+”这件事上，衣服也卷起来了？</div>
            <div class="news">这几天热议的太阳耀斑是什么？</div>
            <div class="news">美国科学家首次在核聚变反应中实现“净能量增益”</div>
        </section>
    </div>

</body>

<script>
    window.onload = function () {
        var nav = document.getElementById('nav');
        var oNav = nav.getElementsByTagName('li');

        var container = document.getElementById('cont');
        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.设计如下表单，并进行数据验证。

 

提示：

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

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>实验三_3</title>
</head>

<style>
    body{
        background-color: darkgray;
        height:90%;width:40%;
        position:fixed;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
    }
    .box{
        width: 450px; 
    }
    .box2{
        background-color: lightblue;
        height: 300px;
        padding-left: 70px;
        padding-top: 30px;
    }
    .tiltle {
        padding: 10px;
        text-align: center;
        background-color: skyblue;

    }
    .tiltle a{
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }
    .id{
        height: 35px;
        width: 300px;
        padding-left: 10px;
    }
    .password{
        height: 35px;
        width: 300px;
        padding-left: 10px;
    }
    .warnbox{
        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>

<body>
    <div class="box">
        <div class="tiltle">
            <a>注册</a> 
        </div>
        <div class="box2">
            <input class="id" id="name" placeholder="请输入您的用户名">
            <div class="warnbox">
                <p class="warn1" id="warn1">用户名长度必须为6到18位！ </a>
                <p class="warn1" id="warn2">用户名必须以英文字母开头！</a>
            </div>
            <input class="password" id="key" placeholder="请输入您的密码">
            <div class="warnbox">
                <p class="warn1" id="warn3">密码长度不能小于6位！</a>
            </div>
            <button id ="btn">提交</button>
        </div>

    </div>
</body>

<script >
    window.onload=function () {
        var bton=document.getElementById("btn");
        var W1=document.getElementById("warn1");
        var W2=document.getElementById("warn2");
        var W3=document.getElementById("warn3");
        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("key").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>

沈十六6127
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值