這次給大家分享一個通過js向HTML添加便簽，實現隨機代碼生成的案例，代碼已經放在下方，
這里我在下面准備了50張圖片，但是沒有放在博文中，如果讀者想要練習，可以自己下載一些圖片，建議下載的多一些。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隨機生成圖片</title>
<style>
//設置css樣式
a,div{
margin:0;
padding:0;
box-sizing: border-box;
}
.d1{
width: 700px;
height: 700px;
}
img{
display: block;
width: 150px;
height: 150px;
float:left;
margin:5px;
}
</style>
</head>
<body>
<!-- 友情提示：開發步驟 結構 樣式 js
先創建足夠的img標簽，用來將樣式設置好，然后注釋掉，通過js生成img
-->
<button id="btn">點擊生成隨機圖片</button>
<div id="div1" class="d1">
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
<!-- <img src="" alt=""> -->
</div>
</body>
<script>
//獲取元素
var div1 = document.getElementById('div1')
var btn = document.getElementById('btn');
//生成一個臨時容器
var frag = document.createDocumentFragment();
oImg(16)
function oImg(numb){
//通過for循環向HTML中添加圖片標簽
for(var i=0;i<numb;i++){
let num=Math.round((Math.random()+0.01)*50);//我准備了50張圖片，所以乘50
//生成img標簽
let aImg=document.createElement("img");
//生成a標簽，可以添加圖片點擊查看原圖的效果,也可以不添加，個人隨意
let a=document.createElement("a");
//使用拼接的方法給生成的img標簽插入圖片
aImg.src = "./images/" + num +".jpg";
//將生成的標簽插入到它們的父元素中
a.appendChild(aImg);
frag.appendChild(a);
a.href = aImg.src;
}
// frag.setAttribute('width','700px')
div1.appendChild(frag);
}
//給按鈕添加刷新功能，可以隨機生成新的圖片
btn.onclick = function(){
window.location.reload()
}
</script>
</html>
圖片隨機顯示主要還是for循環和圖片地址的拼接，其中我還加入了a標簽，添加了一個小小的查看原圖的功能。
這次只是一個簡單的案例，如果大家有更好的方式方法歡迎在下方留言，大家互相借鑒學習！！
