如何实现仅点击指定按钮触发代码运行？按钮失效时显示div区块

当然可以实现这个需求！下面是一套完整的前端实现方案，完全贴合你描述的场景：未点击按钮时代码不执行，点击后启动运行；代码运行中再次点击按钮时，显示指定的提示区块。

1. HTML 结构 #

首先搭建基础的DOM元素：一个触发按钮，以及需要显示的运行提示区块：

<!-- 代码触发按钮 -->
<button id="executeBtn">启动运行代码</button>

<!-- 运行中提示区块（默认隐藏） -->
<div id="runningNotice" class="hidden">代码正在后台运行，请稍后再操作！</div>

2. CSS 样式 #

给提示区块添加基础样式，并通过hidden类控制显示/隐藏：

/* 隐藏元素的通用类 */
.hidden {
  display: none;
}

/* 运行提示区块样式 */
#runningNotice {
  margin-top: 12px;
  padding: 10px 15px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
  border-radius: 4px;
}

3. JavaScript 核心逻辑 #

通过状态变量跟踪代码运行状态，处理按钮点击事件的分支逻辑：

// 核心状态变量：标记代码是否正在运行
let isCodeRunning = false;

// 获取DOM元素
const executeBtn = document.getElementById('executeBtn');
const runningNotice = document.getElementById('runningNotice');

// 绑定按钮点击事件
executeBtn.addEventListener('click', () => {
  // 情况1：代码正在运行，显示提示区块
  if (isCodeRunning) {
    runningNotice.classList.remove('hidden');
    return;
  }

  // 情况2：代码未运行，开始执行流程
  // 先隐藏提示区块
  runningNotice.classList.add('hidden');
  // 标记为运行中状态
  isCodeRunning = true;
  // 优化用户体验：修改按钮文字
  executeBtn.textContent = '代码运行中...';

  // --------------------------
  // 这里替换成你实际要运行的代码
  // 示例：模拟一个耗时的异步任务（比如接口请求、数据处理）
  setTimeout(() => {
    console.log('目标代码执行完成！');
    // 任务结束后重置状态
    isCodeRunning = false;
    executeBtn.textContent = '启动运行代码';
  }, 3000);
  // --------------------------
});

关键要点说明 #

• 状态变量控制：isCodeRunning是核心，它确保同一时间只有一份代码在运行，避免重复触发
• 分支逻辑处理：点击按钮时先判断状态，分别处理「运行中」和「未运行」的场景
• 状态重置：代码运行完成后必须将isCodeRunning设回false，否则按钮会永久处于不可用状态
• 用户体验优化：修改按钮文字可以让用户更直观地感知当前状态，提升交互体验

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