如何用JavaScript的if语句与onclick实现形状连续点击放大效果？

嘿，作为编程初学者能想到这个交互需求真的很赞！我来给你一步步拆解实现方法，代码都是最基础易懂的，放心看👇

我们可以通过CSS类切换 + JavaScript点击事件监听来实现这个需求，先从基础结构开始：

一、CSS 样式部分 #

首先我们需要定义形状的初始样式，以及两次放大后的样式，还要加上过渡动画让放大过程更丝滑：

/* 初始形状样式 */
.shape {
  width: 100px;
  height: 100px;
  background-color: #42b983; /* 随便选的绿色，你可以改成自己喜欢的颜色 */
  border-radius: 8px; /* 圆角可选，不想加就删掉 */
  transition: all 0.3s ease; /* 过渡动画，让放大更平滑 */
  cursor: pointer; /* 鼠标移上去显示手型，提示可点击 */
}

/* 第一次点击后的放大样式 */
.shape.scale-1 {
  width: 150px;
  height: 150px;
}

/* 第二次点击后的进一步放大样式 */
.shape.scale-2 {
  width: 200px;
  height: 200px;
}

二、JavaScript 交互部分 #

接下来我们需要监听形状的点击事件，记录点击次数，根据次数切换对应的CSS类：

// 获取页面上的形状元素
const shape = document.querySelector('.shape');
// 定义一个变量记录点击次数，初始为0
let clickCount = 0;

// 给形状添加点击事件监听
shape.addEventListener('click', () => {
  clickCount++; // 每次点击，次数加1
  
  // 根据点击次数切换样式类
  if (clickCount === 1) {
    // 第一次点击：移除可能存在的scale-2，添加scale-1
    shape.classList.remove('scale-2');
    shape.classList.add('scale-1');
  } else if (clickCount === 2) {
    // 第二次点击：移除scale-1，添加scale-2
    shape.classList.remove('scale-1');
    shape.classList.add('scale-2');
  }
  // 如果想支持多次循环点击（比如第三次点击变回初始大小），可以加个else重置
  // else {
  //   clickCount = 0;
  //   shape.classList.remove('scale-1', 'scale-2');
  // }
});

三、完整的HTML示例 #

把上面的代码整合到HTML里，直接就能运行啦：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>点击放大形状</title>
  <style>
    /* 这里放上面的CSS代码 */
    .shape {
      width: 100px;
      height: 100px;
      background-color: #42b983;
      border-radius: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
      margin: 50px auto; /* 让形状居中显示 */
    }

    .shape.scale-1 {
      width: 150px;
      height: 150px;
    }

    .shape.scale-2 {
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <!-- 形状元素 -->
  <div class="shape"></div>

  <script>
    /* 这里放上面的JavaScript代码 */
    const shape = document.querySelector('.shape');
    let clickCount = 0;

    shape.addEventListener('click', () => {
      clickCount++;
      
      if (clickCount === 1) {
        shape.classList.remove('scale-2');
        shape.classList.add('scale-1');
      } else if (clickCount === 2) {
        shape.classList.remove('scale-1');
        shape.classList.add('scale-2');
      }
    });
  </script>
</body>
</html>

小提示 #

• 你可以自己修改CSS里的width/height值，调整每次放大的幅度
• 过渡动画的0.3s可以改成0.5s，让动画更慢或者更快
• 如果想支持更多次点击放大，只需要增加对应的CSS类和JS判断条件就行

内容的提问来源于stack exchange，提问作者Merialc