加了提示后alert('已經放大到最大值了');就關不掉了,這是為什么呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.8.1.min.js" ></script>
<style type="text/css">
.box{
? ? width: 500px;
? ? margin: 0 auto;
}
</style>
</head>
<body>
<div>
? ? <img src="1.jpg" id="myimage"><br />
? ? <input type="button" value="放大" id="max" />
? ? <input type="button" value="縮小" id="min" />
</div>
<script type="text/javascript">
/**/
? ? window.onload =function(){
? ? ? ? //1、給放大按鈕加點擊事件
? ? ? ??
? ? ? ? var maxbtn =document.getElementById('max');
? ? ? ? var img =document.getElementById('myimage');
? ? ? ? //定義高寬放大的極限值為圖片2倍
? ? ? ? var maxWidth =img.width*2;
? ? ? ? var maxHeight =img.height*2;
? ? ? ? maxbtn.onclick = function(){
? ? ? ? ? ? maxfun();
? ? ? ? }
? ? ? ? //2、定義放大函數:a、用定時器;b、找到圖片id;c、圖片20毫秒增加5%;d、再加if判斷;
? ? ? ? function maxfun(){
? ? ? ? ? ? var endwidth = img.width*1.3;//每次點擊后的寬度
? ? ? ? ? ? var endheight =img.height*1.3;//每次點擊后的高度
? ? ? ? ? ? var maxtime = setInterval(function(){
? ? ? ? ? ? ? ? if(img.width<endwidth){
? ? ? ? ? ? ? ? ? ? if(img.width<maxWidth){
? ? ? ? ? ? ? ? ? ? ? ? img.width ?= img.width*1.05;
? ? ? ? ? ? ? ? ? ? ? ? img.height = img.height*1.05;
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? alert('已經放大到最大值了');
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(maxfun);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? clearInterval(maxfun);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },20);
? ? ? ? }
? ? }
? ??
</script>
</body>
</html>
2015-10-12
clearInterval(maxfun);應該是clearInterval(maxtime); ?因為關閉的是定時器 ?而不是關閉函數