原文:Learn How to Use JavaScript Arrays by Building an iPhone Product Page,作者:Samuel A. Olubiyo

在浏览 iPhone 官方网站时,我有了编写本教程的想法。苹果以其优秀的产品和无可挑剔的设计而闻名。如果你多花点时间查看它的网站,你可以学到关于品牌和设计的一些东西。

浏览 iPhone 13 产品页面时,引起我注意的一件事是用户可以从 3 种或 4 种颜色中选择手机颜色的功能。你可以通过单击相应颜色的按钮来执行此操作,手机的颜色会发生变化。

当我写这篇文章时,我不知道 Apple 是如何做到这一点的——但为了展示我对 JavaScript 数组的了解,我决定构建一个 iPhone 产品页面的简单版本。它将具有可以在单击时更改手机颜色的按钮。

在构建页面之后,我意识到这可能不是 Apple 使用的技术。(我将在本教程的最后部分分享我为什么这么认为。)不过,它仍然是一个有趣的项目,也是学习 JS 中数组的方法。

以下是这篇文章将介绍的内容:

  • 如何设置 HTML
  • 如何设置 CSS
  • 如何设置 JavaScript

本教程假设你对使用 JavaScript、HTML 和 CSS 进行 DOM 操作有一定的了解。如果是这样,很多内容对你来说会更有意义。

我也会尽我所能详细解释每一段代码。让我们开始吧。

如何设置 HTML

在开始之前,请从网上下载 3 或 4 部不同颜色的 iPhone 的图像。你可以在 iPhone 网站或手机评论网站上找到此类图像。

确保你下载的图像具有透明背景、相同大小和相同类型(即,如果一张图像显示后置摄像头,则所有图像都必须是这样的——但颜色不同,大小相同。)

获得图像后,将它们保存在文件夹中并命名文件夹为 images。至此,你应该已经为该项目创建了一个主文件夹。如果你还没有,你现在可以这样做。随意命名你的文件夹,但请确保你之前创建的 image 文件夹位于主文件夹中。

现在你的文件夹已准备就绪,是时候开始编码了。在你最喜欢的代码编辑器(我的是 VSCode)中导航到你之前创建的主文件夹,并创建一个新的 HTML 文件。我命名了我的为 phone.html,但你可以随意命名。

为了节省时间,我使用了一个 emmet 函数来生成一个 HTML 样板——只需按下一个感叹号并回车即可。

body 标签中,创建一个主 div,并给它一个类 main,如下所示:

<div class="main">
</div>

在这个主 div 中,创建另一个 div 并给它一个 ID phone,如下所示:

<div id="phone">
</div>

现在,在 phone div 中,创建一个 h3 标签并输入 I Love iPhones,或者你可以用表情符号替换 Love

<h3>I &hearts; iPhones</h3>

在这个 h3 标签下面,创建另一个 div 并给它一个 phoneshow 的 id,如下所示:

<div id="phoneShow"></div>

让这个 div 为空,但在它下面创建另一个 div,并给它一个 buttons 的 ID。在这个 div 中,创建 4 个 span 标签来代表 4 个按钮——也就是说,如果你下载了 4 个 iPhone 图像。

在每个 span 标签中,创建一个 button 标签,并为每个按钮赋予一个与手机图像颜色相对应的不同 ID,例如:

<div id="buttons">
<span><button id="black"></button></span>
<span><button id="blue"></button></span>
<span><button id="pink"></button></span>
<span><button id="starlight"></button></span>
</div>

完成此操作后,你几乎完成了本教程的 HTML 部分。剩下的就是链接 CSS 和 JavaScript 文件。

如果你还没有创建 CSS 和 JavaScript 文件,那么现在是创建的好时机。我创建了一个 phone.css 和一个 phone.js 文件。接下来,在 head 标签中链接 CSS 文件,如下所示:

<link rel ="stylesheet" href = "phone.css">

现在,使用以下代码将你的 JavaScript 文件链接到最后一个结束 div 标记下方和结束 body 标记上方:

<script src = "phone.js"></script>

完成这些后,你的 HTML 代码就完成了。

如何设置 CSS

这个项目的 CSS 代码非常简单。为 bodymain div、phone div、phoneshow div、buttons div 和按钮设置样式,如下所示:

body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255)
}

.main{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffff;
border-radius: 10px;
}

#phone{
display: flex;
flex-direction: column;
margin-bottom: 5px;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255);
border-radius: 10px;
}

#phoneShow{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffff;
border-radius: 10px;
}

#buttons{
display: flex;
flex-direction: row;
}

button{
margin-right: 10px;
border-radius: 50%;
padding: 15px;
border: none;
}

注意:#buttonsbuttons 不同。前者是一个 div,后者是按钮元素——因此它前面没有选择器。border-radius: 50%; 将使按钮完全变圆。

此 CSS 代码使用 Flexbox。

根据你下载的 iPhone 图像的颜色,通过设置不同的 id 为每个按钮设置不同的背景颜色,例如:

#black{
background-color: black;
}
#blue{
background-color: blue;
}
#pink{
background-color: pink;
}
#starlight{
background-color: silver;
}

完成此操作后,你可以在浏览器中预览你的进度。你应该看到 4 个不同颜色的圆形按钮,位于页面中心。

如何设置 JavaScript

这是本教程最重要的部分。到目前为止,你已经创建了页面的基本结构和样式。但是要在页面上显示和更改手机的图像,接下来就是神奇的部分了。

首先,为你在本教程开始时下载的图像创建一个目录数组。还记得之前的 images 文件夹吗?你需要做的是将文件夹中每个图像的相对路径以字符串形式存储在数组中,像这样:

const phoneImages = ["images/Black.png", "images/Blue.png", "images/Pink.png", "images/Starlight.png"]

(假设你的图像保存为 Black.png、Blue.png 等。)

接下来,获取将显示手机图像的 div 的 id。在本教程中,电话将出现在前面的 phoneshow div 中。将获取的 id 存储在如下变量中:

let phoneCont = document.getElementById("phoneshow")

接下来,获取所有按钮的 id,并将它们存储在变量中,这是一个示例:

let black=document.getElementById("black")

let blue=document.getElementById("blue")

let pink=document.getElementById("pink")

let starlight=document.getElementById("starlight")

完成此操作后,是时候显示 iPhone 图像了。为此,请创建一个名为 defaultImgItems 的变量,因为要使页面正常运行,页面上应该有一个用户可以切换的默认图像。

你可以使用以下代码来执行此操作:

let defaultImgItems =`<img src= "${phoneImages.at(0)}">`

让我解释一下:

使用反引号 `` 使我们能够在 JavaScript 中插入 HTML 代码。在这种情况下,我希望在变量 defaultImgItems 中嵌入一个图像标签。srcphoneImages 数组中的第一项。你可以通过 at() 方法访问它。

要在选定的 div 中显示图像,只需使用以下代码:

phoneCont.innerHTML = defaultImgItems

phoneCont 是你之前存储 id 为 phoneshow 的 div 的变量。如果你在浏览器中刷新页面,你应该会看到 phoneImages 数组中显示的第一张 iPhone 图像。

完成此操作后,为其他三种颜色创建类似的变量,如下所示:

let blueImgItems=`<img src= "${phoneImages.at(1)}">`
let pinkImgItems=`<img src= "${phoneImages.at(2)}">`
let starImgItems=`<img src= "${phoneImages.at(3)}">`

(这些变量用于 phoneImages 数组中的第二、第三和第四项。)

如何使按钮工作

如果你已成功完成此操作,下一步就是使按钮正常工作。按钮应该能够将 iPhone 颜色更改为按钮的相应颜色 - 即蓝色按钮应该显示蓝色 iPhone 等等。

为此,请将事件侦听器附加到按钮,并让它们更改 phoneCont 的 innerHTML 属性。像这样:

black.addEventListener("click", function(){
phoneCont.innerHTML=defaultImgItems
})

上面的代码将制作黑色按钮,单击它时会显示黑色 iPhone。其余代码片段如下:

blue.addEventListener("click", function(){
phoneCont.innerHTML = blueImgItems
})

pink.addEventListener("click", function(){
phoneCont.innerHTML = pinkImgItems
})

starlight.addEventListener("click", function(){
phoneCont.innerHTML = starImgItems
})

完成这些后,刷新浏览器并依次单击每个按钮,iPhone 图像应该随着每次点击而改变。

总结

在本教程中,你学习了在实际项目中使用数组,你还学习了如何使用 .at() 方法访问数组项。

在本教程的开头,我提到我不认为 Apple 使用这种方法来构建他们的 iPhone 产品页面,这是因为当你加载使用本教程创建的页面并依次单击每个按钮时,iPhone 图像的变化并不顺畅——它们似乎在跳跃。只有在单击了所有按钮之后,当你单击新按钮时,图像才会平滑地变化。不过,我希望本教程对你有所帮助。

你可以在 Twitter 上与我联系,以获取有关我正在进行的工作或任何新想法的最新信息,你也可以让我知道你对本教程中的代码的想法——我愿意听取你的想法。

谢谢你阅读本文!