js基础学习记录-学成在线和渲染英雄图片案例（调用数组对象渲染页面）

知识储备

1）之前在做静态网页做商品展示类的盒子的时候，图片需要一张张输入src地插入，描述需要一个个打字，有了数组对象之后，就不用这么麻烦了，只需要调用数组对象的属性就ok。

1. 学成在线案例

根据素材原有框架调用datas数组对象属性对页面进行渲染

                <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: 'AndroidAPP实战项目演练',
                            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
                        },
                        {
                            src: 'images/course08.png',
                            title: 'Cocos 深度学习你不会错过的实战',
                            num: 590
                        },
                        {
                            src: 'images/course04.png',
                            title: '自动添加的模块',
                            num: 1000
                        }
                    ]
                    for (let i = 0; i < data.length; i++) {
                        document.write(`
                        <li>
                        <a href="#">
                        <img src=${data[i].src} title="${data[i].title}">
                        <h4>
                            ${data[i].title}
                        </h4>
                        <div class="info">
                            <span>高级</span> • <span>${data[i].num}</span>人在学习
                        </div>
                        </a>
                        </li>
                        `)
                    }
                </script>

2. 渲染英雄图片案例

渲染王者荣耀英雄图片，鼠标悬浮显示英雄姓名

这里是可以显示名字的，截图时候消失了

	<ul class="list">
		<script>
			let datas = [
				{ name: '司马懿', imgSrc: '01.jpg' },
				{ name: '女娲', imgSrc: '02.jpg' },
				{ name: '百里守约', imgSrc: '03.jpg' },
				{ name: '亚瑟', imgSrc: '04.jpg' },
				{ name: '虞姬', imgSrc: '05.jpg' },
				{ name: '张良', imgSrc: '06.jpg' },
				{ name: '安琪拉', imgSrc: '07.jpg' },
				{ name: '李白', imgSrc: '08.jpg' },
				{ name: '阿珂', imgSrc: '09.jpg' },
				{ name: '墨子', imgSrc: '10.jpg' },
				{ name: '鲁班', imgSrc: '11.jpg' },
				{ name: '嬴政', imgSrc: '12.jpg' },
				{ name: '孙膑', imgSrc: '13.jpg' },
				{ name: '周瑜', imgSrc: '14.jpg' },
				{ name: '老夫子', imgSrc: '15.jpg' },
				{ name: '狄仁杰', imgSrc: '16.jpg' },
				{ name: '扁鹊', imgSrc: '17.jpg' },
				{ name: '马可波罗', imgSrc: '18.jpg' },
				{ name: '露娜', imgSrc: '19.jpg' },
				{ name: '孙悟空', imgSrc: '20.jpg' }
			]
			for (let i = 0; i < datas.length; i++) {
				document.write(`
				<li>
				<a href='#'>
				<img src="./uploads/heros/${datas[i].imgSrc}" title='${datas[i].name}'>
				</a>
				</li>
				`)
			}
		</script>
	</ul>

总结：

1. 案例二素材里给的a的样式好像是错的，把样式删掉就对了

2. 中途隔了很久继续学习js，html,css好多都忘得差不多了，但是因为之前学过其他语言，现在学起来还是比较轻松。希望以后捡他俩也能捡得快一点

第一次发布笔记，很笨拙，但是总要开始做起来是不是，加油小涂