<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.list{
width: 600px;
height: 600px;
background: gray;
margin: 0 auto;
position: relative;
margin-top: 10px;
}
.list div{
width: 50px;
height: 50px;
background-color: green;
/* position: absolute; */
float: left;
margin-bottom: 10px;
margin-right: 10px;
/* background: url('./img01.jpg'); */
background-position: 0 0;
}
</style>
</head>
<body>
<div class="list" ></div>
<script>
var list = document.querySelector('.list')
var num = 0
var open = true
for(var i= 0; i <10 ; i++){
for(var j=0; j <10 ; j++){
list.innerHTML += '<div>' + '</div>'
}
}
var divs = document.querySelectorAll('.list div')
for(var q =0 ; q <divs.length ; q++){
divs[q].index=true
divs[q].onmouseover = function(){
if(num==100){
alert('1')
}
if(this.index == true){
num = num +1
this.index = false
}
console.log(num)
this.style.background = 'url(./img01.jpg)'
}
}
</script>
</body>
</html>
js 拼图
最新推荐文章于 2021-01-23 19:34:09 发布