傳送門：
http://106.12.120.191/html/circleChange.html
html文件如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>amplification</title>
<style type="text/css">
.circle {
border-radius: 50%;
background: cadetblue;
width: 6.25rem;
height: 6.25rem;
margin: auto;
}
.buttonstyle {
display: flex;
justify-content: center;
}
button {
margin: 1.25rem;
width: 5rem;
height: 2.5rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="buttonstyle">
<button type="success" onclick="big()">放大</button>
<button type="info" onclick="stop()">暫停</button>
<button type="warning" onclick="small()">縮小</button>
</div>
<div class="circle" id="circle"></div>
<script>
var circle = document.getElementById("circle");
var flag; //判斷標誌
var lock = false; //防止多次點擊觸發多次事件(同步鎖)
function big() { //放大
stop();//清除之前的動畫效果
if (lock == false) {
flag = setInterval("action(1)", 50);
} else {
lock = true;
}
}
function action(e) {
var temp = e; //臨時變量
var width = circle.offsetWidth; //獲取圓的高度
var height = circle.offsetHeight; //獲取圓的高度
if (boundary(width)=="doing") {
circle.style.width = width + 5 * temp+ "px";
circle.style.height = height + 5 * temp + "px"
} else {
if(boundary(width)=="max" && temp <0){
circle.style.width = width + 5 * temp + "px";
circle.style.height = height + 5 * temp + "px"
}
if(boundary(width)=="min" && temp >0){
circle.style.width = width + 5 * temp + "px";
circle.style.height = height + 5 * temp + "px"
}
circle.style.width = width;//設置圓的寬度
circle.style.height = height;//設置圓的高度
}
}
function stop() { //停止
clearInterval(flag);
}
function small() { //縮小
stop();
if (lock == false) {
flag = setInterval("action(-1)", 50);
} else {
lock = true;
}
}
function boundary(width) {//判斷是不是邊界值,設定圓的邊界值在30px與300px之間
if (width==300) {
return "max";
}
if(width==30){
return "min"
}
if(width > 30 && width < 300) {
return "doing"
}
}
</script>
</body>
</html>