Javascript - 有人可以解释一下这段代码吗?

Javascript - Can someone please explain this code

本文关键字：一下 段代码 代码 Javascript 解释      更新时间：2023-09-26

我正在学习用JavaScript编码，我的任务是找出这段代码的每一行的含义。我试图找出一些代码，但最让我困惑的部分是函数，'div classes'，document.createElement('something'(和附件。孩子("某物"(。我在互联网上研究过，但解释含糊不清。请有人解释代码的每一行;这是代码：

<!DOCTYPE html>
<html>
<head>
<title>Traffic lights</title>
</head>
<script>
var images = ['redlight.jpg', 'Red -yellow light.jpg', 'Green Light.jpg', 'Amber Light.jpg'];
var index = 0;
function buildImage() {
  var img = document.createElement('img')
  img.src = images[index];
  document.getElementById('content').appendChild(img);
}
function changeImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0]
  index++;
  index = index % 4;
  img.src = images[index];
}
</script>
<body onload="buildImage();">
    <div class="contents" id="content"></div>
    <button onclick="setInterval(changeImage, 3000)">NextImage</button>
</body>

提前致谢

第一部分：

function buildImage() {
  var img = document.createElement('img')
  img.src = images[index];
  document.getElementById('content').appendChild(img);
}

此函数

  1. 首先创建图像的动态HTML标签

  2. 分配变量图像中包含的图像源/路径 = ['redlight.jpg', 'Red -yellow light.jpg', 'Green Light.jpg', 'Amber Light.jpg'];

  3. 首先获取具有 ID 名称内容的 HTML 标记，然后附加它的含义保存上一个和下一个图像

第二部分：

function changeImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0]
  index++;
  index = index % 4;
  img.src = images[index];
}

此函数

  1. 首先使用保存的内容/图像初始化 IMG 变量在内容div 中，通过数组索引访问 递增到访问其他图像

  2. 使用模逻辑获取 4 索引上的图像

  3. Relace srcwith existing

此代码在加载页面时显示图像，然后在用户单击按钮一次后每 3 秒更改一次图像。以下是它的工作原理：

buildImage是一个函数，它创建一个<img />元素(document.createElement(并将源(img.src(属性设置为数组images中列出的源之一。哪一个完全取决于index变量。然后，它将元素添加到 html 页面中，在带有 id 内容的div 下 ( getElementById('content').appendChild(img) (。所以你最终会得到：

 <div class="contents" id="content">
     <img src="redlight.jpg" />
 </div>

该函数仅在加载页面时调用一次(请参阅 onload 属性(。

changeImage更改图像源 ( img.src (。 代码

 document.getElementById('content').getElementsByTagName('img')[0]

意思是"获取 id = 内容的div，然后找到所有 html 标签"img"并返回第一个"。

代码 

index++; index = index % 4;

递增索引变量，但确保它永远不会超过 4(数组的大小，请参阅取模运算符(。

最后，setInterval是一个函数，它采用函数名称和以毫秒为单位的持续时间。调用后，它将每 X 毫秒运行一次函数。

！！

在此代码中，每次单击时都会调用 setInterval 函数。这可能是有问题的。如果我是你，我会改变它。

document.createElement('img')创建一个新的<img />标签。 img.src = images[index]采用images中第一个元素的路径(因为索引在开头设置为 0(并设置源(='redlight.jpg'(。使用 document.getElementById('content').appendChild(img)，您可以在 id = 'content' 的<div>中添加创建的 <img src='redlight.jpg' /> 标签。

div class='contents'定义您的div正在使用 CSS 类"content"。此 css 类处理div元素的样式。

http://www.w3schools.com/对此有很好的解释。你应该研究那个页面。

对于您不安全的部分。

功能

函数本身就是一个大主题。它是每种编程语言的重要组成部分。这是一种以有效的方式做一些你可能想做不止一次的事情的方法。假设你想创建一个减去两个值的函数，但你想把它用于任何值。然后，您可以创建一个采用两个参数的函数并进行计算... 

function sub(x, y)
{
  return x-y;
} // Very basic example

这样，您可以发送任何值。

document.createElement('img'(

只需创建一个 HTML 标记。在本例中为"img"标签。在您的情况下，他们想创建一个以将其放置在另一个元素中。

Div 类(？不知道这是什么。有什么例子吗？

document.getElementById("something"(.append.孩子('某物2'(

这将做的只是简单地通过元素的 id 获取元素。它可以是 DIV 或列表等。然后，您只需将元素"something2"放入该元素中即可。因此，如果某物 2 是 img，而某物是div。结果将是这样的：

<div>
  <img>
</div>

Onload，即当页面被加载时，它会调用javascript的buildImage((函数。这个函数创建一个img标签并附加到类'content'的div(由于索引为0，它加载第一个图像，即img.src = images[index](。

一旦您每 3000 毫秒单击一次按钮，它会根据索引将图像源更改为不同的图像

相关文章：