现在做学成开发项目时，不需要像以前一样把所有的图片的都写出来，可以设置一个数组，数组里面全面放对象，然后通过循环来渲染，这样就不需要将所有的图片写出来，需要记住放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> |
标签：学成,src,title,day05,js,num,images,data,png From： https://www.cnblogs.com/nefu-xiaoshuang/p/16948390.html