请使用框架帮我写一个信息展示页面要求悬浮窗框架其他自行发挥请生成js源码并存放在script中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息展示页面</title>
<style>
/* 悬浮窗样式 */
#floating-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 400px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0px 0px 10px #ccc;
overflow: auto;
z-index: 9999;
}
<pre><code>/* 信息展示样式 */
.info {
padding: 20px;
border-bottom: 1px solid #ccc;
}
h2 {
margin-top: 0;
}
</code></pre>
</style>
</head>
<body>
<div id="floating-box">
<!-- 信息展示区域 -->
<div id="info-container"></div>
</div>
<script>
// 假数据
const data = [
{
title: '信息标题1',
content: '信息内容1'
},
{
title: '信息标题2',
content: '信息内容2'
},
{
title: '信息标题3',
content: '信息内容3'
}
];
// 生成信息展示区域
const infoContainer = document.querySelector('#info-container');
data.forEach(item => {
const info = document.createElement('div');
info.classList.add('info');
const title = document.createElement('h2');
title.textContent = item.title;
const content = document.createElement('p');
content.textContent = item.content;
info.appendChild(title);
info.appendChild(content);
infoContainer.appendChild(info);
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/btEK 著作权归作者所有。请勿转载和采集!