用js在静态页面中批量添加图片的事例

在初学网页建造的时辰，经常会往页面中添加一些图片，有时辰添加一张两张的没什么，可是添加多个的什么就有些麻烦，这时我们就可用 js 做一个轮回，来节流代码量；

东西/原料

1
静态页面比力简单建造这里只是简单的演示一下事例，所以就写一个简单的页面结构，一个按钮 button，用来触发事务，一个 div 用来容纳图片
2
简单的添加一些样式，
text-align：center；将元素放到页面中心；
别的的就是将div的边框显示出来；
3
之后起头用 js 节制，script 标签中先界说变量 oBut 和 oDIv ，别离对应按钮 button和 div；以此便于后面操控；
4
这里界说一个空的变量，其实就是用来担任数组的职责，用来后面庞纳图片，便于之后挪用
5
这里就是用 onclick 来写一个点击事务，
点击按钮button 触发轮回，将一一对应那的图片路径存放到 str 中
之后再将 str 中的图片路径放入 div中，如许就可以实现批量添加图片的目标了；
要注重的是图片的文件名最好如图二一样，如许便于轮回挪用；