<style>
div{
432px;
height: 768px;
background: url('./image/1.jpg') no-repeat;
}
</style>
</head>
<body>
<button>随机背景</button><br>
<button name="b">背景1</button>
<button name="b">背景2</button>
<button name="b">背景3</button>
<button name="b">背景4</button>
<button name="b">背景5</button>
<button name="b">背景6</button>
<div></div>
<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>