随机背景图 - Tsunami黄嵩粟

<style>

div{

width: 432px;

height: 768px;

background: url('./image/1.jpg') no-repeat;

}

</style>

</head>

<body>

// 实际项目中,会有一个数组,存储图片名称

// 当前自定义一个数组,模拟后端数据库获取的数据

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>

posted on 2020-12-08 22:56 Tsunami黄嵩粟阅读(70) 评论(0) 编辑收藏举报