javascript实例教程零基础入门：10个经典案例带你快速上手实战

零基础学 JavaScript 的朋友是不是总遇到这些情况？看了一堆语法教程，却不知道怎么写实际代码；别人写的案例看不懂，自己动手就报错；想做个简单的交互效果，对着屏幕发呆半天。其实啊，JavaScript 入门不难，关键是靠实例练手，把零散的语法串起来用。今天兔子哥就带大家从简单到复杂，做 10 个经典实例，每个案例都讲清楚核心知识点和避坑技巧，新手常问的 “实例从哪下手”“怎么把语法用到实战中” 这些问题，咱们一个个说清楚，一起往下看吧！

先说说：零基础学 JS 实例，这 3 个原则要记牢

很多人学实例只抄代码，学完还是不会写，这是方法不对。记住这几个原则，练实例才有效：

• 先看懂再改，别盲目抄：拿到案例先搞懂 “每一行代码在干嘛”，再试着改功能，比如改改弹出的文字、按钮的颜色，比单纯复制粘贴强 10 倍。
• 从简单开始，别贪复杂：先做弹窗、计数器这些小案例，再挑战表单验证、轮播图，一步一步来，成就感才足。
• 边练边记，别死记语法：遇到if判断、for循环这些语法，结合实例场景记，比如 “弹窗案例用了alert()，计数器用了onclick事件”，比背语法表好记多了。

有个粉丝跟我说，他一开始硬啃语法书，学了三周还不会写点击按钮弹窗，后来跟着实例练，每天改一个小功能，两周就敢自己写简单交互了，这就是实例的魔力。

基础实例（1-4）：先把核心语法和事件搞懂

刚开始练手别难为人，这 4 个小实例能帮你把alert()、事件、变量这些基础知识点用透，做完超有成就感。

1. 点击弹窗：练基础事件和输出

功能：点击按钮，弹出 “你好，JavaScript！” 的提示框。

• 核心知识点：onclick点击事件，alert()弹出框函数。
• 代码步骤：
  1. 写个按钮：点我弹窗；
  2. 写 JS 函数：function showMsg() { alert("你好，JavaScript！"); }。
  
  
• 新手避坑：函数名别写错！有个粉丝把showMsg写成showmsg，结果点击没反应，JS 区分大小写，名字得一模一样。
• 为啥要练：这是 JS 最基础的交互，能让你明白 “点击按钮→执行代码” 的逻辑，入门必练。

2. 计数器：练变量和累加

功能：点击 “加 1” 按钮，数字从 0 开始递增；点击 “重置” 按钮，数字变回 0。

• 核心知识点：变量存储数据，onclick事件，document.getElementById()获取元素。
• 代码片段：html

  <p>当前数字：<span id="num">0span>p><button onclick="add()">加1button><button onclick="resetNum()">重置button><script>let count = 0; // 存储数字的变量function add() {count++; // 累加document.getElementById("num").innerText = count; // 更新显示}function resetNum() {count = 0;document.getElementById("num").innerText = count;}script>

  
  
• 关键技巧：用let定义变量存数字，innerText修改元素内容，这是动态更新页面的基础方法。

3. 密码可见切换：练条件判断

功能：输入密码时默认显示圆点，点击 “显示密码” 按钮，切换成明文显示。

• 核心知识点：if-else条件判断，getElementById()，type属性修改。
• 代码思路：
  1. 密码框：；
  2. 按钮：显示密码；
  3. JS 函数判断当前类型，切换type为text（明文）或password（密文）。
  
  
• 新手必问：怎么判断当前类型？用document.getElementById("pwd").type获取属性，等于password就切换成text，反之亦然。

4. 随机数生成器：练数学函数

功能：点击按钮，生成 1-100 之间的随机整数并显示。

• 核心知识点：Math.random()生成随机数，Math.floor()取整数，事件绑定。
• 核心代码：javascript

  function getRandom() {const random = Math.floor(Math.random() * 100) + 1; // 1-100随机数document.getElementById("result").innerText = random;}

  
  
• 小技巧：Math.random()生成 0-1 的小数，乘 100 就是 0-100，加 1 变成 1-101，再用floor取整就是 1-100，记不住公式就抄下来贴电脑上。

进阶实例（5-7）：搞定表单、循环和 DOM 操作

基础玩熟了，就得练这些能解决实际问题的实例，表单验证、列表操作在网页开发中超常用。

5. 表单验证：练表单事件和条件判断

功能：输入用户名和密码，点击提交时验证：用户名不能为空，密码长度不能少于 6 位。

• 核心知识点：onsubmit表单提交事件，value获取输入值，if-else验证。
• 代码片段：html

  <form onsubmit="return checkForm()">用户名：<input type="text" id="username"><br>密码：<input type="password" id="password"><br><input type="submit" value="提交">form><script>function checkForm() {const user = document.getElementById("username").value;const pwd = document.getElementById("password").value;if (user === "") {alert("用户名不能为空！");return false; // 阻止表单提交}if (pwd.length < 6) {alert("密码不能少于6位！");return false;}alert("提交成功！");return true; // 允许提交}script>

  
  
• 避坑重点：onsubmit事件要加return，函数里验证失败返回false才能阻止提交，很多新手漏了这步，导致验证无效。

6. 列表添加删除：练 DOM 动态操作

功能：输入内容，点击 “添加” 按钮，把内容加到列表里；点击列表项后面的 “删除”，移除该项。

• 核心知识点：createElement创建元素，appendChild添加元素，removeChild删除元素。
• 新手难点：动态添加的元素怎么绑定事件？可以在创建元素时用onclick直接绑定，比如：javascript

  // 创建删除按钮const delBtn = document.createElement("button");delBtn.innerText = "删除";delBtn.onclick = function() {list.removeChild(li); // 移除当前列表项};

  
  
• 实战价值：这个实例能帮你搞懂 “动态操作页面元素”，做待办清单、评论区都用得上。

7. 图片切换：练数组和定时器

功能：页面上显示图片，点击 “上一张”“下一张” 切换图片；勾选 “自动播放”，每隔 2 秒自动切换。

• 核心知识点：数组存图片路径，setInterval定时器，clearInterval清除定时器。
• 关键代码：javascript

  const imgs = ["img1.jpg", "img2.jpg", "img3.jpg"]; // 图片路径数组let index = 0; // 当前图片索引let timer; // 定时器变量function showImg() {document.getElementById("myImg").src = imgs[index];}function nextImg() {index = (index + 1) % imgs.length; // 循环切换showImg();}function autoPlay() {if (document.getElementById("auto").checked) {timer = setInterval(nextImg, 2000); // 2秒切换一次} else {clearInterval(timer); // 取消自动播放}}

  
  
• 避坑技巧：自动播放要记得清除定时器，不然勾选多次会导致切换越来越快，用clearInterval先清再设。

综合实例（8-10）：把知识点串起来，成就感拉满

最后这 3 个实例能把前面学的事件、判断、循环全用上，做完基本能应付简单的网页交互开发了。

8. 简易计算器：练运算符和条件分支

功能：输入两个数字，选择加减乘除，点击计算显示结果。

• 核心知识点：select下拉菜单取值，switch-case多条件判断，算术运算符。
• 为啥要练：这个实例能帮你把数学运算和交互结合，理解 “用户输入→程序处理→输出结果” 的完整流程。

9. 待办清单：练综合 DOM 操作

功能：输入待办事项，添加到列表；点击 “完成” 标记为已完成（划横线）；点击 “删除” 移除事项。

• 核心知识点：classList添加样式，checked属性判断状态，综合 DOM 操作。
• 实战技巧：用 CSS 给完成的事项加text-decoration: line-through，通过 JS 动态添加类名实现样式变化。

10. 随机颜色发生器：练样式操作

功能：点击按钮，随机改变页面背景颜色，同时显示颜色的 RGB 值。

• 核心知识点：Math.random()生成随机色值，style.backgroundColor修改样式。
• 代码亮点：RGB 颜色由红、绿、蓝三个 0-255 的数值组成，用随机数生成这三个值，动态拼接成颜色字符串。

粉丝练实例的小技巧，新手可以抄作业

• 小张：“我把每个实例的核心代码抄在笔记本上，标上‘弹窗用 alert’‘获取元素用 getElementById’，忘了就翻，记得特别牢。”
• 小李：“练完一个实例就录屏，记录自己改代码的过程，卡住时回看视频，很快能找到错在哪。”
• 小王：“在 JS 代码里加很多注释，比如// 这里是累加变量，过几天再看也能看懂自己写的啥。”

最后说点个人心得吧。JavaScript 实例学习，贵精不贵多，把这 10 个案例吃透，每个都动手改几遍，比看 100 篇语法教程管用。新手别害怕报错，刚开始变量名写错、事件没绑定这些都正常，改的过程就是进步的过程。重点是理解 “用户操作→JS 响应→页面变化” 的逻辑，比如点击按钮是用户操作，触发onclick事件是 JS 响应，修改innerText是页面变化。按这个逻辑练，你会发现 JS 交互没那么难，当自己写的待办清单能正常添加删除时，那种成就感，谁练谁知道！加油，零基础也能学好 JavaScript！

标签： document.getElementById 计数器