在当今数字化的时代，前端开发扮演着至关重要的角色，它决定了用户与网页和应用程序交互的体验。HTML、CSS 和 JavaScript 作为前端开发的核心技术，分别负责网页的结构、样式和交互。本教程将为前端新手全面深入地介绍 HTML、CSS 和 JavaScript 的知识点，并通过实用案例帮助你快速上手。
HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过各种标签来定义网页的结构和内容，使得浏览器能够正确地显示网页。
- class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">
</code>标签定义了网页的标题，显示在浏览器的标签栏上。</li><li><code><body></code>：包含网页的可见内容，如文本、图像、链接等。</li></ol>
<h4><a name="t4"></a>（三）常用 HTML 标签</h4>
<ol><li><strong>语义化标签</strong>：
<ul><li><code><header></code>：表示网页或章节的头部，通常包含标题、导航链接等。有助于提高网页的可读性和可访问性，方便搜索引擎理解页面结构。</li><li><code><nav></code>：用于定义导航链接的部分，如网站的主导航菜单、侧边栏导航等。</li><li><code><main></code>：代表页面的主要内容区域，一个页面应该只有一个<code><main></code>元素。突出页面的核心内容。</li><li><code><article></code>：表示独立的、可复用的内容块，如博客文章、新闻报道等。</li><li><code><section></code>：用于对页面内容进行分组，通常有一个标题来描述该部分的内容。</li><li><code><aside></code>：表示与页面主要内容相关但可以独立存在的部分，如侧边栏、广告、引用等。</li><li><code><footer></code>：包含页面的底部信息，如版权声明、联系信息、相关链接等。</li></ul></li><li><strong>多媒体标签</strong>：
<ul><li><code><audio></code>和<code><video></code>：允许在网页中直接嵌入音频和视频文件，无需依赖第三方插件。可设置属性如<code>controls</code>来显示播放控制条。</li></ul></li><li><strong>表单标签</strong>：
<ul><li><code><input></code>：输入字段，有多种类型如<code>text</code>、<code>email</code>、<code>password</code>、<code>number</code>、<code>date</code>、<code>time</code>、<code>datetime-local</code>、<code>range</code>、<code>color</code>等。可设置属性如<code>placeholder</code>提供输入提示，<code>required</code>表示必填。</li><li><code><select></code>：下拉列表，使用<code><option></code>标签定义选项，可设置<code>selected</code>指定默认选中项。</li><li><code><textarea></code>：多行文本输入区域，可设置<code>rows</code>和<code>cols</code>控制大小。</li><li><code><button></code>：按钮，可设置<code>type</code>为<code>submit</code>（提交表单）、<code>reset</code>（重置表单）或<code>button</code>（普通按钮）。</li></ul></li><li><strong>其他重要标签</strong>：
<ul><li><code><a></code>：超链接，使用<code>href</code>属性指定链接目标地址，<code>target</code>属性可设置链接在新窗口或当前窗口中打开。</li><li><code><img></code>：图像，使用<code>src</code>属性指定图像路径，<code>alt</code>属性提供图像的替代文本，以便在图像无法显示时显示给用户。</li><li><code><div></code>：通用容器，用于将其他元素组合在一起，进行布局和样式设置。</li><li><code><span></code>：内联容器，用于对文本或其他内联元素进行样式设置。</li></ul></li></ol>
<h3><a name="t5"></a>三、CSS 基础</h3>
<h4><a name="t6"></a>（一）CSS 概述</h4>
<p>CSS（Cascading Style Sheets）即层叠样式表，用于控制网页的外观和布局。它可以定义网页中元素的颜色、字体、大小、位置等样式，使网页更加美观和易于阅读。</p>
<h4><a name="t7"></a>（二）CSS 引入方式</h4>
<p> 1.<span class="edu-hl hl hl-1" data-report-click="{"spm":"1001.2101.3001.7020","extra":"{\"word\":\"内联\"}"}" data-tit="内联" data-pretit="内联">内联</span>样式：直接在 HTML 标签中使用<code>style</code>属性。这种方式将样式直接应用于特定的元素，但会导致代码重复和难以维护。</p>
<ul><li>例如：</li></ul>
<pre data-index="1" class="set-code-show" name="code"><code class="language-html hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color: blue;"</span>></span>This is a paragraph.<span class="hljs-tag"></<span class="hljs-name">p</span>></span>。</code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p> 2.内部样式表：在 HTML 文件的<code><head></code>部分使用<code><style></code>标签。将样式集中在一个地方，方便管理和修改，但只适用于单个 HTML 文件。</p>
<ul><li>例如：</li></ul>
<pre data-index="2" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="language-css"></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-selector-tag">p</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">color</span>: blue;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">style</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<p> 3.外部样式表：将 CSS 代码保存为一个独立的文件，然后在 HTML 文件中使用<code><link></code>标签引入。可以在多个 HTML 文件中共享样式，提高开发效率和代码的可维护性。</p>
<ul><li>例如：</li></ul>
<pre data-index="3" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<h4><a name="t8"></a>（三）CSS 选择器</h4>
<ol><li>元素选择器：选择特定的 HTML 元素。例如，<code>p { color: blue; }</code>选择所有<code><p></code>元素。</li><li>类选择器：选择具有特定类名的元素。使用<code>.class-name { }</code>的语法，可在 HTML 元素中使用<code>class</code>属性指定类名，然后通过类选择器应用样式。
<ul><li>例如：<code>.my-class { color: red; }</code>选择所有具有<code>class="my-class"</code>的元素。</li></ul></li><li>ID 选择器：选择具有特定 ID 的元素。使用<code>#id-name { }</code>的语法，在 HTML 元素中使用<code>id</code>属性指定唯一的 ID，然后通过 ID 选择器应用样式。
<ul><li>例如：<code>#my-id { color: green; }</code>选择具有<code>id="my-id"</code>的元素。</li></ul></li><li>后代选择器：选择特定元素的后代元素。使用<code>parent-element child-element { }</code>的语法，可以选择父元素内部的任何级别的子元素。
<ul><li>例如：<code>div p { color: purple; }</code>选择<code><div></code>元素内的所有<code><p></code>元素。</li></ul></li></ol>
<h4><a name="t9"></a>（四）CSS 属性</h4>
<ol><li>字体属性：
<ul><li><code>font-family</code>：设置字体类型，可以指定一个或多个字体名称，浏览器会按照顺序查找可用的字体。</li><li><code>font-size</code>：设置字体大小，可以使用像素（px）、百分比（%）、em 等单位。</li><li><code>font-weight</code>：设置字体的粗细，可以使用数值（100 - 900）或关键字（normal、bold 等）。</li></ul></li><li>颜色属性：
<ul><li><code>color</code>：设置文本颜色，可以使用颜色名称、十六进制值、RGB 值或 HSL 值。</li></ul></li><li>背景属性：
<ul><li><code>background-color</code>：设置背景颜色。</li><li><code>background-image</code>：设置背景图像，可以使用 URL 指定图像的路径。</li></ul></li><li>边框属性：
<ul><li><code>border</code>：设置边框的样式、宽度和颜色。可以使用<code>border: width style color;</code>的语法。</li></ul></li><li>布局属性：
<ul><li><code>display</code>：设置元素的显示方式，可以是<code>block</code>（块级元素）、<code>inline</code>（内联元素）、<code>inline-block</code>（内联块级元素）等。</li><li><code>float</code>：设置元素的浮动方向，可以是<code>left</code>（向左浮动）、<code>right</code>（向右浮动）或<code>none</code>（不浮动）。</li><li><code>position</code>：设置元素的定位方式，可以是<code>static</code>（静态定位）、<code>relative</code>（相对定位）、<code>absolute</code>（绝对定位）或<code>fixed</code>（固定定位）。</li></ul></li></ol>
<h4><a name="t10"></a>（五）CSS 高级特性</h4>
<ol><li><strong>变量函数（var ()）</strong>：可以使用<code>var()</code>函数来引用 CSS 变量。</li><li><strong>calc () 函数</strong>：用于在 CSS 中进行数学计算。</li><li><strong>object-fit 和 object-position 属性</strong>：用于控制图像或视频在其容器中的适应方式和位置。</li><li><strong>will-change 属性</strong>：提示浏览器哪些属性可能会发生变化，以便浏览器进行优化。</li><li><strong>transform-origin 属性</strong>：用于设置变换的原点。</li><li><strong>过渡的延迟（transition-delay）</strong>：可以为过渡效果设置延迟时间。</li><li><strong>多背景图像</strong>：可以为一个元素设置多个背景图像。</li><li><strong><code>:is()</code>和<code>:where()</code>伪类</strong>：这两个伪类允许你组合多个选择器，并以更简洁的方式应用相同的样式。</li><li><strong><code>:has()</code>伪类（部分浏览器支持有限）</strong>：用于选择具有特定子元素的元素。</li><li><strong>容器查询（Container Queries）</strong>：类似于媒体查询，但作用于特定的容器元素，而不是整个视口。</li><li><strong>级联层（Cascade Layers）</strong>：可以将 CSS 规则分组到不同的层中，以更好地控制样式的优先级。</li><li><strong>颜色函数的更多用法</strong>：<code>rgb()</code>和<code>rgba()</code>函数可以接受百分比值作为参数，用于更灵活地定义颜色。<code>hsl()</code>和<code>hsla()</code>函数用于定义颜色的色相、饱和度和亮度。</li><li><strong>视口单位的更多应用</strong>：除了<code>vw</code>（视口宽度）和<code>vh</code>（视口高度），还有<code>vmin</code>（视口宽度和高度中的较小值）和<code>vmax</code>（视口宽度和高度中的较大值）。</li><li><strong>自定义属性范围和继承</strong>：CSS 自定义属性（变量）可以在不同的选择器范围内定义，并可以通过继承在子元素中使用。</li><li><strong>使用 CSS Grid 和 Flexbox 结合</strong>：可以结合 CSS Grid 和 Flexbox 来创建复杂的布局。</li><li><strong><code>clip-path</code>属性</strong>：用于创建不规则形状的元素。</li><li><strong><code>backdrop-filter</code>属性</strong>：为元素后面的区域添加滤镜效果。</li><li><strong><code>scroll-snap</code>属性</strong>：用于创建平滑的滚动效果，使页面在滚动时停在特定的位置。</li></ol>
<h3><a name="t11"></a>四、JavaScript 基础</h3>
<h4><a name="t12"></a>（一）JavaScript 概述</h4>
<p>JavaScript 是一种高级编程语言，用于为网页添加交互性和动态效果。它可以在浏览器中运行，与 HTML 和 CSS 结合使用，实现网页的各种功能。</p>
<h4><a name="t13"></a>（二）JavaScript 引入方式</h4>
<p> 1.内联脚本：在 HTML 文件中使用<code><script></code>标签直接编写 JavaScript 代码。适用于小型脚本或快速测试。</p>
<p>例如：</p>
<pre data-index="4" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <body></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Hello, World!'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </body></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<p> 2.外部脚本：将 JavaScript 代码保存为一个独立的文件，然后在 HTML 文件中使用<code><script></code>标签引入。可以将代码分离出来，提高代码的可维护性和可重用性。</p>
<p>例如：</p>
<pre data-index="5" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <body></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </body></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<h4><a name="t14"></a>（三）JavaScript 基本语法</h4>
<ol><li>变量声明：使用<code>let</code>、<code>const</code>或<code>var</code>关键字声明变量。
<ul><li><code>let</code>：用于声明块级作用域的变量，可以在声明后重新赋值。</li><li><code>const</code>：用于声明常量，一旦赋值后不能再被修改。</li><li><code>var</code>：在 ES6 之前使用的变量声明方式，存在一些作用域和提升的问题，现在不推荐使用。</li><li>例如：<code>let x = 10;</code>、<code>const y = 20;</code>。</li></ul></li><li>数据类型：包括数字、字符串、布尔值、数组、对象等。
<ul><li>数字：可以是整数或浮点数，如<code>let num = 42;</code>。</li><li>字符串：用单引号或双引号括起来的文本，如<code>let str = 'Hello';</code>。</li><li>布尔值：只有<code>true</code>和<code>false</code>两个值，如<code>let isTrue = true;</code>。</li><li>数组：用方括号括起来的一组值，可以包含不同类型的元素，如<code>let arr = [1, 2, 3];</code>。</li><li>对象：用花括号括起来的一组键值对，键必须是字符串，值可以是任何类型，如<code>let obj = { name: 'John', age: 30 };</code>。</li></ul></li><li>控制流语句：如<code>if</code>语句、<code>for</code>循环、<code>while</code>循环等。
<ul><li><code>if</code>语句：用于根据条件执行不同的代码块。</li><li><code>for</code>循环：用于重复执行一段代码指定的次数。</li><li><code>while</code>循环：在条件为真时重复执行一段代码。</li></ul></li><li>函数定义：使用<code>function</code>关键字定义函数。函数可以接受参数，并返回一个值。</li></ol>
<ul><li>例如：</li></ul>
<pre data-index="6" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a, b</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">return</span> a + b;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<h4><a name="t15"></a>（四）JavaScript 高级特性</h4>
<ol><li><strong>模板字面量（Template Literals）</strong>：允许在字符串中插入变量和表达式，使用反引号（<code>）包裹字符串，并使用 </code>${expression}` 的形式插入变量或表达式。
<ul><li>例如：<code>const name = "John"; const message = </code>Hello, ${name}!<code>;</code>。</li></ul></li><li><strong>解构赋值（Destructuring Assignment）</strong>：可以从数组或对象中提取值，并将其赋值给变量。
<ul><li>数组解构赋值：<code>const numbers = [1, 2, 3]; const [a, b, c] = numbers;</code>。</li><li>对象解构赋值：<code>const person = { name: "John", age: 30 }; const { name, age } = person;</code>。</li></ul></li><li><strong>展开运算符（Spread Operator）</strong>：可以将数组或对象展开为单个元素或属性。
<ul><li>数组展开：<code>const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr1,...arr2];</code>。</li><li>对象展开：<code>const obj1 = { name: "John", age: 30 }; const obj2 = { city: "New York", hobby: "Reading" }; const combinedObject = {...obj1,...obj2 };</code>。</li></ul></li><li><strong>箭头函数（Arrow Functions）</strong>：是一种更简洁的函数定义方式，具有更简洁的语法和词法作用域。
<ul><li>例如：<code>const add = (a, b) => a + b;</code>。</li></ul></li><li><strong>Promise</strong>：用于处理异步操作的对象，代表了一个异步操作的最终完成或失败。
<ul><li>例如： <pre data-index="7" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchData</span> = (<span class="hljs-params"></span>) => {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">const</span> data = { <span class="hljs-attr">name</span>: <span class="hljs-string">"John"</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">30</span> };</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-title function_">resolve</span>(data);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }, <span class="hljs-number">2000</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> });</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> };</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-title function_">fetchData</span>()</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">data</span>) =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data))</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(error));</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </li></ul></li><li><strong>async/await</strong>：基于 Promise 的异步编程语法糖，使异步代码看起来更像同步代码。
<ul><li>例如： <pre data-index="8" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">const</span> <span class="hljs-title function_">fetchData</span> = <span class="hljs-keyword">async</span> (<span class="hljs-params"></span>) => {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">try</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">"https://api.example.com/data"</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">return</span> data;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> } <span class="hljs-keyword">catch</span> (error) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">throw</span> error;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> };</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-title function_">fetchData</span>()</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">data</span>) =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data))</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">error</span>) =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(error));</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </li></ul></li><li><strong>Set 和 Map 数据结构</strong>：
<ul><li><code>Set</code>：是一种集合数据结构，存储任意类型的唯一值。</li><li><code>Map</code>：是一种键值对的数据结构，存储任意类型的键和值。</li></ul></li><li><strong>模块（Modules）</strong>：在 ES6 中，可以使用模块来组织和封装代码。模块可以导出变量、函数和类，其他模块可以导入这些导出的内容。
<ul><li>例如： <pre data-index="9" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// module1.js</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> message = <span class="hljs-string">"Hello from module1"</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a, b</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">return</span> a + b;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// module2.js</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">import</span> { message, add } <span class="hljs-keyword">from</span> <span class="hljs-string">"./module1.js"</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(message);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">2</span>, <span class="hljs-number">3</span>));</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </li></ul></li><li><strong>函数参数默认值</strong>：可以为函数参数设置默认值，当调用函数时如果没有传入该参数，则使用默认值。
<ul><li>例如： <pre data-index="10" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">greet</span>(<span class="hljs-params">name = <span class="hljs-string">"Anonymous"</span></span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Hello</span>, ${name}!); </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </li></ul></li><li><strong>剩余参数（Rest Parameters）</strong>：允许函数接收不定数量的参数，并将它们作为一个数组处理。</li></ol>
<p> 例如：</p>
<pre data-index="11" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">sum</span>(<span class="hljs-params">...numbers</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">return</span> numbers.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">total, num</span>) =></span> total + num, <span class="hljs-number">0</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<h3><a name="t16"></a>五、HTML、CSS 和 JavaScript 的结合使用</h3>
<h4><a name="t17"></a>（一）使用 JavaScript 操作 HTML 元素</h4>
<p>可以使用 JavaScript 来获取、修改和创建 HTML 元素。</p>
<ul><li>例如：</li></ul>
<pre data-index="12" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><p id=<span class="hljs-string">"myParagraph"</span>><span class="hljs-title class_">This</span> is a paragraph.</p></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// 获取元素</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> paragraph = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'myParagraph'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// 修改元素内容</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> paragraph.<span class="hljs-property">textContent</span> = <span class="hljs-string">'This is a modified paragraph.'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// 创建新元素</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> newParagraph = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'p'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> newParagraph.<span class="hljs-property">textContent</span> = <span class="hljs-string">'This is a new paragraph.'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(newParagraph);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<p>在这个例子中，首先使用<code>document.getElementById</code>方法获取具有<code>id="myParagraph"</code>的<code><p></code>元素。然后，通过修改<code>textContent</code>属性来改变元素的文本内容。最后，使用<code>document.createElement</code>方法创建一个新的<code><p></code>元素，并设置其文本内容，然后使用<code>appendChild</code>方法将新元素添加到<code><body></code>元素中。</p>
<h4><a name="t18"></a>（二）使用 JavaScript 操作 CSS 样式</h4>
<p>可以使用 JavaScript 来修改元素的 CSS 样式。</p>
<ul><li>例如：</li></ul>
<pre data-index="13" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><div id=<span class="hljs-string">"myDiv"</span>><span class="hljs-title class_">This</span> is a div.</div></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="language-javascript"></span></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> div = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'myDiv'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// 修改背景颜色</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> div.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">'red'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-comment">// 修改字体大小</span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> div.<span class="hljs-property">style</span>.<span class="hljs-property">fontSize</span> = <span class="hljs-string">'20px'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p></p>
<p>在这个例子中，首先获取具有<code>id="myDiv"</code>的<code><div></code>元素。然后，通过修改<code>style</code>属性的<code>backgroundColor</code>和<code>fontSize</code>属性来改变元素的<span class="words-blog hl-git-1" data-report-view="{"spm":"1001.2101.3001.10283","extra":"{\"words\":\"背景颜色\"}"}" data-tit="背景颜色" data-pretit="背景颜色">背景颜色</span>和字体大小。</p>
<h3><a name="t19"></a>六、实用案例</h3>
<h4><a name="t20"></a>（一）创建一个简单的待办事项列表</h4>
<ul><li> HTML 结构：</li></ul>
<pre data-index="14" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>To-Do List<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>To-Do List<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"newItemInput"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"addItemButton"</span>></span>Add Item<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"todoList"</span>></span><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<ul><li>CSS 样式：</li></ul>
<pre data-index="15" class="set-code-hide" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">body</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">font-family</span>: Arial, sans-serif;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">h1</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">text-align</span>: center;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">input</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">button</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#4CAF50</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">color</span>: white;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">border</span>: none;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">cursor</span>: pointer;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">ul</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">list-style-type</span>: none;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-tag">li</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ddd</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">5px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li></ol></code> class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://img1.iyenn.com/thumb02/c4a7c45da7i3a7f8/65811691243225911151.jpeg" alt="" title=""></span></div> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<ul><li>JavaScript 代码：</li></ul>
<pre data-index="16" class="set-code-show" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'addItemButton'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> input = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'newItemInput'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> value = input.<span class="hljs-property">value</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">if</span> (value) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> list = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'todoList'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">let</span> li = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'li'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> li.<span class="hljs-property">textContent</span> = value;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> list.<span class="hljs-title function_">appendChild</span>(li);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> input.<span class="hljs-property">value</span> = <span class="hljs-string">''</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line">});</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<h4><a name="t21"></a>（二）创建一个图片轮播器</h4>
<ul><li>HTML 结构：</li></ul>
<pre data-index="17" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Image Slider<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"styles.css"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"slider"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image1.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 1"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image2.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 2"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image3.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"Image 3"</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"prevButton"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"nextButton"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"script.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code> class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://img1.iyenn.com/thumb02/c4a7c45da7i3a7f8/65811691243225911151.jpeg" alt="" title=""></span></div> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p>这里有一个包含三张图片的容器<code><div></code>，以及两个用于切换图片的按钮。</p>
<ul><li>CSS 样式：</li></ul>
<pre data-index="18" class="set-code-show" name="code"><code class="language-css hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-id">#slider</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">overflow</span>: hidden;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-selector-id">#slider</span> <span class="hljs-selector-tag">img</span> {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li></ol></code> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p>设置图片轮播器的大小，并确保超出部分隐藏，同时让图片自适应容器大小。</p>
<ul><li>JavaScript 代码：</li></ul>
<pre data-index="19" class="set-code-hide" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:100%"><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">let</span> images = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'#slider img'</span>);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">let</span> currentImage = <span class="hljs-number">0</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-keyword">function</span> <span class="hljs-title function_">showImage</span>(<span class="hljs-params">index</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < images.<span class="hljs-property">length</span>; i++) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> images[i].<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'none'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> images[index].<span class="hljs-property">style</span>.<span class="hljs-property">display</span> = <span class="hljs-string">'block'</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div> class="hljs-ln-code"> class="hljs-ln-line">}</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-title function_">showImage</span>(currentImage);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'nextButton'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> currentImage++;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">if</span> (currentImage >= images.<span class="hljs-property">length</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> currentImage = <span class="hljs-number">0</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-title function_">showImage</span>(currentImage);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div> class="hljs-ln-code"> class="hljs-ln-line">});</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> </div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div> class="hljs-ln-code"> class="hljs-ln-line"><span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'prevButton'</span>).<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> currentImage--;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-keyword">if</span> (currentImage < <span class="hljs-number">0</span>) {</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> currentImage = images.<span class="hljs-property">length</span> - <span class="hljs-number">1</span>;</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> }</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div> class="hljs-ln-code"> class="hljs-ln-line"> <span class="hljs-title function_">showImage</span>(currentImage);</div></div></li><li> class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div> class="hljs-ln-code"> class="hljs-ln-line">});</div></div></li></ol></code> class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://img1.iyenn.com/thumb02/c4a7c45da7i3a7f8/65811691243225911151.jpeg" alt="" title=""></span></div> class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre>
<p>这段代码首先获取所有的图片元素，定义了一个显示特定图片的<span class="edu-hl hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","extra":"{\"word\":\"函数\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","extra":"{\"word\":\"函数\"}"}" data-tit="函数" data-pretit="函数">函数</span>，初始时显示第一张图片。然后为 “下一张” 和 “上一张” 按钮添加点击事件监听器，实现图片的切换功能。</p>
<h3><a name="t22"></a>七、总结</h3>
<p>通过本教程，你应该对前端开发的核心技术 HTML、CSS 和 JavaScript 有了初步的了解。要成为一名优秀的前端开发人员，需要不断学习和实践。可以通过在线教程、书籍和实际项目来提高自己的技能。祝你在前端开发的道路上取得成功！</p>
<p></p>
<p></p>
<p></p>
<p></p>
</div> data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/weimengen/article/details/142970837","extend1":"pc","ab":"new"}">></div></div>
</div>
id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"> class="blog_extension blog_extension_type1" id="blog_extension">
class="blog_extension_card" data-report-click="{"spm":"1001.2101.3001.6470"}" data-report-view="{"spm":"1001.2101.3001.6470"}">
class="blog_extension_card_left">
<img src="https://img1.iyenn.com/thumb02/c4a7c49eb2b2c41g/474417326143427322823.jpeg" alt="">
</div>
class="blog_extension_card_cont">
class="blog_extension_card_cont_l">
<span class="text">魏大帅</span>
class="blog_extension_card_cont_r">
<img class="weixin" src="https://img1.iyenn.com/thumb02/c4a7c45da7i3a7i3/624416914901196911299.jpeg" alt="">
<span>微信公众号</span>
<img class="go" src="https://img1.iyenn.com/thumb02/c4a7c45da7i3a7i3/452916914901198231.jpeg" alt="">
</div>
</div>
<span class="style">专注于前端技术分享</span>
</div>
</div></div></div>
</article>
</div>
<div style="margin-top: 5px;color: #828a91;font-size: 12px">
<span>注：本文转载自blog.csdn.net的魏大帅。的文章<a href="https://blog.csdn.net/weimengen/article/details/142970837" target="_blank">"https://blog.csdn.net/weimengen/article/details/142970837"</a>。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。</span>
</div>
<div class="content-footer post-content-footer">
<div class="inner-wrapper-sticky">
<div class="post-content-footer-in">
<div class="content-footer-poster">
<button data-title="去评论" class="mobile-hidden b2tooltipbox comment-span"><a
href="#demoAnchor"><i class="b2font b2-chat-2-fill "></i></a></button>
<a href="/member/login/">
<button data-title="喜欢" class="mobile-hidden b2tooltipbox comment-span"
data-id="1722502"><span class=""><i
class="b2font b2-heart-fill "></i><b>4663</b></span></button>
</a>
<button data-title="分享到脸书" class="mobile-hidden b2tooltipbox comment-span"
style="margin-top: 22px"><a
href="javascript:fbShare();">
<svg t="1690264724364" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299"
width="24"
height="24">
<path d="M933.8 195.213c0-58.296-47.259-105.554-105.554-105.554h-633.12c-58.296 0-105.554 47.258-105.554 105.554v633.12c0 58.295 47.258 105.554 105.554 105.554h633.12c58.295 0 105.554-47.259 105.554-105.554v-633.12zM776.21 300.46H669.787v105.4H776.21v105.401H669.787v317.225h-105.4V511.261H458.985v-105.4h105.4V267.9c0-35.433 39.029-72.84 78.785-72.84H776.21v105.4z"
fill="#6C6E72" p-id="2300"></path>
</svg>
</a>
</button>
<button data-title="分享到推特" class="mobile-hidden b2tooltipbox comment-span"><a
href="javascript:twitterShare();">
<svg t="1690265072794" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2903"
width="24"
height="24">
<path d="M1024 512c0-282.763636-229.236364-512-512-512C229.236364 0 0 229.236364 0 512s229.236364 512 512 512C794.763636 1024 1024 794.763636 1024 512zM236.311273 693.946182c8.843636 1.117091 17.873455 1.722182 26.996364 1.722182 53.015273 0.093091 101.794909-19.037091 140.474182-51.153455-49.524364-1.163636-91.275636-36.165818-105.658182-84.200727 6.888727 1.442909 14.010182 2.280727 21.271273 2.327273 10.333091 0.046545 20.293818-1.349818 29.789091-4.049455-51.758545-11.450182-90.763636-60.555636-90.763636-119.063273 0-0.512 0-1.024 0-1.536 15.266909 9.216 32.674909 14.801455 51.246545 15.639273C279.365818 431.709091 259.397818 394.472727 259.397818 352.581818c0-22.155636 5.585455-42.821818 15.313455-60.509091 55.808 73.774545 139.170909 122.740364 233.146182 128.837818-1.954909-8.797091-2.932364-17.966545-2.932364-27.322182 0-66.141091 50.641455-118.923636 113.105455-117.899636 32.535273 0.558545 61.952 15.499636 82.571636 38.958545 25.786182-4.933818 49.989818-14.429091 71.819636-27.694545-8.424727 27.601455-26.391273 50.594909-49.757091 64.977455 22.900364-2.56 44.683636-8.610909 64.977455-17.780364-15.173818 23.598545-34.350545 44.218182-56.459636 60.695273 0.232727 5.12 0.325818 10.24 0.325818 15.36 0 157.044364-113.803636 338.152727-321.861818 338.059636C345.832727 748.311273 286.347636 728.296727 236.311273 693.946182z"
p-id="2904" fill="#6C6E72"></path>
</svg>
</a>
</button>
<button data-title="分享到Whatsapp" class="mobile-hidden b2tooltipbox comment-span"><a
href="javascript:whatsApp();">
<svg t="1690265463406" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4099"
id="mx_n_1690265463407" width="24" height="24">
<path d="M512 85.333333a426.666667 426.666667 0 0 0-345.6 676.693334L128 878.933333a20.906667 20.906667 0 0 0 5.12 21.76 21.76 21.76 0 0 0 21.76 5.546667l121.6-39.253333A426.666667 426.666667 0 1 0 512 85.333333z m248.32 602.453334a119.893333 119.893333 0 0 1-85.333333 60.16c-22.186667 4.693333-51.626667 8.533333-149.333334-32a530.346667 530.346667 0 0 1-213.333333-187.733334 242.773333 242.773333 0 0 1-50.773333-128 136.96 136.96 0 0 1 42.666666-104.106666 63.573333 63.573333 0 0 1 42.666667-15.36h14.08c12.373333 0 18.773333 0 27.306667 20.906666s34.986667 85.333333 37.973333 92.16a24.32 24.32 0 0 1 2.133333 23.04 78.933333 78.933333 0 0 1-14.08 19.626667c-5.973333 7.253333-12.373333 12.8-18.346666 20.48a20.053333 20.053333 0 0 0-5.12 26.88 381.44 381.44 0 0 0 69.12 85.333333 313.173333 313.173333 0 0 0 100.266666 61.866667 26.453333 26.453333 0 0 0 29.866667-4.693333 426.666667 426.666667 0 0 0 33.28-42.666667 23.893333 23.893333 0 0 1 30.72-8.96c11.52 3.84 72.533333 34.133333 85.333333 40.106667s20.906667 9.386667 23.893334 14.506666a106.666667 106.666667 0 0 1-2.986667 58.453334z"
p-id="4100" fill="#6C6E72"></path>
</svg>
</a>
</button>
<!-- <a class="tooltip be-btn-beshare be-btn-link be-btn-link-l use-beshare-link-btn bk dah"-->
<!-- rel="external nofollow" onclick="myFunction()" onmouseout="outFunc()">-->
<!-- <span class="sharetip bz copytipl">复制链接</span>-->
<!-- </a>-->
<div>
<span class="sharetip bz copytipl">复制链接</span>
<button class="btn btn-secondary mobile-hidden b2tooltipbox comment-span copy_button">
<a>
<svg t="1690338204788" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="10669" width="24" height="24">
<path d="M512 1024C229.228 1024 0 794.772 0 512S229.228 0 512 0s512 229.228 512 512-229.228 512-512 512z m54.545-565.02l-1.798-1.764a102.207 102.207 0 0 0-11.002-9.523l-35.453 35.442c4.176 2.446 8.078 5.393 11.605 8.92l1.866 1.763a58.277 58.277 0 0 1 0 82.341l-96.904 96.882a58.334 58.334 0 0 1-82.341 0l-1.832-1.798a58.243 58.243 0 0 1 0-82.306l43.816-43.828a149.675 149.675 0 0 1-10.866-58.732l-67.812 67.72c-41.836 41.825-41.836 110.251 0 152.053l1.787 1.798c41.836 41.79 110.228 41.79 152.052 0l96.882-96.916c41.757-41.825 41.757-110.25 0-152.052z m141.38-141.37l-1.82-1.797c-41.802-41.825-110.228-41.825-152.053 0l-96.882 96.916c-41.824 41.79-41.824 110.216 0 152.053l1.798 1.763c3.505 3.425 7.225 6.576 11.002 9.523l35.454-35.476a57.845 57.845 0 0 1-11.583-8.92l-1.798-1.763a58.311 58.311 0 0 1 0-82.375l96.905-96.882a58.197 58.197 0 0 1 82.284 0l1.798 1.797a58.277 58.277 0 0 1 0 82.341l-43.76 43.828c7.612 18.796 11.196 38.81 10.844 58.766l67.789-67.755c41.824-41.79 41.824-110.216 0.022-152.007z"
p-id="10670" fill="#6C6E72"></path>
</svg>
</a>
</button>
</div>
<div class="btn-group ">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<svg t="1690338289501" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11788" width="24"
height="24">
<path d="M960 128H64c-35.3 0-64 28.6-64 64v640c0 35.3 28.7 64 64 64h160c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h151c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h193c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h152c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h160c35.3 0 64-28.7 64-64V192c0-35.4-28.7-64-64-64zM576 680v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m0-128v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m320-128c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48zM447.2 736h-288c-8.8 0-16.8-3.6-22.6-9.4-5.8-5.8-9.4-13.8-9.4-22.6 0-57.1 27.2-107.8 69.3-140 4-3.1 4.3-9 0.5-12.3-33-29.3-53.8-72.1-53.8-119.7 0-87.7 70.5-158.9 157.9-160 87.8-1.1 160.7 69.6 162 157.4 0.8 48.6-20.1 92.4-53.7 122.2-3.8 3.4-3.6 9.3 0.5 12.4 21.1 16.1 38.4 36.8 50.4 60.6 12.1 23.8 18.9 50.8 18.9 79.3 0 17.8-14.3 32.1-32 32.1z"
p-id="11789" fill="#6C6E72"></path>
</svg>
</button>
<div class="dropdown-menu" style="padding: 5px;box-shadow: 0px 0px 6px 0px #999;">
<div class="menu_img">
<div id="qrcode" style="width:100%; height:100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex;justify-content: space-between;align-items: end;">
<div class="post-tags-meat_news">
<!-- <a class="b2-radius" href="/list_104/">-->
<!-- <span class="tag-img"><i class="b2font b2-price-tag-3-line "></i></span>-->
<!-- <span class="tag-text"></span>-->
<!-- </a>-->
</div>
</div>
<div class="mobile-show">
<div style="display: flex;justify-content: end;flex-wrap: wrap" class="share_mobile">
<a href="javascript:whatsApp();">
<svg t="1690265463406" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4099"
id="mx_n_1690265463407" width="24" height="24">
<path d="M512 85.333333a426.666667 426.666667 0 0 0-345.6 676.693334L128 878.933333a20.906667 20.906667 0 0 0 5.12 21.76 21.76 21.76 0 0 0 21.76 5.546667l121.6-39.253333A426.666667 426.666667 0 1 0 512 85.333333z m248.32 602.453334a119.893333 119.893333 0 0 1-85.333333 60.16c-22.186667 4.693333-51.626667 8.533333-149.333334-32a530.346667 530.346667 0 0 1-213.333333-187.733334 242.773333 242.773333 0 0 1-50.773333-128 136.96 136.96 0 0 1 42.666666-104.106666 63.573333 63.573333 0 0 1 42.666667-15.36h14.08c12.373333 0 18.773333 0 27.306667 20.906666s34.986667 85.333333 37.973333 92.16a24.32 24.32 0 0 1 2.133333 23.04 78.933333 78.933333 0 0 1-14.08 19.626667c-5.973333 7.253333-12.373333 12.8-18.346666 20.48a20.053333 20.053333 0 0 0-5.12 26.88 381.44 381.44 0 0 0 69.12 85.333333 313.173333 313.173333 0 0 0 100.266666 61.866667 26.453333 26.453333 0 0 0 29.866667-4.693333 426.666667 426.666667 0 0 0 33.28-42.666667 23.893333 23.893333 0 0 1 30.72-8.96c11.52 3.84 72.533333 34.133333 85.333333 40.106667s20.906667 9.386667 23.893334 14.506666a106.666667 106.666667 0 0 1-2.986667 58.453334z"
p-id="4100" fill="#6C6E72"></path>
</svg>
</a>
<a href="javascript:fbShare();">
<svg t="1690264724364" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2299"
width="24"
height="24">
<path d="M933.8 195.213c0-58.296-47.259-105.554-105.554-105.554h-633.12c-58.296 0-105.554 47.258-105.554 105.554v633.12c0 58.295 47.258 105.554 105.554 105.554h633.12c58.295 0 105.554-47.259 105.554-105.554v-633.12zM776.21 300.46H669.787v105.4H776.21v105.401H669.787v317.225h-105.4V511.261H458.985v-105.4h105.4V267.9c0-35.433 39.029-72.84 78.785-72.84H776.21v105.4z"
fill="#6C6E72" p-id="2300"></path>
</svg>
</a>
<a href="javascript:twitterShare();">
<svg t="1690265072794" class="fenxiang_icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2903"
width="24"
height="24">
<path d="M1024 512c0-282.763636-229.236364-512-512-512C229.236364 0 0 229.236364 0 512s229.236364 512 512 512C794.763636 1024 1024 794.763636 1024 512zM236.311273 693.946182c8.843636 1.117091 17.873455 1.722182 26.996364 1.722182 53.015273 0.093091 101.794909-19.037091 140.474182-51.153455-49.524364-1.163636-91.275636-36.165818-105.658182-84.200727 6.888727 1.442909 14.010182 2.280727 21.271273 2.327273 10.333091 0.046545 20.293818-1.349818 29.789091-4.049455-51.758545-11.450182-90.763636-60.555636-90.763636-119.063273 0-0.512 0-1.024 0-1.536 15.266909 9.216 32.674909 14.801455 51.246545 15.639273C279.365818 431.709091 259.397818 394.472727 259.397818 352.581818c0-22.155636 5.585455-42.821818 15.313455-60.509091 55.808 73.774545 139.170909 122.740364 233.146182 128.837818-1.954909-8.797091-2.932364-17.966545-2.932364-27.322182 0-66.141091 50.641455-118.923636 113.105455-117.899636 32.535273 0.558545 61.952 15.499636 82.571636 38.958545 25.786182-4.933818 49.989818-14.429091 71.819636-27.694545-8.424727 27.601455-26.391273 50.594909-49.757091 64.977455 22.900364-2.56 44.683636-8.610909 64.977455-17.780364-15.173818 23.598545-34.350545 44.218182-56.459636 60.695273 0.232727 5.12 0.325818 10.24 0.325818 15.36 0 157.044364-113.803636 338.152727-321.861818 338.059636C345.832727 748.311273 286.347636 728.296727 236.311273 693.946182z"
p-id="2904" fill="#6C6E72"></path>
</svg>
</a>
<a>
<span class="sharetip bz copytipl2">复制链接</span>
<button class="copy_button2">
<svg t="1690338204788" class="fenxiang_icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="10669" width="24" height="24">
<path d="M512 1024C229.228 1024 0 794.772 0 512S229.228 0 512 0s512 229.228 512 512-229.228 512-512 512z m54.545-565.02l-1.798-1.764a102.207 102.207 0 0 0-11.002-9.523l-35.453 35.442c4.176 2.446 8.078 5.393 11.605 8.92l1.866 1.763a58.277 58.277 0 0 1 0 82.341l-96.904 96.882a58.334 58.334 0 0 1-82.341 0l-1.832-1.798a58.243 58.243 0 0 1 0-82.306l43.816-43.828a149.675 149.675 0 0 1-10.866-58.732l-67.812 67.72c-41.836 41.825-41.836 110.251 0 152.053l1.787 1.798c41.836 41.79 110.228 41.79 152.052 0l96.882-96.916c41.757-41.825 41.757-110.25 0-152.052z m141.38-141.37l-1.82-1.797c-41.802-41.825-110.228-41.825-152.053 0l-96.882 96.916c-41.824 41.79-41.824 110.216 0 152.053l1.798 1.763c3.505 3.425 7.225 6.576 11.002 9.523l35.454-35.476a57.845 57.845 0 0 1-11.583-8.92l-1.798-1.763a58.311 58.311 0 0 1 0-82.375l96.905-96.882a58.197 58.197 0 0 1 82.284 0l1.798 1.797a58.277 58.277 0 0 1 0 82.341l-43.76 43.828c7.612 18.796 11.196 38.81 10.844 58.766l67.789-67.755c41.824-41.79 41.824-110.216 0.022-152.007z"
p-id="10670" fill="#6C6E72"></path>
</svg>
</button>
</a>
<a class="dropdown mobile_dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<svg t="1690338289501" class="fenxiang_icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="11788" width="24" height="24">
<path d="M960 128H64c-35.3 0-64 28.6-64 64v640c0 35.3 28.7 64 64 64h160c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h151c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h193c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h152c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h160c35.3 0 64-28.7 64-64V192c0-35.4-28.7-64-64-64zM576 680v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m0-128v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m320-128c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48zM447.2 736h-288c-8.8 0-16.8-3.6-22.6-9.4-5.8-5.8-9.4-13.8-9.4-22.6 0-57.1 27.2-107.8 69.3-140 4-3.1 4.3-9 0.5-12.3-33-29.3-53.8-72.1-53.8-119.7 0-87.7 70.5-158.9 157.9-160 87.8-1.1 160.7 69.6 162 157.4 0.8 48.6-20.1 92.4-53.7 122.2-3.8 3.4-3.6 9.3 0.5 12.4 21.1 16.1 38.4 36.8 50.4 60.6 12.1 23.8 18.9 50.8 18.9 79.3 0 17.8-14.3 32.1-32 32.1z"
p-id="11789" fill="#6C6E72"></path>
</svg>
</button>
<div class="dropdown-menu mobile_menu"
style="padding: 5px;box-shadow: 0px 0px 6px 0px #999;">
<div class="menu_img">
<div id="qrcode_two" style="width:100%; height:100%;"></div>
</div>
</div>
</a>
</div>
</div>
</article>
<div class="related-posts mg-t mg-b box b2-radius">
<div class="related-posts-title">相关推荐</div>
<div class="hidden-line">
<div class="related-posts-in">
</div>
</div>
</div>
<div class="comments-box" id="demoAnchor">
<div id="comments" class="comments-area box b2-radius">
<div class="comments-title">
<div class="comment-info">
<span ref="commentCount" class="comment-count">
发表评论</span>
</div>
<div id="comment-form" class="comment-form">
<div class="toolbox-left">
<div class="profile-box" style="display: flex">
<a class="profile-href comment-overlay-login">
<!-- <span class="profile-name">发表评论</span>-->
<a class="login-info">登录后才能发表评论和回复</a>
<a class="text-secondary" href="/member/register/">注册</p>
<a class="text-secondary" href="/member/login/">/ 登录</a>
</a>
</div>
</div>
</div>
</div><!-- .comments-title -->
<div class="container" style="padding-bottom: 20px;">
<form class="my-4" onsubmit="return submitcomment(this);" data-action="/comment/add/?contentid=1722502">
<div class="form-group">
<textarea name="comment" id="comment"
onblur="if(value.length>200){value=value.substr(0,200)}" class="form-control"
placeholder="请输入评论内容(限200字数)" onkeyup="value=value.substr(0,200)"></textarea>
</div>
<div class="form-group">
<div class="row">
<div class="col-6 col-md-3">
<input type="text" name="checkcode" required id="checkcode"
onfocus='updateimg()' class="form-control" placeholder="请输入验证码">
</div>
<div class="col-6 col-md-3" id="text">
<img title="点击刷新" style="height:33px;" id="codeimg" src="/core/code.php"
onclick="this.src='/core/code.php?'+Math.round(Math.random()*10);"/>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-info mb-2">提交评论</button>
</div>
</form>
<h4>评论记录：</h4>
<a name="comment"></a>
<!-- 分页 -->
<!-- <div class="text-center my-5 text-secondary">未查询到任何数据！</div>-->
<div class="tac text-secondary">未查询到任何数据！</div>
<!-- 评论回复弹框 -->
<div class="modal" tabindex="-1" role="dialog" id="reply">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">回复评论：</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form onsubmit="return submitcomment(this);" data-action="" id="replyform">
<div class="modal-body">
<div class="form-group">
<textarea name="comment" id="comment"
onblur="if(value.length>200) value=value.substr(0,200)"
class="form-control" placeholder="请输入评论内容(限200字数)"
onkeyup="value=value.substr(0,200)"></textarea>
</div>
<div class="form-group">
<div class="row">
<div class="col-6">
<input type="text" name="checkcode" required id="checkcode"
class="form-control" placeholder="请输入验证码">
</div>
<div class="col-6" id="text">
<img title="点击刷新" style="height:33px;" id="codeimg"
src="/core/code.php"
onclick="this.src='/core/code.php?'+Math.round(Math.random()*10);"/>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
<button type="submit" class="btn btn-info" id="text">提交评论
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div><!-- #comments -->
</div>
</div>
<aside id="secondary" class="widget-area" style="margin-right: 0;margin-left: 16px;margin-bottom: 10px;">
<div class="sidebars">
<div class="inner-wrapper-sticky">
<div class="sidebar-innter widget-ffixed">
<section id="tag_cloud-10" class="widget widget_tag_cloud mg-b box b2-radius mobile-hidden">
<h2 class="widget-title_fenlei">分类栏目</h2>
<div class="tagcloud">
<a href="/list_103/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>后端<span class="tag-link-count">
(14377)</span></a>
<a href="/list_104/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>前端<span class="tag-link-count">
(13874)</span></a>
<a href="/list_105/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>移动开发<span class="tag-link-count">
(3750)</span></a>
<a href="/list_106/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>编程语言<span class="tag-link-count">
(3835)</span></a>
<a href="/list_107/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>Java<span class="tag-link-count">
(3890)</span></a>
<a href="/list_108/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>Python<span class="tag-link-count">
(3283)</span></a>
<a href="/list_109/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>人工智能<span class="tag-link-count">
(9752)</span></a>
<a href="/list_110/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>AIGC<span class="tag-link-count">
(2798)</span></a>
<a href="/list_111/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>大数据<span class="tag-link-count">
(3486)</span></a>
<a href="/list_112/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>数据库<span class="tag-link-count">
(3933)</span></a>
<a href="/list_113/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>数据结构与算法<span class="tag-link-count">
(3746)</span></a>
<a href="/list_114/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>音视频<span class="tag-link-count">
(2650)</span></a>
<a href="/list_115/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>云原生<span class="tag-link-count">
(3131)</span></a>
<a href="/list_116/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>云平台<span class="tag-link-count">
(2948)</span></a>
<a href="/list_117/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>前沿技术<span class="tag-link-count">
(2979)</span></a>
<a href="/list_118/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>开源<span class="tag-link-count">
(2143)</span></a>
<a href="/list_119/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>小程序<span class="tag-link-count">
(2842)</span></a>
<a href="/list_120/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>运维<span class="tag-link-count">
(2523)</span></a>
<a href="/list_121/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>服务器<span class="tag-link-count">
(2679)</span></a>
<a href="/list_122/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>操作系统<span class="tag-link-count">
(2311)</span></a>
<a href="/list_123/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>硬件开发<span class="tag-link-count">
(2478)</span></a>
<a href="/list_124/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>嵌入式<span class="tag-link-count">
(2939)</span></a>
<a href="/list_125/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>微软技术<span class="tag-link-count">
(2753)</span></a>
<a href="/list_126/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>软件工程<span class="tag-link-count">
(2046)</span></a>
<a href="/list_127/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>测试<span class="tag-link-count">
(2857)</span></a>
<a href="/list_128/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>网络空间安全<span class="tag-link-count">
(2930)</span></a>
<a href="/list_129/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>网络与通信<span class="tag-link-count">
(2784)</span></a>
<a href="/list_130/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>用户体验设计<span class="tag-link-count">
(2579)</span></a>
<a href="/list_131/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>学习和成长<span class="tag-link-count">
(2587)</span></a>
<a href="/list_132/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>搜索<span class="tag-link-count">
(2728)</span></a>
<a href="/list_133/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>开发工具<span class="tag-link-count">
(6801)</span></a>
<a href="/list_134/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>游戏<span class="tag-link-count">
(2810)</span></a>
<a href="/list_135/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>HarmonyOS<span class="tag-link-count">
(2915)</span></a>
<a href="/list_136/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>区块链<span class="tag-link-count">
(2771)</span></a>
<a href="/list_137/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>数学<span class="tag-link-count">
(3098)</span></a>
<a href="/list_138/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>3C硬件<span class="tag-link-count">
(2747)</span></a>
<a href="/list_139/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>资讯<span class="tag-link-count">
(2891)</span></a>
<a href="/list_140/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>Android<span class="tag-link-count">
(4347)</span></a>
<a href="/list_141/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>iOS<span class="tag-link-count">
(1604)</span></a>
<a href="/list_142/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>代码人生<span class="tag-link-count">
(2911)</span></a>
<a href="/list_143/" class="tag-cloud-link tag-link-279 tag-link-position-1"
style="font-size: 8pt;"
>阅读<span class="tag-link-count">
(2530)</span></a>
</div>
</section>
<section id="b2-widget-hot-4" class="widget b2-widget-hot box b2-radius mobile-hidden">
<div class="b2-widget-title">
<h2 class="widget-title_hot">热门文章</h2>
</div>
<div class="b2-widget-box">
<ul class="b2-widget-list-ul">
</ul>
</div>
</section>
<div style="display:none;" class="scode">104</div>
<div style="display:none;" class="name">前端</div>
</div>
</div>
</div>
</aside>
</div>
<footer id="colophon" class="footer">
<div class="site-footer-nav">
<div class="wrapper">
<div class="Box-v1-cmoUUM tBcFR">
<span>
<a href="/About-us/">关于我们</a>
</span>
<span>
<a href="/Privacy-policy/">隐私政策</a>
</span>
<span>
<a href="/Disclaimer/">免责声明</a>
</span>
<span>
<a href="/Contact-us/">联系我们</a>
</span>
</div>
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="copyright">Copyright © 2020-2024 蚁人论坛 (iYenn.com) All Rights Reserved.</div>
</div>
</div>
</div>
</div>
<div class="dmtop" style="bottom: 25px;">Scroll to Top</div>
</footer>
</div>
<script>
$(document).ready(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 1) {
jQuery('.dmtop').css({bottom: "25px"});
} else {
jQuery('.dmtop').css({bottom: "-100px"});
}
});
jQuery('.dmtop').click(function () {
jQuery('html, body').animate({scrollTop: '0px'}, 800);
return false;
});
});
</script>
<style>
.site-footer {
background-color: #0a0a0a
}
.site-footer-nav {
background-color: #fff;
}
#bigTriangleColor {
background-color: #0a0a0a
}
</style>
</body>
</html>
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
$(".copy_button").click(function () {
var html = window.location.href;
new ClipboardJS('.copy_button', {
text: function (trigger, e) {
return html;
}
}).on('success', function (e) {
$('.copytipl').replaceWith('<span class="sharetip bz copytipl">复制成功</span>');
$('.copytipl').show()
e.clearSelection();
}).on('error', function (e) {
$('.copytipl').replaceWith('<span class="sharetip bz copytipl">复制失败</span>');
});
})
$(".copy_button").hover(function () {
$('.copytipl').replaceWith('<span class="sharetip bz copytipl">复制链接</span>');
$('.copytipl').show()
}, function () {
$('.copytipl').hide()
})
$(".copy_button2").hover(function () {
$('.copytipl2').replaceWith('<span class="sharetip bz copytipl2">复制链接</span>');
$('.copytipl2').show()
}, function () {
$('.copytipl2').hide()
})
$(".copy_button2").click(function () {
var html = window.location.href;
new ClipboardJS('.copy_button2', {
text: function (trigger, e) {
return html;
}
}).on('success', function (e) {
$('.copytipl2').replaceWith('<span class="sharetip bz copytipl2">复制成功</span>');
$('.copytipl2').show()
setTimeout(function () {
$('.copytipl2').hide()
}, 1500)
e.clearSelection();
}).on('error', function (e) {
$('.copytipl2').replaceWith('<span class="sharetip bz copytipl2">复制失败</span>');
});
})
</script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 100,
height: 100,
text: window.location.href
});
var qrcode_two = new QRCode(document.getElementById("qrcode_two"), {
width: 100,
height: 100,
text: window.location.href
});
</script>
<script>
//share facebook
function fbShare(contentId) {
u = document.getElementsByClassName("share_url")[0].content;
t = document.getElementsByClassName("share_title")[0].content;
d = document.getElementsByClassName("share_desc")[0].content;
i = document.getElementsByClassName("share_img")[0].content;
window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(u) + "&t=" + encodeURIComponent("\n\n" + t) + "&d=" + encodeURIComponent("\n\n" + d) + "&i=" + encodeURIComponent(i), "sharer", "toolbar=0,status=0,width=626,height=436");
"sharer", "toolbar=0,status=0,width=626,height=436"
}
//share twitter
function twitterShare(contentId) {
u = document.getElementsByClassName("share_url")[0].content;
t = document.getElementsByClassName("share_title")[0].content;
d = document.getElementsByClassName("share_desc")[0].content;
i = document.getElementsByClassName("share_img")[0].content;
window.open("https://twitter.com/intent/tweet?url=" + encodeURIComponent(u) + "&t=" + encodeURIComponent("\n\n" + t) + "&d=" + encodeURIComponent("\n\n" + d) + "&i=" + encodeURIComponent(i), "sharer", "toolbar=0,status=0,width=626,height=436");
}
//share whatsapp
function whatsApp(contentId) {
u = document.getElementsByClassName("share_url")[0].content;
t = document.getElementsByClassName("share_title")[0].content;
d = document.getElementsByClassName("share_desc")[0].content;
i = document.getElementsByClassName("share_img")[0].content;
location = "https://web.whatsapp.com/send?text=" + encodeURIComponent(t) + "&u" + encodeURIComponent("\n\n" + u) + "&d=" + encodeURIComponent("\n\n" + d) + "&i=" + encodeURIComponent(i) + "&via=lopscoop";
}
</script>
<script>
$('.entry-content a').click(function () {
// var hreF = $(this).attr('href');
// window.open(hreF);//在新窗口打开
$(this).attr("target", "_blank");
})
$(".code-block-extension-copyCodeBtn").click(function () {
var html = $(this).parent().parent().siblings(".code-block-extension-codeShowNum").text();
// console.log(html,'1')
new ClipboardJS('.code-block-extension-copyCodeBtn', {
text: function (trigger, e) {
return html;
}
}).on('success', function (e) {
alert("复制成功!");
e.clearSelection();
}).on('error', function (e) {
alert('Error!');
});
})
var commentDanger = {
alert: function (msg, type) {
if (typeof (type) == "undefined") {
type = "danger";
}
var divElement = $("<div></div>").addClass('alert').addClass('alert-' + type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
divElement.css({
"position": "fixed",
"top": "80px",
"width": "100%",
"margin": "0 auto",
"left": "0",
"right": "0",
"z-index": "99999999999"
});
divElement.text(msg);
var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
$(divElement).append(closeBtn);
$('.content-area').before(divElement);
return divElement;
},
message: function (msg, type) {
var divElement = commentDanger.alert(msg, type);
var isIn = false;
divElement.on({
mouseover: function () {
isIn = true;
},
mouseout: function () {
isIn = false;
}
});
// After a short delay, it rises and disappears
setTimeout(function () {
var IntervalMS = 20;
var floatSpace = 60;
var nowTop = divElement.offset().top;
var stopTop = nowTop - floatSpace;
divElement.fadeOut(IntervalMS * floatSpace);
var upFloat = setInterval(function () {
if (nowTop >= stopTop) {
divElement.css({"top": nowTop--});
} else {
clearInterval(upFloat);
divElement.remove();
}
}, IntervalMS);
if (isIn) {
clearInterval(upFloat);
divElement.stop();
}
divElement.hover(function () {
clearInterval(upFloat);
divElement.stop();
}, function () {
divElement.fadeOut(IntervalMS * (nowTop - stopTop));
upFloat = setInterval(function () {
if (nowTop >= stopTop) {
divElement.css({"top": nowTop--});
} else {
clearInterval(upFloat);
divElement.remove();
}
}, IntervalMS);
});
}, 2500);
}
}
var commentSuccess = {
alert: function (msg, type) {
if (typeof (type) == "undefined") {
type = "success";
}
var divElement = $("<div></div>").addClass('alert').addClass('alert-' + type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
divElement.css({
"position": "fixed",
"top": "80px",
"width": "100%",
"margin": "0 auto",
"left": "0",
"right": "0",
"z-index": "99999999999"
});
divElement.text(msg);
var closeBtn = $('<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>');
$(divElement).append(closeBtn);
$('.content-area').before(divElement);
return divElement;
},
message: function (msg, type) {
var divElement = commentSuccess.alert(msg, type);
var isIn = false;
divElement.on({
mouseover: function () {
isIn = true;
},
mouseout: function () {
isIn = false;
}
});
// After a short delay, it rises and disappears
setTimeout(function () {
var IntervalMS = 20;
var floatSpace = 60;
var nowTop = divElement.offset().top;
var stopTop = nowTop - floatSpace;
divElement.fadeOut(IntervalMS * floatSpace);
var upFloat = setInterval(function () {
if (nowTop >= stopTop) {
divElement.css({"top": nowTop--});
} else {
clearInterval(upFloat);
divElement.remove();
}
}, IntervalMS);
if (isIn) {
clearInterval(upFloat);
divElement.stop();
}
divElement.hover(function () {
clearInterval(upFloat);
divElement.stop();
}, function () {
divElement.fadeOut(IntervalMS * (nowTop - stopTop));
upFloat = setInterval(function () {
if (nowTop >= stopTop) {
divElement.css({"top": nowTop--});
} else {
clearInterval(upFloat);
divElement.remove();
}
}, IntervalMS);
});
}, 2500);
}
}
var id = $('.likebox').data('id');
if ($.cookie('likes_' + id)) {
$('.likebox').find(".b2font").replaceWith('<i class="b2font b2-heart-fill red"></i>');
}
$('.likebox').click(function () {
var id = $(this).data('id');
if ($.cookie('likes_' + id)) {
commentDanger.message("您已点过赞了，请勿重复赞！");
} else {
$(this).find('#support_number').text(parseInt($(this).find('#support_number').text()) + 1);
// $(this).find(".b2font").addClass('red');
$(this).find(".b2font").replaceWith('<i class="b2font b2-heart-fill red"></i>');
var likeslink = $(this).data('likeslink');
var likes = parseInt($(this).find('.likes').text())
$.ajax({
url: likeslink,
data: {
'likes': likes
},
success: function (response, status) {
commentSuccess.message("点赞！");
window.location.reload();
$(this).find(".b2font").replaceAll('<i class="b2font b2-heart-fill red"></i>');
},
error: function (xhr, status, error) {
alert('返回数据异常！');
}
});
}
;
})
function updateimg() {
$('#codeimg').attr('src', '/core/code.php?' + Math.round(Math.random() * 10));
}
//评论回复弹框
$('.replybtn').on("click", function () {
var url = $(this).data("action");
$("#reply").modal("show");
$("#replyform").data("action", url);
});
//提交评论
function submitcomment(obj) {
var url = $(obj).data("action");
//console.log(url);
var comment = $(obj).find("#comment").val();
//alert(comment.length);
var checkcode = $(obj).find("#checkcode").val();
//alert(checkcode);
//console.log('2');
if (comment.length > 0 || comment.length > 3) {
$.ajax({
type: 'POST',
url: url,
date: new Date(),
cache: true,
async: true,
dataType: 'json',
data: {
comment: comment,
checkcode: checkcode
},
success: function (response, status) {
if (response.code) {
// alert(response.data);
commentSuccess.message(response.data);
$(obj)[0].reset();
$(".modal").modal("hide");
} else {
commentDanger.message(response.data);
if (response.tourl != "") {
if (confirm(response.data + '是否立即跳转登录？')) {
location.href = response.tourl;
}
}
$('.codeimg').click(); //更新验证码
}
},
error: function (xhr, status, error) {
alert('返回数据异常！');
}
});
} else {
alert('請輸入數據！');
}
return false;
}
</script>
<script>
var Page = 1;
var load = false;
var scode = jQuery(".scode").text();
var sortname = jQuery(".name").text();
var Dom = jQuery('.related-posts-in');
var List = jQuery('.b2-widget-list-ul');
Page = parseInt(Page);
fs();
hot_list();
function fs() {
var Num = 4;
var url = '/api.php/list/' + scode + '/page/' + Page + '/num/' + Num;
load = true;
jQuery.ajax({
type: 'POST',
url: url,
cache: true,
async: true,
dataType: 'json',
data: {
appid: 'admin',
timestamp: '1743684512',
signature: '2582de63ead60c045a14936c66d4e5e7',
},
success: function (response, status) {
var Data = response.data;
if (response.code) {
jQuery.each(Data, function (index, value,) {
if (value.ico == null || value.ico == "") {
var Html = '<div class="related-posts-item">\n' +
' <div>\n' +
' <div class="related-post-thumb">\n' +
' <a href="' + value.contentlink + '" class="link-block lazy_back"></a>\n' +
' <span class="cat"><a href="' + value.sortlink + '">' + value.sortname + '</a></span><span class="img_title"><a\n' +
' href="' + value.contentlink + '" title="' + value.title + '">' + value.title + '</a></span>\n' +
' </div>\n' +
' <a href="' + value.contentlink + '"><h2 title="' + value.title + '">' + value.title + '</h2></a>\n' +
' <div class="post-excerpt" style="margin:0 0 5px 0">\n' +
' <a href="' + value.contentlink + '" style="color: #797C80 !important;" title="' + value.description + '">' + value.description + '</a>\n' +
' </div>\n' +
' <div class="realte-post-meta">\n' +
' <span>' + value.date.slice(0, 11) + '</span>\n' +
' <span><i class="b2font b2-heart-fill "></i>' + value.likes + '</span>\n' +
' <span><i class="b2font b2-eye-fill "></i>' + value.visits + '</span>\n' +
' </div>\n' +
' </div>\n' +
' </div>';
} else {
var Html = '<div class="related-posts-item">\n' +
' <div>\n' +
' <div class="related-post-thumb">\n' +
' <a href="' + value.contentlink + '" class="link-block lazy_back"><img src="' + value.ico + '"></a>\n' +
' <span class="cat"><a href="' + value.sortlink + '">' + value.sortname + '</a></span>\n' +
' </div>\n' +
' <a href="' + value.contentlink + '"><h2 title="' + value.title + '">' + value.title + '</h2></a>\n' +
' <div class="post-excerpt" style="margin:0 0 5px 0">\n' +
' <a href="' + value.contentlink + '" style="color: #797C80 !important;" title="' + value.description + '">' + value.description + '</a>\n' +
' </div>\n' +
' <div class="realte-post-meta">\n' +
' <span>' + value.date.slice(0, 11) + '</span>\n' +
' <span><i class="b2font b2-heart-fill "></i>' + value.likes + '</span>\n' +
' <span><i class="b2font b2-eye-fill "></i>' + value.visits + '</span>\n' +
' </div>\n' +
' </div>\n' +
' </div>';
}
Dom.append(Html);
});
load = false;
return Page += 1;
} else {
$('.related-posts').hide();
}
},
error: function (xhr, status, error) {
console.log(error);
}
})
}
function hot_list() {
var listNum = [];
var number = 0;
var nums = 1;
var Num = 10;
var url = '/api.php/list/' + scode + '/page/' + Page + '/num/' + Num;
load = true;
jQuery.ajax({
type: 'POST',
url: url,
cache: true,
async: true,
dataType: 'json',
data: {
appid: 'admin',
timestamp: '1743684512',
signature: '2582de63ead60c045a14936c66d4e5e7',
},
success: function (response, status) {
var Data = response.data;
for (let i in Data) {
listNum.push(Data[i])
}
var scrollS = [];
var su = number + 10;
for (var jj = number; jj < su; jj++) {
scrollS.push(listNum[jj]);
number = number + 1;
}
if (response.code) {
scrollS.forEach(function (item, index) {
var Html = '<li class="b2-widget-box widget-post widget-post-none">\n' +
' <div class="b2-widget-post-order widget-order-'+nums+'"><span\n' +
' class="b2-radius">'+nums+'</span></div>\n' +
' <div class="b2-widget-post-title">\n' +
' <a href="' + item['contentlink'] +'"><h2 title="' + item['title'] +'">' + item['title'] +'</h2></a>\n' +
' </div>\n' +
' </li>';
List.append(Html);
nums++;
})
// });
load = false;
return Page += 1;
} else {
$('#b2-widget-hot-4').hide();
}
},
error: function (xhr, status, error) {
console.log(error);
}
})
}
</script>