生成一个移动端列表页面框架代码 1、页面框架 ,要求必须美观,有三个节点进行变化,准备三个变量进行渲染2、数据要求,三套数据,要求每套数据1条以上, 要求同样的主题。—— 要求正能量。3、写一个按钮,点击按钮,换另外一套数据??
时间: 2023-06-01 22:04:39 浏览: 63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端列表页面框架</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f6f6f6;
}
.header{
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: center;
font-size: 24px;
color: #333;
}
.list{
margin-top: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 10px;
}
.item{
padding: 10px;
border-top: 1px solid #ddd;
display: flex;
align-items: center;
}
.item img{
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.item h3{
margin: 0;
font-size: 18px;
color: #333;
flex: 1;
}
.item p{
margin: 0;
font-size: 14px;
color: #999;
}
.btn{
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #333;
color: #fff;
font-size: 16px;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="header">正能量列表页面</div>
<div class="list">
<div class="item">
<img src="https://picsum.photos/50/50" alt="图片">
<div>
<h3>标题一</h3>
<p>正能量一</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/50/50" alt="图片">
<div>
<h3>标题二</h3>
<p>正能量二</p>
</div>
</div>
<div class="item">
<img src="https://picsum.photos/50/50" alt="图片">
<div>
<h3>标题三</h3>
<p>正能量三</p>
</div>
</div>
</div>
<div class="btn" id="changeDataBtn">点击更换数据</div>
<script type="text/javascript">
var data1 = [
{
title: '标题一',
content: '正能量一',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题二',
content: '正能量二',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题三',
content: '正能量三',
imgUrl: 'https://picsum.photos/50/50'
}
];
var data2 = [
{
title: '标题四',
content: '正能量四',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题五',
content: '正能量五',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题六',
content: '正能量六',
imgUrl: 'https://picsum.photos/50/50'
}
];
var data3 = [
{
title: '标题七',
content: '正能量七',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题八',
content: '正能量八',
imgUrl: 'https://picsum.photos/50/50'
},
{
title: '标题九',
content: '正能量九',
imgUrl: 'https://picsum.photos/50/50'
}
];
var list = document.querySelector('.list');
var changeDataBtn = document.querySelector('#changeDataBtn');
var currentData = data1;
changeDataBtn.addEventListener('click', function(){
if(currentData === data1){
currentData = data2;
}else if(currentData === data2){
currentData = data3;
}else{
currentData = data1;
}
renderList(currentData);
});
function renderList(data){
var html = '';
for(var i=0; i<data.length; i++){
html += '<div class="item">';
html += '<img src="' + data[i].imgUrl + '" alt="图片">';
html += '<div>';
html += '<h3>' + data[i].title + '</h3>';
html += '<p>' + data[i].content + '</p>';
html += '</div>';
html += '</div>';
}
list.innerHTML = html;
}
renderList(currentData);
</script>
</body>
</html>