写在前面
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>
点击创建节点前
点击创建节点后
