实验三：JavaScript基础及数据验证

最新推荐文章于 2024-07-12 16:27:40 发布

平平无奇小码手

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量77

点赞数

分类专栏： Web前端实验文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_51173747/article/details/130199157

版权

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

4 篇文章 0 订阅

订阅专栏

实验目的及要求：

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

1

使用CreateElenment动态创建li标签及li中的文本

在列表标签ul或者ol对象上设置InnerHtml，列表对象.innerHTML += "<li>文本内容</li>"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
   <textarea style="width: 400px;height:150px;resize: none;" id="content" name="content"></textarea>
   <div style=" width: 400px;">
    <button onclick="show()" style="float: right;width: 70px;">提交</button></div>
   <ul id="showContent" style="list-style: none;"></ul>
</div>
</body>
<script type="text/javascript">
    function show(){
        var show = document.getElementById("showContent");//显示文本的对象
        var content = document.getElementById("content");//输入文字的对象
        var li = document.createElement('li');
        li.innerHTML=content.value;
        li.style.cssText="border-bottom:2px solid;width:300px"
        
        show.appendChild(li);
        console.log(content.value)
        
    }
</script>
</html>

2

1.选项卡可采用三个行内元素，为选中背景色#000，选中背景色#aaa；

2.选项卡内容可采用三个不同列表

3.针对选项卡和选项内容定义两组不同样式。选项卡未选中背景色#000，选中背景色#aaa；文本颜色#fff;；选项内容未选中不显示display:none，选中显示display:block

4.通过JavaScript动态设置样式，页面对象.classname=“class样式选择器” ，如mydiv. className = "selectSpanStyle"

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

如：mySpan.onmouseenter = function(){

…………

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
   <div class="chooses" >
    <span id="s1">热门排行</span>
    <span id="s2">美图速递</span>
    <span id="s3">前沿科技</span>
    </div>
    <div class="lists" id="l1" >
        <ul >
            <li>鹅教官、羊陪练...这所中学养的动物成了网红</li>
            <li>最伤身体的十个习惯，一定要避开</li>
            <li>全国高中2019年秋季起分步实施新课程使用新教材</li>
            <li>个税法修正草案将二审 起征点会否超5000元？</li>
        </ul>
    </div>
    <div class="lists" id="l2" >
        <ul >
            <li>鹅教官、羊陪练...这所中学养的动物成了网红</li>
            <li>最伤身体的十个习惯，一定要避开</li>
            <li>12岁孩子带着父亲去西藏 吃住行自己拿主意</li>
            <li>16岁男孩暑假干了俩月工地，练出满身肌肉，只为赚学费</li>
        </ul>
    </div>
    <div class="lists" id="l3">
        <ul >
            <li>最伤身体的十个习惯，一定要避开</li>
            <li>16岁男孩暑假干了俩月工地，练出满身肌肉，只为赚学费</li>
            <li>鹅教官、羊陪练...这所中学养的动物成了网红</li>
            <li>个税法修正草案将二审 起征点会否超5000元？</li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
    s1=document.getElementById('s1');
    s2=document.getElementById('s2');
    s3=document.getElementById('s3');
    l1=document.getElementById('l1');
    l2=document.getElementById('l2');
    l3=document.getElementById('l3');

    s2.onmouseenter=function(){
        l1.style.cssText = "display:none"
        l2.style.cssText = "display:block"
        l3.style.cssText = "display:none"
        s1.style.cssText = "background-color:black"
        s2.style.cssText = "background-color:gray"
        s3.style.cssText = "background-color:black"
    }
    s3.onmouseenter=function(){
        l1.style.cssText = "display:none"
        l2.style.cssText = "display:none"
        l3.style.cssText = "display:block"
        s1.style.cssText = "background-color:black"
        s2.style.cssText = "background-color:black"
        s3.style.cssText = "background-color:gray"
    }
    s1.onmouseenter=function(){
        l1.style.cssText = "display:block"
        l2.style.cssText = "display:none"
        l3.style.cssText = "display:none"
        s1.style.cssText = "background-color:gray"
        s2.style.cssText = "background-color:black"
        s3.style.cssText = "background-color:black"
    }
}
</script>
<style>
    *{margin:0;padding: 0;}
    .container{background-color: whitesmoke;width: auto;height: 500px;padding: 20px}
    .chooses{width: 460px;height:30px;background-color: black;line-height: 30px;text-align: center;}
    .lists{width: 460px;height: 190px;background-color: white;line-height: 45px;}
    span{color:white;width: 150px;display: inline-block;}
    ul{list-style: none;}
    ul li {float: left; border-bottom: dotted gray; width: 460px;padding-left: 10px;box-sizing: border-box;}
    #l1{display: block;}
    #l2{display: none;}
    #l3{display:none;}
    #s1{background-color: gray;}
    #s2{background-color: black;}
    #s3{background-color: black;}
</style>
</html>

3

1.输入元素取值可通过var name =document.getElementsById(“元素id”).value;

2.判断长度name.length，是否英文字符开头，首字母是大小写字符

3。获取输入的字符对应的编码

var keycode=name.charCodeAt(0);

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

不是英文字符

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container">
   <div class="chooses" >注 册</div>
   <input id="i1" placeholder="请输入你的用户名">
   <span id="s1">用户名长度必须为6到18位！</span>
   <input id="i2" placeholder="请输入你的密码">
   <span id="s2">密码长度不能小于6位！</span>
   <button onclick="submit()">提交</button>
</div>
</body>
<script type="text/javascript">
function submit(){
    var t1=document.getElementById('i1').value;
    var t2=document.getElementById('i2').value;
    var s1=document.getElementById('s1')
    var s2=document.getElementById('s2')
    if(t1.length<6||t1.length>18)
    {
        s1.style.cssText="visibility:visible";
    }
    else if(t1.charCodeAt(0) <65||( t1.charCodeAt(0) >90&& t1.charCodeAt(0) <97)|| t1.charCodeAt(0) >122)
    {
        s1.innerText="不是英文字符!"
        s1.style.cssText="visibility:visible";
    }
    else if(t2.length<6)
    {
        s1.style.cssText="visibility:hidden";
        s2.style.cssText="visibility:visible";
    }
    else
    {
        s1.style.cssText="visibility:hidden";
        s2.style.cssText="visibility:hidden";
    }
}
</script>
<style>
*{margin: 0;padding: 0;}
.container{background-color: rgb(76, 191, 236);width: 400px;height: 400px;}
.chooses{width: 400px;height: 50px;background-color: rgb(85, 165, 197);font-size: 24px;font-weight: bold;color: #fff;text-align: center;line-height: 50px;}
input{width: 300px;height: 40px;margin:20px 40px 10px 40px;}
button{width: 300px;height: 40px;margin:10px 40px 0px 40px;color:#fff;background-color:rgb(67, 126, 150);font-size: 20px;font-weight: bold;}
span{color: red;margin:10px 40px 10px 40px;visibility: hidden;}
</style>
</html>