寫在前面
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>
點擊創建節點前
點擊創建節點后
 封裝BeanDefinition對象放入Map)
