web实验记录3

最新推荐文章于 2023-06-14 17:37:19 发布

是小夢夢啊

最新推荐文章于 2023-06-14 17:37:19 发布

阅读量599

点赞数 3

分类专栏： Web前端课程实验文章标签：前端 javascript css css3 html5

本文链接：https://blog.csdn.net/DoraemonDream/article/details/125292675

版权

Web前端课程实验专栏收录该内容

5 篇文章 0 订阅

订阅专栏

web实验记录3

实验目的
实验内容
写在最后

实验目的

掌握JavaScript的编写要求
熟悉应用浏览器进行脚本调试
JavaScript对DOM对象的操作

实验内容

应用JavaScript编写留言的功能，在文本中输入文字提交后，在下方进行显示。
提示：可将下方内容以列表体现，提交时动态创建列表的项。可使用以下两种方式之一的方法
1)使用CreateElenment动态创建li标签及li中的文本
2)在列表标签ul或者ol对象上设置InnerHtml列表对象

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>实验3-1</title>
    <link rel="stylesheet" href="Ex3-css1.css">
</head>
<body>
    <div>
        <textarea id="texts" cols="60" rows="10"></textarea>
        <input type="button" id="btn" value="提交" onclick="myClick()" >
        <ul id="ull"></ul>
    </div>
    <script language="javascript">
                function myClick(){
                    var text=document.getElementById("texts").value;
                        var newNode1=document.createElement("li");
                        var newText1=document.createTextNode(text);
                        newNode1.appendChild(newText1);
                        document.getElementById("ull").appendChild(newNode1);
                        };   
    </script>
</body>
</html>

CSS：

*{
    margin: 0px;
    padding: 0px;
}

div{
    width: 500px;
    height: auto;
    margin: 0 auto;
}
textarea{
    width: 500px;
    margin: 100px 0px auto;
}
input{
    margin: 0px;
    width: 100px;
    float: right;
}
ul{
    margin-top: 50px;
    list-style-type: none;
}
li{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid black;
    width: 500px;
    text-indent: 20px;
}

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

提示：
1)选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa
2)选项卡内容可采用三个不同列表
3)针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。
4)通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”
如mydiv. className = “selectSpanStyle”
5)鼠标移至选项卡设置onmouseenter事件
如：mySpan.onmouseenter = function(){
…………
}

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>实验3-2</title>
    <link rel="stylesheet" href="Ex3-css2.css">
</head>
<body>
    <div>
            <span id="sp1" onmouseover="show(1)">热门排行</span>
            <span id="sp2" onmouseover="show(2)">美图速递</span>
            <span id="sp3" onmouseover="show(3)">前沿科技</span>
        <ul id="news1">
            <li>热门排行1</li>
            <li>热门排行2</li>
            <li>热门排行3</li>
            <li>热门排行4</li>
        </ul>
        <ul id="news2">
            <li>美图速递1</li>
            <li>美图速递2</li>
            <li>美图速递3</li>
            <li>美图速递4</li>
        </ul>
        <ul id="news3">
            <li>前沿科技1</li>
            <li>前沿科技2</li>
            <li>前沿科技3</li>
            <li>前沿科技4</li>
        </ul>
    </div>
    <script>
        function show(num){
            var news1=document.getElementById("news1");
            var news2=document.getElementById("news2");
            var news3=document.getElementById("news3");
            if(num==1){
                news1.style.display="block";
                news2.style.display="none";
                news3.style.display="none";
            }
            else if(num==2){
                news1.style.display="none";
                news2.style.display="block";
                news3.style.display="none";
            }
            else if(num==3){
                news1.style.display="none";
                news2.style.display="none";
                news3.style.display="block";
            }
        }
    </script>
</body>
</html>

CSS:

*{
    margin: 0px;
    padding: 0px;
}
div{
    width: 450px;
    margin: 150px auto;
}
span{
    float: left;
    text-align: center;
    width: 150px;
    background: #000;
    color: #fff;
}
span:hover{
    background: #aaa;
}
ul{
    list-style-type: none;
}
li{
    text-indent: 20px;
    border-bottom: 0.5px dashed gray;
    line-height: 30px;
}

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

提示：
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){
不是英文字符
}

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>实验3-3</title>
    <link rel="stylesheet" href="Ex3-css3.css">
</head>
<body>
    <form class="form">
        <div class="div1">注册</div>
        <div class="div2">
            <input id="username" type="text" name="UserName" maxlength="10" placeholder="请输入您的用户名" onkeydown="username()"><br>
            <span id="span_name1"></span><br>
            <input id="userpsd" type="password" name="UserPsd" maxlength="16" placeholder="请输入您的密码" onkeydown="userpsd()"><br>
            <span id="span_name2"></span><br>
            <input type="button" name="Submit" id="submit" value="提交">
        </div>
    </form>
    <script>
        function username(){
            // var input=document.getElementsByTagName("input")[0];
            // var input1=input.getElementById("username");
            var name=document.getElementById("username").value;
            var span_name1=document.getElementById("span_name1");
            var keycode=name.charCodeAt(0); 
            if(name==null){
                span_name1.style.display="block";
                span_name1.innerHTML="用户名长度必须为6到18位!";
            }
            if(keycode <65||( keycode >90&& keycode <97)|| keycode >122){
                span_name1.style.display="block";
                span_name1.innerHTML="用户名长度必须英文字母开头!";
            }else{
                if(name.length<6||name.length>18){
                    span_name1.style.display="block";
                    span_name1.innerHTML="用户名长度必须为6到18位!";
                }else{
                    span_name1.style.display="none";
                }
            }
        };
        function userpsd(){
            // var input=document.getElementsByTagName("input")[1];
            // var input2=document.getElementById("userpsd");
            var userpsd=document.getElementById("userpsd").value;
            var span_name2=document.getElementById("span_name2");
            if(userpsd.length<6||userpsd==null){
                span_name2.style.display="block";
                span_name2.innerHTML="密码长度不能小于6位!";
            }else if(userpsd.length>16){
                span_name2.style.display="block";
                span_name2.innerHTML="密码长度不能大于16位!";
            }else{
                span_name2.style.display="none";
            }
        };

    </script>
</body>
</html>

CSS:

*{
    margin: 0px;
    padding: 0px;
}
form{
    width: 500px;
    height: 350px;
    margin: 150px auto;
    background:rgb(0, 204, 255);
}
.div1{
    font-size: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
    height: 50px;
    background: rgb(0, 153, 254);
}
.div2{
    position: relative;
    background:rgb(0, 204, 255);
    font-size: 0px;
}
#username{
    display: block;
    margin: 0px auto;
    margin-top: 30px;
    width: 300px;
    line-height: 40px;
    text-indent: 10px;
}
#userpsd{
    display: block;
    margin: 40px auto;
    width: 300px;
    line-height: 40px;
    text-indent: 10px;
}
#submit{
    display: block;
    margin: 0px auto;
    width: 280px;
    height: 50px;
    color: white;
    font-weight: bold;
    text-align: center;
    background: rgb(0, 153, 254);
}
#span_name1{
    position: absolute;
    margin-left: 100px;
    margin-top: 10px;
    display: block;
    height: 10px;
    font-size: 13px;
    color: red;
}
#span_name2{
    position: absolute;
    margin-left: 100px;
    margin-top: -30px;
    display: block;
    height: 10px;
    font-size: 13px;
    color: red;
}

写在最后

仅对个人实验做一次记录，文中不足、错误之处欢迎指正；
创作不易，点个赞吧！

是小夢夢啊

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
web实验记录3

HTML:CSS：设计一个选项卡功能，当鼠标移动至某一选项卡时出现切换。提示：1)选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa2)选项卡内容可采用三个不同列表3)针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block。4)通过JavaScript动态设置样式，页面对象.classname=“class样式选择器”如mydiv. clas
复制链接

扫一扫