Question

我正在学习用JavaScript编写代码，我的任务是找出这段代码的每一行的含义。我试图找出一些代码，但最让我困惑的部分是函数，'div classes'，document.createElement（'something'）和append.Child（'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>

提前致谢

Answer 1

第一部分：

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

此功能

首先创建图像的动态html标签
分配var images =中包含的Image src / path ['redlight.jpg', 'Red -yellow light.jpg', 'Green Light.jpg', 'Amber Light.jpg'];
首先获取ID为内容的html标记，然后追加它意味着保持上一张和下一张图片

第二部分：

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

此功能

首先使用保留的内容/图像初始化img变量在内容 div中通过数组索引访问增量到访问其他图像
使用模数逻辑获取4索引上的图像
使用现有的

Answer 2

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

buildImage是一个创建<img />元素（document.createElement）的函数，并将源（img.src）属性设置为数组中列出的其中一个来源{{ 1}}。哪一个完全取决于images变量。然后，它将元素添加到html页面，在具有id内容（index）的div下。所以你最终得到：

getElementById('content').appendChild(img)

当加载页面时，该函数只被调用一次（参见<div class="contents" id="content"> <img src="redlight.jpg" /> </div>属性）。

onload更改了图片来源（changeImage）。代码

img.src

表示＆＃34;获取id = content的div，然后找到所有的html标签＆＃34; img＆＃34;并返回第一个＆＃34;。

代码

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

增加索引变量，但确保它永远不会超过4（数组的大小，请参见模运算符）。

最后，index++; index = index % 4;是一个函数，它采用函数名称和持续时间（以毫秒为单位）。一旦被调用，它将每X ms运行一次该函数。

!!

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

Answer 3

document.createElement('img')会创建一个新的<img />代码。 img.src = images[index]获取images内第一个元素的路径（因为索引在开头设置为0）并设置源（='redlight.jpg'）。使用document.getElementById('content').appendChild(img)，您可以在<img src='redlight.jpg' />内添加已创建的<div>标记，其中包含id ='content'。

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

Answer 4

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

对于你不安全的部分。

<强>功能

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

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

通过这种方式，您可以发送任何值。

<强>使用document.createElement（ 'IMG'）

只需创建一个HTML标记即可。在这种情况下，'img'标签。在您的情况下，他们想要创建一个，以便将其放在另一个元素中。

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

<强>的document.getElementById（ “东西”）。append.Child（ 'something2'）

这样做只需要通过它的id获取一个元素。它可以是DIV或List等。然后你只需将元素“something2”放在该元素中。所以如果something2是一个img，而且某个东西是div。结果如下：

<div>
  <img>
</div>

Answer 5

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

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

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

5 个答案: