<script> // 实际项目中,会有一个数组,存储图片名称 // 当前自定义一个数组,模拟后端数据库获取的数据 const imageArr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg'];
// 通过索引下标,随机获取数组中的图片名称作为图片数据,设定给div背景
// 数组和div标签,应该都是函数的参数
const oDiv = document.querySelector('div');
// 通过数组获取到所有的button按钮,生成一个伪数组 // 通过索引下标,获取到第一个button标签 const oBtn1 = document.querySelectorAll('button')[0];
oBtn1.addEventListener('click' , ()=>{ mySetBGI(imageArr , oDiv); });
// 指定背景 // 获取指定背景button按钮的伪数组 const oBtns = document.querySelectorAll('[name="b"]'); // 通过循环遍历,给所有的标签对象,添加点击事件 // forEach循环遍历,v就是button标签,k就是索引下标 oBtns.forEach((v,k)=>{ // 给v也就是标签对象,添加点击事件 v.addEventListener('click' , ()=>{ // 给oDiv设定背景样式,每次的背景图片名称,是索引+1 oDiv.style.background = `url('./image/${k+1}.jpg') no-repeat`; }) })
// 定义的随机背景函数 function mySetBGI(array,element){ // 1.生成随机的索引下标 let num = parseInt( Math.random()*array.length );
// 2,使用随机数,获取图片名称 array[num]
// 3,将随机图片名称,定义给标签对象 element.style.background = `url('./image/${array[num]}') no-repeat`; }
</script>
标签：背景,button,jpg,随机,数组,标签,背景图 来源： https://www.cnblogs.com/ht955/p/14106168.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。