JS之简单的页面渲染。
// 渲染页面流程 :// - 1. 我们需要先去排页面;// - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染;// 渲染的字符串结构 :// 1. 容器结构开头 : <div class="container">// 2. box结构 (根据我们创建的商品列表,进行box结构拼接)// 3. 容器结构结尾 : </div>CSS样式部分忽略。<scrip
·
// 渲染页面流程 :
// - 1. 我们需要先去排页面;
// - 2. 结构排列好了之后我们才能考虑使用js进行页面渲染;
// 渲染的字符串结构 :
// 1. 容器结构开头 : <div class="container">
// 2. box结构 (根据我们创建的商品列表,进行box结构拼接)
// 3. 容器结构结尾 : </div>
CSS样式部分忽略。
<script>
//容器
document.write('<div class="container">');
//需要的数据
var list = [
{
src : "https://image.gogoup.com/20220223/1645584749461.jpg",
title : "儿童美育,怎么避免孩子成为俗气的人?"
},
{
src : "https://image.gogoup.com/20220323/1648002327805.jpg",
title : "(加群明晚看直播)零基础Ai商业插画全能班"
},
{
src : "https://image.gogoup.com/20220311/1646979105795.png",
title : "IP形象设计全解实战班"
},
{
src : "https://image.gogoup.com/20220224/1645710319923.jpg",
title : "B端UI设计研修班(报名优惠)"
},
{
src : "https://image.gogoup.com/20220223/1645617035442.jpg",
title : "(可插班)C4D+AE动态视觉综合提升班"
}
]
//根据list之中的对象里面的数据,去渲染html结构。
var html='';
for(var i = 0; i<list.length; i++){
// 以后我们会经常处理这样的复杂结构字符串拼接;
// - 小技巧 :
// - 1. 保持原有的html结构
// - 2. 让每行都变成一个独立的字符串;
// - 3. 在除了最后一行字符串之外每行字符串的结构都添加上一个 +
html += '<div class="box">' +
'<img src="' + list[i].src +'" alt="">' +
'<div class="title">'+
list[i].title +
'</div>' +
'</div>'
}
document.write(html);
document.write('</div>');
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)