js-day05-学成在线学习

现在做学成开发项目时，不需要像以前一样把所有的图片的都写出来，可以设置一个数组，数组里面全面放对象，然后通过循环来渲染，这样就不需要将所有的图片写出来，需要记住放document.write(``) 里面即可

 

<script>
	let data = [
	{
	src: 'images/course01.png',
	title: 'Think PHP 5.0 博客系统实战项目演练',
	num: 1125
	},
	{
	src: 'images/course02.png',
	title: 'Android 网络动态图片加载实战',
	num: 357
	},
	{
	src: 'images/course03.png',
	title: 'Angular2 大前端商城实战项目演练',
	num: 22250
	},
	{
	src: 'images/course04.png',
	title: 'Android APP 实战项目演练',
	num: 389
	},
	{
	src: 'images/course05.png',
	title: 'UGUI 源码深度分析案例',
	num: 124
	},
	{
	src: 'images/course06.png',
	title: 'Kami2首页界面切换效果实战演练',
	num: 432
	},
	{
	src: 'images/course07.png',
	title: 'UNITY 从入门到精通实战案例',
	num: 888
	},
	// 根据数据的个数来渲染 到底有多少个小li
	// console.log(data.length)
	for (let i = 0; i < data.length; i++) {
	document.write(`
	<li>
	<img src=${data[i].src} alt="">
	<h4>
	${data[i].title}
	</h4>
	<div class="info">
	<span>高级</span> • <span> ${data[i].num}</span>人在学习
	</div>
	</li>
	`)
	}
	</script>