【用js在静态页面中批量添加图片的事例】 在初学网页建造的时辰， 经常会往页面中添加一些图片， 有时辰添加一张两张的没什么， 可是添加多个的什么就有些麻烦， 这时我们就可用 js 做一个轮回， 来节流代码量；
文章插图
文章插图
需要这些哦
电脑
Sublime text 2
方式/
1静态页面比力简单建造这里只是简单的演示一下事例， 所以就写一个简单的页面结构， 一个按钮 button， 用来触发事务， 一个 div 用来容纳图片
文章插图
文章插图
2简单的添加一些样式，
text-align：center；将元素放到页面中心；
别的的就是将div的边框显示出来；
文章插图
文章插图
3之后起头用 js 节制， script 标签中 先界说 变量 oBut 和 oDIv ， 别离对应 按钮 button和 div；以此便于后面操控；
文章插图
4这里界说一个空的 变量 ， 其实就是用来担任数组的职责， 用来后面庞纳图片， 便于之后挪用
文章插图
5这里就是用 onclick 来写一个点击事务，
点击 按钮button 触发轮回 ， 将 一一对应那的图片路径存放到 str 中
之后再将 str 中的图片路径放入 div中， 如许就可以实现批量添加图片的目标了；
要注重的是图片的文件名最好 如图二 一样， 如许便于轮回挪用；
文章插图
文章插图
注重事项仅作分享；
以上内容就是用js在静态页面中批量添加图片的事例的内容啦， 希望对你有所帮助哦！
推荐阅读
- 怎么用Wireshark抓包测试
- 如何在Apple Mail中添加电子邮件帐户
- 除了捕鱼，古人造船还有哪些用途？
- 怎么把一个人打过来电话设为关机
- 如何复制微博链接？
- 卫生间的风水讲究
- 手机使用就了卡顿，发烫怎么办？
- 华为手机party模式怎么使用？
- 狗在什么情况下会伤人 防止狗伤人的小技巧
- 泰迪可不可以喝酸奶