当前位置：首页 > news >正文

JavaScript又忘了，忘了？太正常了！忘了？太正常了！重新上路：

news 2025/9/27 8:30:16

前言：无

🎯3个“万能公式”

记住这三个“套路”，能解决80%的网页效果：

公式1：【当…时，就让…】

// 当[什么元素]发生[什么事件]时，就让[什么元素]做[什么动作]
document.querySelector('按钮的选择器').addEventListener('click', function() {document.querySelector('要操作的元素的选择器').style.display = 'none';
});

公式2：【自动重复做…】

// 每隔[多少毫秒]，自动重复执行一个函数
function 重复做的事() {// 要重复的代码console.log('我又执行了一次！');
}
setInterval(重复做的事, 1000); // 1000毫秒 = 1秒

公式3：【平滑改变…】

// 通过不断改变样式值，实现动画
let 位置 = 0;
function 动画() {位置 += 1;document.querySelector('.要移动的元素').style.transform = `translateX(${位置}px)`;requestAnimationFrame(动画); // 告诉浏览器下次重绘前继续调用这个函数
}
动画();

🎯完全忘掉之前的那些复杂例子。这次，只做一个世界上最简单的交互

第一步：创建你的第一个“魔法文件”

在你的电脑桌面上，右键 -> 新建 -> 文本文档。
把它的名字改成 magic.html （注意，一定要把后缀 .txt 改成 .html）。
在这个文件上右键 -> 打开方式 -> 选择“记事本”。

现在，你有了一个空白的画布。

第二步：写入最基础的“网页骨架”

把下面这段代码一模一样地复制进去。这是所有网页都需要的基本结构，就像人的骨架一样。

<!DOCTYPE html>
<html>
<head><title>我的第一个魔法</title><style>/* 这里是化妆间，负责让东西变好看 */</style>
</head>
<body><!-- 这里是舞台，所有能看到的东西都放在这里 --><script>// 这里是魔法间，负责让东西动起来</script>
</body>
</html>

解说：

<head>：是“后台”。<title>是网页标签页的名字。<style>是“化妆间”，管美不美。
<body>：是“舞台”。我们在舞台上放东西，用户才能看到。
<script>：是“魔法间”。JavaScript代码就写在这里，负责让东西动起来。

第三步：在“舞台”上放一个演员和一个按钮

在 <body> 和 </body> 之间，写上这两行：

    <p id="myText">我是第一行文字，点击下面按钮我会变色。</p><button id="myButton">点击我施展魔法！</button>

解说：

<p>：是一个段落。
id="myText"：给这个段落起了一个独一无二的名字，叫 myText。这样我们才能在魔法间里准确地找到它。
<button>：是一个按钮。
id="myButton"：给这个按钮起名叫 myButton。

第四步：在“魔法间”里写下咒语

在 <script> 和 </script> 之间，写上这段代码：

        // 第一步：找到舞台上的按钮演员let theButton = document.getElementById('myButton');// 第二步：告诉这个按钮，当你被点击时，要做什么theButton.addEventListener('click', function() {// 第三步：当点击发生时，找到舞台上的文字演员let theText = document.getElementById('myText');// 第四步：改变这个文字的颜色theText.style.color = 'red';});

逐行耐心解说：

let theButton = ...：
- let 意思是“让…”。
- theButton 是我们自己取的一个变量名，代表“那个按钮”。
- document.getElementById('myButton') 是 JavaScript 的内置魔法。document 代表整个网页文档，getElementById 意思是“通过Id获取元素”，'myButton' 就是我们要找的名字。
- 整句话的意思是：让变量 theButton 代表舞台上那个叫 myButton 的按钮。
theButton.addEventListener('click', function() { ... })：
- addEventListener 意思是“添加一个事件监听器”。
- 'click' 是“事件类型”，指“点击”这个动作。
- function() { ... } 是一个“函数”，也就是包裹在 { } 里的指令集合。
- 整句话的意思是：告诉 theButton（那个按钮），当有人“点击”你时，就执行 { ... } 花括号里的所有指令。
let theText = document.getElementById('myText');：
- 这和我们找按钮是一样的道理。
- 意思是：让变量 theText 代表舞台上那个叫 myText 的文字段落。
theText.style.color = 'red';：
- theText.style 意思是“那个文字的样式”。
- .color 意思是“颜色”这个样式。
- = 'red' 意思是“把它设置为红色”。
- 整句话的意思是：把那个文字的颜色，变成红色。

第五步：施展魔法！

现在，你的整个文件内容应该是这样的：

<!DOCTYPE html>
<html>
<head><title>我的第一个魔法</title><style>/* 化妆间暂时空着 */</style>
</head>
<body><p id="myText">我是第一行文字，点击下面按钮我会变色。</p><button id="myButton">点击我施展魔法！</button><script>let theButton = document.getElementById('myButton');theButton.addEventListener('click', function() {let theText = document.getElementById('myText');theText.style.color = 'red';});</script>
</body>
</html>

保存这个文件。 然后直接双击桌面上的 magic.html 文件，它会在你的浏览器中打开。

你会看到一个按钮和一行字。点击那个按钮，看看会发生什么。

六六六：感觉一下，然后玩坏它！

如果成功了，你就在短短几分钟内完成了一个完整的“用户交互”。现在，试着在记事本里修改一些东西，然后保存，再刷新浏览器页面看效果：

改颜色：把 'red' 改成 'blue'， 'green'，或者 '#ff00ff'（一种粉色）。
改文字：把 ‘我是第一行文字...’ 改成任何你想说的话。

改样式：在魔法间里，theText.style.color = 'red' 的下面，另起一行，加上：

theText.style.fontSize = '30px'; // 字变超大！
theText.style.backgroundColor = 'yellow'; // 背景变黄！

最重要的不是记住代码，而是理解这个“模式”：

找到谁 （getElementById）
监听什么 （addEventListener）
做什么 （修改 .style 属性）

这个模式，能做出网页上绝大部分的交互效果。其他的只是在这个基础上变得更复杂而已。

🎯其他问题

为什么它已经有名字叫myText/myButton了，还要给它声明一个theText/theButton的名字？

1.为什么有id还要声明变量名？

id=“myButton” 是给元素起的"身份证名字"（永久性的）
let theButton = … 是我们在JavaScript代码里给它的"昵称"（临时性的）

2.为什么要多此一举？

效率问题：每次写 document.getElementById('myButton') 就像每次都要翻通讯录找人的完整身份证信息。而声明 theButton 后，我们直接叫"那个按钮"就行了。

// 低效的方式：每次都要"查找"
document.getElementById('myButton').addEventListener('click', ...);
document.getElementById('myButton').style.color = 'red';
document.getElementById('myButton').disabled = true;// 高效的方式：查找一次，重复使用
let theButton = document.getElementById('myButton');
theButton.addEventListener('click', ...);
theButton.style.color = 'red';
theButton.disabled = true;