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