Javascript 有人能解释一下这个代码吗_Javascript_Html

Javascript 有人能解释一下这个代码吗

javascript html

Javascript 有人能解释一下这个代码吗,javascript,html,Javascript,Html,我正在学习用JavaScript编写代码，我的任务是找出这段代码的每一行的含义。我试图找出一些代码，但最让我困惑的部分是函数、'div class'，document.createElement（'something'）和append.Child（'something'）。我在互联网上进行了研究，但解释含糊不清。请有人解释一下每一行代码；代码如下： <!DOCTYPE html> <html> <head> <title>Traffic light

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


交通灯
var images=['redlight.jpg'，'Red-yellow light.jpg'，'Green light.jpg'，'Amber light.jpg']；
var指数=0；
函数buildImage（）{
var img=document.createElement（'img'）
img.src=图像[索引]；
document.getElementById（'content'）.appendChild（img）；
}
函数changeImage（）{
var img=document.getElementById（'content'）.getElementsByTagName（'img'）[0]
索引++；
索引=索引%4；
img.src=图像[索引]；
}
下一次

提前感谢

文档。createElement（'img'）

创建一个新的

获取图像中第一个元素的路径（因为索引在开始时设置为0）并设置源（'redlight.jpg'）。使用document.getElementById（'content'）.appendChild（img）
可以将创建的
标记添加到
中，id为'content'
div class='contents'
定义您的div
正在使用css类“contents”。此css类处理div
元素的样式设置。
第一部分：
function buildImage() {
  var img = document.createElement('img')
  img.src = images[index];
  document.getElementById('content').appendChild(img);
}

此函数
首先创建图像的动态html标记
分配var映像中包含的映像src/path=
['redlight.jpg'，'Red-yellow light.jpg'，'Green light.jpg'，'琥珀色
Light.jpg']

首先获取id为namecontent的html标记，然后附加它的意思
保存上一个和下一个图像的步骤
第二部分：
function changeImage() {
  var img = document.getElementById('content').getElementsByTagName('img')[0]
  index++;
  index = index % 4;
  img.src = images[index];
}

此函数
首先用保存的内容/图像初始化img变量
在内容中通过数组索引递增到
访问其他图像
使用模逻辑获取索引为4的图像
与现有设备的关系
此代码在加载页面时显示图像，然后在用户单击按钮一次后每3秒更改一次图像。以下是它的工作原理：
buildImage
是一个函数，它为数组images
中列出的源之一创建）属性。哪一个取决于索引
变量。然后，它将元素添加到html页面的div下，id为content（getElementById（'content'）。appendChild（img）
）。因此，你最终会：
 <div class="contents" id="content">
     <img src="redlight.jpg" />
 </div>

表示“获取id=content的div，然后找到所有html标记“img”并返回第一个”
代码
index++; index = index % 4;

递增索引变量，但确保它永远不超过4（数组的大小，请参阅模运算符）
最后，setInterval
是一个函数，它采用函数名和持续时间（以毫秒为单位）。一旦调用，它将每X毫秒运行一次函数

在此代码中，每次单击都会调用setInterval
函数。这可能有问题。如果我是你的话，我会改变它。
对于这一切有很好的解释。你应该研究那一页
对于你不安全的部分
功能
函数本身就是一个大课题。它是每种编程语言的重要组成部分。这是一种有效的方式去做一些你可能不止一次想做的事情。假设你想做一个减去两个值的函数，但你想对任何值使用它。然后你可以创建一个包含两个参数的函数并进行计算
function sub(x, y)
{
  return x-y;
} // Very basic example

这样，您可以发送任何值
document.createElement（'img'）
只需创建一个HTML标记。在本例中为“img”标签。在您的情况下，他们希望创建一个，以便将其放置在另一个元素中
Div class（？）不知道这是什么。有什么例子吗
document.getElementById（“某物”）.append.Child（“某物2”）
这样做只需根据元素的id获取元素。它可以是DIV或List等。然后您只需将元素“something2”放入该元素中。因此，如果某物2是一个img，而某物是一个div，结果如下：
<div>
  <img>
</div>

Onload，即当加载页面时，它调用javascript的buildImage（）函数。该函数创建一个img标记并附加到“contents”类的div（因为索引为0，所以它加载第一个图像，即img.src=images[index]）
一旦您每3000毫秒点击一次按钮，它就会根据索引将图像源更改为不同的图像
让我看看它包含的元素id=content
：）请有人解释一下每一行代码-是的。有人会在这么晚的时候来这里，这有道理吗？我不这么认为。看一看——你提到的每个函数的名字都很容易在那里找到，在你理解函数和概念是如何结合在一起之前，你可以先了解它们。在这里，你应该问一些重点突出的问题。函数“div class”
。。。没有这样的代码。我在互联网上做过研究，但它被含糊不清地解释了你看错了地方——那是javascript+DOM 101
<div>
  <img>
</div>