web前端开发实验——4

最新推荐文章于 2023-04-23 18:16:32 发布

可以燎原的星星

最新推荐文章于 2023-04-23 18:16:32 发布

阅读量692

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46476515/article/details/127340398

版权

Web 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

1、带关闭按钮的广告图片。要求如下：

1)用一个div用于显示广告图片，另一个div用于显示关闭按钮；

2)带关闭按钮图层增加onclick事件用于图层的关闭（隐藏）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带关闭按钮的图片</title>
</head>
<body>

<div id="hid">
    <div><img src="images/xiaojie1.jpg"  style="width: 600px;height: 400px" id="tu"></div>
    <img src="images/float_advclose1.gif" ><br>
    <a href="javascript:shut()">关闭</a>
</div>

<script>
    function shut() {
        document.getElementById("hid").style.display="none";
    }
</script>

</body>
</html>

2、制作树形菜单。要求如下：

1)使用项目列表制作一个完整的树形菜单

2)使用带参数的函数，通过参数来控制显示或隐藏某个列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树形菜单</title>
</head>
<body>
<div class="menu">
    <ul id="menu">
        <li class="mlist">
            思量岛
            <ul>
                <li>镜玄</li>
                <li>屠丽</li>
                <li>奉眠</li>
            </ul>
        </li>
        <li class="mlist">
            军区大院
            <ul>
                <li>南向晚</li>
                <li>南朝阳</li>
            </ul>
        </li>
        <li class="mlist">
            陆氏家族
        </li>
        <li class="mlist">
            个人资料修改
        </li>
    </ul>
</div>

<script>
    var menuList=document.getElementsByClassName("mlist")
    var mymenu=document.getElementById("menu")
    var myul=mymenu.getElementsByTagName("ul")
    for(let i=0;i<menuList.length;i++){
        menuList[i].onclick=function(){
            for(let j=0;j<myul.length;j++){
                if(i==j){
                    myul[j].style.display="block";
                }else{
                    myul[j].style.display="none";
                }
            }
        }
    }
</script>
</body>
</html>

3、制作html页面，使用DOM操作增加或删除表格行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM增删表格</title>
    <style type="text/css">
        table{
            width: 600px;
            height: 30px;
            text-align: center;
        }
        #cz{
            width: 600px;
            height: 30px;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="form">
    <table id="bd">
        <tr>
            <th>书名</th>
            <th>价格</th>
        </tr>
        <tr id="s1">
            <td>Python</td>
            <td>20</td>
        </tr>
        <tr>
            <td>MySQL</td>
            <td>25</td>
        </tr>
    </table>
    <div id="cz">
        <input type="button" onclick="zj()" value="增加一行">
        <input type="button" onclick="sc()" value="删除一行">
    </div>
</div>

<script type="text/javascript">
    var pa=document.getElementById("bd");
    function zj(){
        var name=prompt("请输入书名");
        var price=prompt("请输入价格");
        var ptr=document.createElement('tr');
        var ptd1=document.createElement('td');
        var ptd2=document.createElement('td');
        if(name==""||price==""){
            alert("输入值不能为空");
        }else{
            ptd1.innerHTML=name;
            ptd2.innerHTML=price;
            ptr.appendChild(ptd1);
            ptr.appendChild(ptd2);
            pa.appendChild(ptr);
        }
    }
    function sc(){
        var num=parseInt(prompt("请输入你要删除第几行"));
        var rows=pa.rows;
        if(num==null|| num <= rows.length-1){
            for(var i=1;i<rows.length;i++){
                if(i==num)
                    pa.deleteRow(num);
            }
        }else alert("输入错误，请重新输入");

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