JavaScript在线实例怎么写？新手使用CodePen创建第一个Demo教程

编写JavaScript在线实例，核心是通过在线代码沙箱直接在浏览器中编写HTML、CSS和JavaScript，免去本地安装Node.js、配置VS Code或搭建本地HTTP服务器的繁琐过程，并能即时看到代码执行效果与对外分享。在众多前端在线编辑器中，CodePen凭借开箱即用、零配置和完善的实时预览机制，是新手制作第一个交互Demo的理想工具。本文将以一个带点击交互和动态变色的“计数器卡片”为例，带你熟悉CodePen的工作界面，手把手完成从写代码、调试排错到发布分享的全流程。

一、认识CodePen的核心工作区与布局

访问CodePen官方网站（codepen.io）后，无需登录即可点击左侧导航栏的“Create > Pen”快速新建一个临时画布。但建议新手注册一个免费账号，以便随时保存修改并在后续查找自己写过的Demo。

打开新建页面后，最直观的界面由三大代码编辑面板和下方的一个实时预览容器构成。理解这四个区域的分工，是在线写实例的第一步：

新手在使用该界面时需要注意：

• HTML面板无需完整文档结构：不要在HTML框中输入<!DOCTYPE html>、<html>或<head>。CodePen会自动将你写的内容放置在宿主页面的<body>标签内。
• JS面板无需使用标签包裹：不要在JS面板输入<script>或</script>，直接书写纯JS语句即可。
• 底部Console按钮：页面左下角有一个“Console”按钮。点击展开后，可以直接在界面内看到console.log()的打印内容以及报错信息，无需频繁按F12打开浏览器开发者工具。

二、从零编写第一个交互Demo：点击计数器卡片

为了让实例既有视觉效果又有明确的逻辑反馈，我们制作一个带有数字累加与变色效果的“交互计数器卡片”。操作流程分为四个明确步骤：

步骤 1：给实例起一个清晰的标题

进入编辑器后，页面左上角默认显示“Untitled”。点击标题旁边的小铅笔图标，将其修改为 JavaScript Counter Demo。起一个规范的名字有助于后期在个人主页（Dashboard）中检索与归类。

步骤 2：在 HTML 面板中搭建骨架

我们需要一个主卡片容器、一个显示计数的标题、两个操作按钮（增加和重置）以及一段状态提示文字。将以下代码完整输入到 HTML 面板中：

<div class="counter-card">
  <h2>点击计数器实例</h2>
  <div class="count-display" id="countDisplay">0</div>
  <p class="status-tip" id="statusTip">点击下方按钮开始计数</p>
  <div class="btn-group">
    <button id="incrementBtn" class="btn primary">增加计数值 (+1)</button>
    <button id="resetBtn" class="btn secondary">重置为零</button>
  </div>
</div>

注意看每一个需要被 JavaScript 控制的标签都赋予了明确的 id（如 countDisplay、incrementBtn、resetBtn、statusTip）。在初学阶段，使用 ID 选择器进行 DOM 节点绑定是最稳妥且不易出错的方式。

步骤 3：在 CSS 面板中添加布局样式

为了让实例显得整洁，我们使用 Flexbox 让卡片居中，并为按钮加入点击按压效果。将以下样式代码输入到 CSS 面板中：

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f4f8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.counter-card {
  background: #ffffff;
  padding: 32px 40px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(23, 50, 77, 0.08);
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.counter-card h2 {
  margin: 0 0 16px 0;
  color: #17324d;
  font-size: 20px;
}

.count-display {
  font-size: 48px;
  font-weight: bold;
  color: #17324d;
  margin: 12px 0;
  transition: color 0.2s ease;
}

/* 强调高亮样式，后续由 JS 动态增加 */
.count-display.active-high {
  color: #659b9b;
  transform: scale(1.05);
}

.status-tip {
  font-size: 14px;
  color: #627d98;
  margin-bottom: 24px;
}

.btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn.primary {
  background-color: #17324d;
  color: #ffffff;
}

.btn.primary:hover {
  background-color: #244b6e;
}

.btn.secondary {
  background-color: #e2e8f0;
  color: #475569;
}

.btn.secondary:hover {
  background-color: #cbd5e1;
}

步骤 4：在 JS 面板中编写交互逻辑

现在页面有结构和外观，但点击按钮没有任何反应。我们在 JS 面板中写入逻辑：定义一个计数状态变量，获取按钮并绑定点击监听，每次点击累加并同步更新界面。当计数值达到 5 以上时，为数字添加高亮类名。

// 1. 初始化状态变量
let currentCount = 0;

// 2. 获取页面 DOM 元素
const countDisplay = document.getElementById("countDisplay");
const statusTip = document.getElementById("statusTip");
const incrementBtn = document.getElementById("incrementBtn");
const resetBtn = document.getElementById("resetBtn");

// 3. 辅助函数：更新界面显示与样式
function updateUI() {
  countDisplay.textContent = currentCount;
  
  if (currentCount >= 5) {
    countDisplay.classList.add("active-high");
    statusTip.textContent = "计数值已突破 5，高亮显示！";
  } else if (currentCount > 0) {
    countDisplay.classList.remove("active-high");
    statusTip.textContent = "正在累加，持续点击试试看";
  } else {
    countDisplay.classList.remove("active-high");
    statusTip.textContent = "计数值已归零";
  }
}

// 4. 绑定增加按钮点击事件
incrementBtn.addEventListener("click", function() {
  currentCount += 1;
  console.log("用户点击了累加按钮，最新计数:", currentCount);
  updateUI();
});

// 5. 绑定重置按钮点击事件
resetBtn.addEventListener("click", function() {
  currentCount = 0;
  console.log("用户重置了计数值");
  updateUI();
});

// 控制台提示初始化成功
console.log("Demo 初始化完成，事件监听已就绪。");

代码输入完毕后，无需任何手动编译操作，等待大约 1 秒钟，CodePen 下方的预览区便会自动应用该逻辑。点击“增加计数值”按钮，就能看到数字实时上升，达到 5 时颜色变为灰青强调色，底部的“Console”面板也同步输出了打印记录。

三、CodePen 代码执行机制与调试排错

很多新手初次使用 CodePen 时，经常会遇到“代码写了为什么不生效”或“报错不知道去哪看”的问题。理解在线实例在浏览器底层的执行流，可以帮助我们快速定位故障。

四、保存、分享与嵌入外部网站

完成实例的编写与调试后，下一步是将你的成果安全保存并分享给他人。CodePen 提供了多种呈现形态以适配不同的场景需求：

1. 保存与生成固定链接

编写完毕后，点击右上角的“Save”按钮（或直接按下快捷键 Ctrl + S / Mac 上为 Cmd + S）。保存成功后，浏览器的地址栏会生成一个固定 URL，形如 https://codepen.io/[你的用户名]/pen/[唯一字符ID]。只要将这个链接复制发送给其他人，对方打开就能看到你的完整源码和运行成果。

2. 切换全屏演示（Full View）

如果你希望向他人演示交互效果，但不希望代码面板占据屏幕空间，可以点击右上角的“Change View”菜单，切换为“Full Page View”，或者直接将链接中的 /pen/ 修改为 /full/。此时页面将成为全屏独立预览页，只保留底部的纯洁视图。

3. 嵌入到个人技术博客或文档

在撰写前端教程或技术总结时，直接把在线实例嵌入文章是最佳实践。点击 CodePen 右下角的“Embed”按钮，弹出的浮层会允许你定制默认显示的面板（例如只显示 HTML + JS，或者只显示 Result）。复制其生成的 <iframe> 代码直接粘贴到你的博客 Markdown 或 HTML 源码中，读者便能在阅读过程中就地点击运行甚至修改测试。

五、总结与进阶练习建议

编写 JavaScript 在线实例并不是一件高不可攀的事情。通过 CodePen，新手可以专注于最核心的代码编写与逻辑实现，而不用被环境搭建所困扰。我们梳理了“认识三大面板 -> 编写结构样式 -> 绑定事件与逻辑 -> 控制台调试 -> 保存与分享”的标准全流程。

当你顺利完成了这个计数器卡片后，可以尝试在现有代码基础上完成以下两个进阶小练习，巩固对 JavaScript 事件处理的掌握：

1. 添加边界限制： 修改 JS 代码，当计数值减到 0 时，将“重置”按钮设置为禁用状态（resetBtn.disabled = true），防止无意义的操作。
2. 增加倒计时或自动递增： 使用 setInterval 函数，为卡片新增一个“自动计时”开关按钮，每隔 1 秒自动增加数值，体验 JavaScript 异步定时器的运行机制。