快来开发这些项目，找到你的第一份开发工作吧！#3：带手电筒效果的 Instagram 动态！

YouTube | Twitter | Instagram

各位极客们好！今天我们要做一个超级棒的东西。我对此非常兴奋。它会把任何你想看的人的 Instagram 动态（只要他们的个人资料是公开的，稍后会详细介绍）都添加到动态上，并在上面加上手电筒效果。我们的鼠标会指示手电筒的位置。所以感觉就像你在跟踪他们一样。反正 Instagram 就是用来跟踪他们的！简直完美！

我们将使用 HTML、CSS 和普通的 Javascript 来构建它。

在此处查找代码。

在此处观看 2 分 20 秒的教程。

步骤 1：创建 HTML、CSS 和 Javascript 文件

创建 HTML 文件、CSS 文件和 JavaScript 文件。确保将 CSS 和 JavaScript 附加到 HTML 文件！（我在每个教程中都会提醒你这一点，因为我总是忘记这样做。）

您的 HTML 应该看起来有点像这样。

<html>
    <head>
        <title>Instagram photos under a flashlight</title>
        <script type="text/javascript" src="actions.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    </body>
</html>

第 2 步：从 Instagram 请求照片

Instagram 的公共 API 非常易于使用，您可以从任何页面获取照片！这包括个人资料页面和标签。由于该 API 是公开的，我们无需创建开发者帐户，但这也意味着我们无需身份验证，也无法访问私人帐户。我们只需?__a=1在 URL 末尾添加即可。在本教程中，我将使用我的 Instagram 个人资料链接，但您也可以使用其他链接！

https://www.instagram.com/catmcgeecode/?__a=1

我们将使用异步函数来实现这一点，这样我们的代码就可以异步运行。异步函数的作用就await如同其字面意思一样——我们会等待 Promise 被 fulfilled 或 rejected（例如，我们收到 Instagram 的有效响应，或者被告知不允许），然后再执行下一个任务。点击此处了解更多关于异步函数的信息。

因此，让我们使用 Javascript 的fetchAPI，这是请求数据的最简单、最好的方法。

继续将这个 fetch 语句放入异步函数中。

async function getInstaPictures() {
    const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
}

我们从这个响应中获取了大量数据，因此我们将其读取为 JSON。这样可以更轻松地解析和查找照片。

const jsonData = await response.json();

让我们对console.log响应console.table()进行操作并运行它，这样我们就能知道预期的结果，并知道在哪里找到响应中的照片。别忘了调用该函数！

async function getInstaPictures() {
    const response = await fetch("https://www.instagram.com/catmcgeecode/?__a=1");
        const jsonData = await response.json();
        console.log(jsonData)
}
getInstaPictures()

现在在浏览器中打开 HTML 文件并查看控制台（点击“检查”打开开发者工具，然后点击“控制台”）。您将能够看到响应。它可能看起来毫无意义，但花点时间仔细查看一下，看看能发现什么。

如果你仔细查看，你会发现可以通过如下方式找到图像 URL：

jsonData → graphql → user → edge_owner_to_timeline_media → edges

然后，里面edges有多个nodes，每个 s 都node包含一个display_url我们需要的。

因此我们需要遍历每个node内部edges并获取显示 URL。

const pictures = jsonData.graphql.user.edge_owner_to_timeline_media.edges; 
        for(i = 0; i < pictures.length ; i++) {
                // here we will show the images on the website
}

还和我在一起吗？（因为如果这样，你已经走了很长的路了。）

步骤3：在网站上显示图片

每次我们遍历数据时，我们都希望将显示 URL 显示为 HTML 中图像的来源。

因此，我们将使用 Javascript 创建一个图像元素（document.createElement('img')），然后在每次迭代中获取node.display_url并将其设置为新图像元素的源，然后将图像元素添加到 HTML。

for(i = 0; i < pictures.length ; i++) {
        let img = document.createElement('img');
        img.src = pictures[i].node.display_url;
        document.body.appendChild(img);
    }

那不是很困难，不是吗？

把所有这些放在一起，在浏览器中打开，你就得到了——某人 Instagram 页面上的所有照片！如果仍然无法正常工作，这里是 Javascript 的源代码。

稍微修改一下样式，让它们看起来更美观。在视频中，我只是将宽度改为 350px，如下所示。不过，你可以尝试一下 flex-box 样式，让它看起来更美观。

body img {
    width: 350px;
}

步骤 4：制作手电筒效果

这一步，我们要让 Instagram 照片上方看起来像是有一个手电筒，但暂时不会让它动起来。除了一个透明圆圈外，其他部分都变成黑色。接下来，我们开始编写 CSS 代码吧！

为了让所有内容都变成黑色，我们需要将根元素 (HTML) 设为黑色。我们将在其中使用一个伪元素（点击此处了解更多信息）root，并使该元素覆盖整个屏幕。content属性以及::before可以帮助我们实现这一点。

:root:before {
    cursor: none;
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
}

我们还在这里设置了光标以none增加效果。

运行你的代码。什么也没发生。

奇迹就发生在下一部分—— radial-gradient。（PS：我试着用爱尔兰口音说这句话真的很有趣。）

径向渐变允许我们创建一个具有渐变的形状，从其原点向外扩展。这个形状可以是圆形！很酷。所以这里的想法是，我们的背景将是一个径向渐变，主色为黑色，而我们的形状（圆形）将是透明的。渐变会给它一种模糊的效果，非常适合手电筒！

将此添加到您的 :root:before:

background: radial-gradient(
        circle 10vmax at var(--cursorX) var(--cursorY), 
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    )

呼。我们来看看吧。

circle- 我们将形状设置为圆形。这很容易理解。

10vmax- vmax 是相对而言的。1vmax = 屏幕的 1%。所以我们的手电筒大小大约是屏幕的 10%。

at var(--cursorX) var(--cursorY)- 事情开始变得精彩了。这设置了圆圈的 x 和 y 坐标，但由于它们并不相同（手电筒会随着鼠标移动），所以我们需要将变量传递给它。这些变量我们稍后会从 JavaScript 中获取。

首先rgba(0,0,0,0） - 这是透明的（最后的 0 是不透明度）并且是我们图像内部的颜色。

第二个rgba(0,0,0,1)- 这是黑色，这是我们的圆形渐变将要变成的颜色（如 - 背景的其余部分！）

太棒了！运行这段代码，你会看到一片漆黑。你能猜一下为什么吗？因为我们还没有设置--cursorX和--cursorY变量。我们先在 CSS 中设置一下，确保它们正常工作，然后再开始 JavaScript 的编写。

你的 CSS 看起来应该像这样：

:root:before {
    --cursorX = 50vw;
    --cursorY = 50vh;
    cursor: none;
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    background: radial-gradient( 
        circle 10vmax at var(--cursorX) var(--cursorY),
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    ) 
}

步骤 5：让手电筒移动

现在是时候将--cursorX和--cursorY变量设置为每次移动鼠标时鼠标的位置。使用 JavaScript 实现起来超级简单。

打开您的 Javascript 文件并创建一个当您移动鼠标时运行的函数。

document.addEventListener('mousemove', update)

function update(e) {
}

这里，e代表具有许多不同处理程序的事件，包括我们的鼠标坐标的位置！

首先，此函数需要读取鼠标的 X 和 Y 坐标。这非常简单 - 你只需使用 e.clientX和 e.即可clientY。

let x = e.clientX; 
let y = e.clientY;

然后我们需要将它们发送到 CSS，通过将它们设置为样式的属性。

document.documentElement.style.setProperty('--cursorX', x + 'px'); 
document.documentElement.style.setProperty('--cursorY', y + 'px');

（它是文档元素，因为它是根元素，在我们的例子中是 html 元素。我希望它们也有相同的名称。）

现在大家一起！

document.addEventListener('mousemove', update)

function update(e) {
    let x = e.clientX; 
    let y = e.clientY; 

    document.documentElement.style.setProperty('--cursorX', x + 'px'); 
    document.documentElement.style.setProperty('--cursorY', y + 'px');
}

就是这样。在浏览器中打开它，你就有了一个在 Instagram 上跟踪某人的有趣新方法。

现在轮到你了！

我在每一个教程里都强调了这一点。要想真正充分利用它，你必须在此基础上构建一些东西（并且不断在网上搜索如何实现！）我相信你肯定有一些有创意的想法，但万一你没有，以下是一些：

使其在移动设备上运行得更好（也许可以通过手机手势做一些很酷的事情......）
更改圆圈的大小和背景颜色
从 Instagram 获取不同的数据
使用真正的 instagram API 并进行身份验证（您可以使用探索页面或您关注的私人帐户）
让用户首先选择 Instagram 帐户

祝你好运！祝你编程愉快！如果你做出什么好东西，记得评论或者在推特上私信我！

鏂囩珷鏉yu簮锛�https://dev.to/catmcgeecode/get-your-first-dev-job-by-building-these-projects-3-instagram-feed-with-a-flashlight-effect-1d81