通过js实现随机生成图片
Posted changx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过js实现随机生成图片相关的知识，希望对你有一定的参考价值。
这次给大家分享一个通过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="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> <!-- <img src="" > --> </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标签，添加了一个小小的查看原图的功能。
这次只是一个简单的案例，如果大家有更好的方式方法欢迎在下方留言，大家互相借鉴学习！！
以上是关于通过js实现随机生成图片的主要内容，如果未能解决你的问题，请参考以下文章