用js在靜態頁面中批量添加圖片的事例

在初學網頁建造的時辰，經常會往頁面中添加一些圖片，有時辰添加一張兩張的沒什么，可是添加多個的什么就有些麻煩，這時我們就可用 js 做一個輪回，來節流代碼量；

東西/原料

1
靜態頁面比力簡單建造這里只是簡單的演示一下事例，所以就寫一個簡單的頁面結構，一個按鈕 button，用來觸發事務，一個 div 用來容納圖片
2
簡單的添加一些樣式，
text-align：center；將元素放到頁面中心；
別的的就是將div的邊框顯示出來；
3
之后起頭用 js 節制，script 標簽中先界說變量 oBut 和 oDIv ，別離對應按鈕 button和 div；以此便于后面操控；
4
這里界說一個空的變量，其實就是用來擔任數組的職責，用來后面龐納圖片，便于之后挪用
5
這里就是用 onclick 來寫一個點擊事務，
點擊按鈕button 觸發輪回，將一一對應那的圖片路徑存放到 str 中
之后再將 str 中的圖片路徑放入 div中，如許就可以實現批量添加圖片的目標了；
要注重的是圖片的文件名最好如圖二一樣，如許便于輪回挪用；