<style>
#beijing {
margin: 0 auto;
padding-top: 100px;
width: 1200px;
height: 700px;
background: url(image/bg.jpg) no-repeat;
background-size: 100% 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
cursor: url(image/cursor.png), auto;
}
.jinggai {
margin: 0;
padding: 0px;
width: 26%;
height: 150px;
background: url(image/hole.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.laishu {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: url(image/mouse.png) no-repeat;
position: absolute;
top: -20%;
left: 23%;
display: none;
}
button {
display: block;
margin: 0 auto;
width: 200px;
height: 100px;
background-color: sandybrown;
color: seashell;
font-size: 2em;
cursor: pointer;
}
</style>
<body>
<audio id="all" src="music.mp3" loop="loop"></audio>
<audio id="qiao" src="dazhong.wav"></audio>
<button>开始</button>
<div id="beijing">
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
<div class="jinggai">
<div class="laishu"></div>
</div>
</div>
</body>
<script>
var mouse = document.querySelectorAll(".laishu");
var cur = document.querySelector("#beijing")
var music = document.getElementById("all");
var qiao = document.getElementById("qiao");
var begin = document.querySelector("button")
begin.onclick = function() {
if (begin.textContent == "开始") {
begin.textContent = "暂停";
timer = setInterval(time, 500);
music.play();
} else {
begin.textContent = "开始";
clearInterval(timer);
music.pause();
}
}
var timer = null;
var time = function() {
var index = Math.floor(Math.random() * 9)
mouse[index].style.display = "block"
}
for (let i = 0; i < mouse.length; i++) {
mouse[i].onclick = function(e) {
this.style.display = "none"
}
}
cur.onmousedown = function() {
cur.style.cursor = "url(image/cursor-down.png),auto";
qiao.load();
qiao.play();
}
cur.onmouseup = function() {
cur.style.cursor = "url(image/cursor.png),auto";
}
</script>