成都工业学院Web技术基础(WEB)实验八:BOM、DOM基本操作

写在前面

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>

点击创建节点前

点击创建节点后

相关推荐
quitv8 分钟前
react脚手架配置别名
前端·javascript·react.js
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
十八朵郁金香10 小时前
深入理解 JavaScript 中的 this 指向
开发语言·前端·javascript
贵州晓智信息科技10 小时前
使用 Three.js 转换 GLSL 粒子效果着色器
开发语言·javascript·着色器
linkcoco10 小时前
记录h5使用navigator.mediaDevices.getUserMedia录制音视频
前端·javascript·vue·音视频·js
Mh10 小时前
代码提交校验及提交规范的实践方案
前端·javascript·架构
昨日余光11 小时前
仅需三分钟,使用Vue3.x版本组件式风格实现一个消息提示组件!
前端·javascript·css·vue.js·typescript·html
软件开发技术深度爱好者11 小时前
验证码介绍及生成与验证(HTML + JavaScript实现)
javascript