在javascript中创建无限颜色的鳍状肢

In a previous post, i had created a Simple color flipper in JavaScript. In that project, we had used an array of colors.

在上一篇文章中，我用JavaScript创建了一个简单的彩色脚蹼。 在那个项目中，我们使用了多种颜色。

In this project we are going to randomly generate the hex color code from the available 16 million colors(that’s why infinite).

在这个项目中，我们将从可用的1600万种颜色中随机生成十六进制颜色代码(这就是无限的原因)。

We are going to do this project in codepen. So, open any codepen and put this basic html and css. In the html, we have a container class wrapping a h2 and button.

我们将在Codepen中执行此项目。 因此，打开任何codepen并放置此基本的html和css。 在html中，我们有一个包装h2和button的容器类。

In the CSS, we are placing the main at the center. Also, adding basic styles for h2 and color.

在CSS中，我们将主体放置在中央。 另外，添加h2和颜色的基本样式。

html html

We will add a bit more CSS for the button and it’s hover.

我们将为该按钮添加更多CSS，并将其悬停。

CSS CSS

Now, it’s time to add the logic to the project. So, head over to the JS part and put the below code. Here, we are first selecting the button and the color.

现在，是时候将逻辑添加到项目了。 因此，转到JS部分，并放入以下代码。 在这里，我们首先选择按钮和颜色。

After that we have two variables numbers and alphabets to store numbers and allowed hex alphabets.

之后，我们有两个变量数字和字母来存储数字和允许的十六进制字母。

Next, we have two functions getRandomNumber() and getRandomAlphabet(), which will take the numbers and alphabets string respectively and return a random item. Now, since strings can also be treated as array, we can get a value by numbers[0] or alphabets[3].

接下来，我们有两个函数getRandomNumber()和getRandomAlphabet() ，这两个函数将分别接受数字和字母字符串并返回一个随机项。 现在，由于字符串也可以视为数组，因此我们可以通过数字[0]或字母[3]获得值。

We can check the same in console.

我们可以在控制台中检查相同的内容。

randomNumber randomNumber

We will complete our JavaScript logic. We have added an event listener on the btn and on click of it, we are creating a hex variable with initial value of #.

我们将完成JavaScript逻辑。 我们在btn上添加了一个事件侦听器，并单击它，我们正在创建一个初始值为＃的十六进制变量。

After that we are running a for loop for six time, since hex codes are six item long. Now, from inside the loop we are calling getRandom() function.

之后，由于十六进制代码长六项，因此我们将运行一次for循环六次。 现在，从循环内部，我们正在调用getRandom()函数。

In the getRandom() function, we are declaring an empty array and then pushing two items to it- one for number and other for alphabet. We will get a two item array as [“1”, “b”]. After that we are again returning a random item from it by arr[Math.floor(Math.random() * arr.length)].

在getRandom()函数中，我们声明一个空数组，然后将两个项目推入其中-一个用于数字，另一个用于字母。 我们将得到两个项目数组，分别为[“ 1”，“ b”]。 之后，我们再次通过arr[Math.floor(Math.random() * arr.length)]从其中返回一个随机项目。

At the end of our loop, we will have something like #fb3b4e in the hex variable. After that, we are changing the color of the body to this random color and also the textContent of the color.

在循环的最后，十六进制变量中将出现类似＃fb3b4e的内容。 之后，我们将主体的颜色更改为该随机颜色，还将颜色更改为textContent。

Logic 逻辑

You can find the code for this project in this codepen link. Also the working project is shown below.

您可以在此Codepen链接中找到该项目的代码。 工作项目也如下所示。

Gif Gif

翻译自: https://medium.com/swlh/create-a-infinite-color-flipper-in-javascript-417ca5f0d7cd