html - 如何在 Jquery 和 HTML 中进行增长和收缩 counter?

我想尝试让一个圆圈从 20px 增长到 300px。它应该只是为了缩小尺寸而放大。有一个按钮可以单击以启动操作。每次单击该按钮时,都应该在 counter 中添加一个,上面写着“Grow and Shrink Counter:”。

$(document).ready(function() {
  $("button").click(function() {
    $("div").animate({
      height: '300px',
      width: '300px'
    });
    $("div").animate({
      height: '20px',
      width: '20px'
    });
  });
});

let counter = 0

document.querySelector("#counter").addEventListener('click', function() {
  counter++
  this.innerHTML = counter
})
html {
  height: 100%;
}

#shrink {
  height: 1px;
  width: 1px;
  border-radius: 50%;
  background-color: lightgreen;
  margin: 5px;
  position: relative;
  color: white;
}

#container1 {
  display: flex;
  align-items: center;
  flex-direction: column;
}

#container2 {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 75%;
}

#grow {
  margin: 5px;
  border-radius: 10px;
}

#counter {
  text: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container1">
  <button id="grow"><span style="font-size:20px">Grow</span> and <span style="font-size:8px">Shrink</span></button>
  <p id="counter">Grow and Shrink Counter:</p>
</div>
<div id="container2">
  <div id="shrink"></div>
</div>

回答1

我可以立即发现几个错误:

  1. 在您的 html 中,ids 没有开始和结束引号
  2. counter 变量被声明了两次。您可以将 counter 按钮变量命名为 counterButton
  3. 在代码片段中,包含 jQuery

相似文章