var attr = 1 使用var表示声明了一个局部变量
attr =1 不使用var则表示申明了一个全局变量
比如说下面的这个错误,
js部分就是没有使用var定义局部变量造成(已更改,错误点已经标出)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>打地鼠</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
background-image: url(image/bg.jpg);
/* 光标 */
cursor: url(image/cursor.png), auto;
}
table {
width: 600px;
height: 600px;
margin: 0px auto;
border-collapse: collapse;
}
td {
width: 150px;
height: 150px;
background-image: url(image/hole.png);
background-repeat: no-repeat;
background-size: 120px 50px;
background-position: center bottom;
text-align: center;
/* 设置图片从底部出现
设置垂直方向的出现位置 */
vertical-align: bottom;
}
img {
width: 80px;
height: 0px;
position: relative;
top: -8px;
}
.mouseUp {
animation: up 0.3s;
/* 保持动画结束时刻的状态 */
animation-fill-mode: forwards;
}
.mouseDown {
animation: down 0.1s;
animation-fill-mode: forwards;
}
@keyframes down {
0% {
height: 70px;
}
100% {
height: 0;
}
}
@keyframes up {
0% {
height: 0px;
}
100% {
height: 70px;
}
}
#defen {
position: relative;
top: 50px;
font-size: 30px;
background-color: rgba(100, 100, 100, 0.5);
width: 120px;
padding: 0px 10px 0px 30px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<audio src="audio/music.mp3" autoplay loop></audio>
<audio id="dazhong"></audio>
<div id="defen">得分:0</div>
<table>
<tr>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
</tr>
<tr>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
</tr>
<tr>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
</tr>
<tr>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
<td>
<img src="image/mouse.png" alt="">
</td>
</tr>
</table>
<script src="jquery.js"></script>
<script>
var mouses = document.getElementsByTagName('img')
// $代表一个jquery对象
// p = People()
// $ = jQuery()
var mouses = $('img')
var fenshu = 0;
function showMouse() {
// 0 ~ 1 0 ~ 15.XXXXXXXXXXXXXXXXXXXXX
var random = Math.random() * 16
// Math.floor获取一个不大于该数值的最大整数
random = Math.floor(random)
// 获取一个指定的地鼠
var mouse = mouses.get(random) //这里必须要使用var来定义这个变量,不然在下面调用这个方法的时候,会造成下次调用使用上次的变量引发的错误
$(mouse).addClass('mouseUp').removeClass('mouseDown')
// timeout 延时;超时
setTimeout(function () {
$(mouse).addClass('mouseDown').removeClass('mouseUp').addClass().addClass().removeAttr().addAttr()
}, 2500)
}
// function s..
function play() {
setTimeout(showMouse, 500)
setTimeout(showMouse, 1000)
setTimeout(showMouse, 1500)
setTimeout(showMouse, 2000)
setTimeout(showMouse, 2500)
setTimeout(showMouse, 3000)
}
setInterval(play , 3000)
// div.onmousedwon
// $('.red') $('#defen') $('div') $(变量名)
$('body').mousedown(function(){
// 更改标签的css样式
$('body').css('cursor','url(image/cursor-down.png) , auto')
}).mouseup(function(){
$('body').css('cursor','url(image/cursor.png) ,auto').css().css().css().css()
})
// var body = document.querySelector('body')
// body.onmousedown = function(){
// body.style.cursor = 'url(image/cursor-down.png) ,auto'
// }
// body.onmouseup = function(){
// }
$(mouses).click(function(){
// $(this)指的是当前被点击的对象
$(this).addClass('mouseDown').removeClass('mouseUp')
fenshu += 10 ;
// 更改标签文本
$('#defen').text('得分:' + fenshu)
// 更改标签属性
$('#dazhong').attr('src','audio/dazhong.wav').get(0).play()
})
</script>
</body>
</html>
错误