成都工业学院Web技术基础（WEB）实验八：BOM、DOM基本操作

news2024/11/24 14:26:02

写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、采用HBuilder 编写代码，实现图8-1所示的效果，要求：

① 自动弹出图片。

② 定时5秒钟之后,关闭广告。

图8-1 实验内容1效果示意图

（1）新建html文档，命名为exp-14-1.html。

（2）确定事件: 页面加载完成的事件 onload。

（3）事件要触发函数: init()。

（4）init函数功能: 启动一个定时器 : setTimeout() ；显示一个广告；再去开启一个定时5秒钟之后,关闭广告。

注：img.style.display = "none"; //img为获取的图片元素，"block"显示图片， "none"不显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #ad-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
    </style>
    <script>
        function showAd() {
            var adContainer = document.getElementById('ad-container');
            adContainer.style.display = 'block';
        }

        function closeAd() {
            var adContainer = document.getElementById('ad-container');
            adContainer.style.display = 'none';
        }

        function init() {
            showAd();
            setTimeout(closeAd, 5000);
        }
    </script>
</head>
<body onload="init()">
<div id="ad-container">
    <img id="ad-img" src="../4.jpg">
</div>
</body>
</html>

第五秒前

第五秒及以后

2、采用HBuilder 编写代码，实现图8-2所示的页面效果，要求：

① 按图8-2左侧图进行页面布局。

② 点击创建节点按钮后，新增H2标签，并将其添加到DIV中，变化后的效果如图8-2

右侧图所示。

图8-2添加节点效果示意图

（1）新建html文档，在<script></script>标签之间书写JavaScript代码实现功能。

（2）采用<div>标签构建页面，并设置div的样式，使其达到图8-2左侧的效果。

（3）通过var text = document.createTextNode()创建文本节点。

（4）通过var h2Obj = document.createElement()创建节点元素。

（5）通过h2Obj.appendChild(text)将文本节点添加到h2节点对象中。

（6）与步骤（5）相同，将h2节点添加到div元素中。最终效果如8-2右侧图所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        #container {
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            min-height: 200px;
        }
    </style>
    <script>
        function createNode() {
            var h2Obj = document.createElement('h2');
            var text = document.createTextNode('创建H2节点');
            h2Obj.appendChild(text);
            var container = document.getElementById('container');
            container.appendChild(h2Obj);
        }
    </script>
</head>
<body>
<div id="container">
    <button onclick="createNode()">创建节点</button>
</div>
</body>
</html>

点击创建节点前