html 时间的倒数计时

科技2022-07-12 127

html 时间的倒数计时

I recently held a contest on my Instagram to provide my services for free to creatives and small businesses who needed a website/portfolio built.

最近，我在Instagram上举办了一个竞赛，为需要构建网站/投资组合的创意者和小型企业免费提供我的服务。

Note: This is only one way to achieve this. Take it and run wild! (full code at end of article)

注意：这仅是实现此目的的一种方法。抓住它，疯狂奔跑！ (文章末尾的完整代码)

To select the contest winners, I built a simple function to randomize an array. For now they are numbers, but you can substitute these for the list you need to pick from.

为了选择竞赛获胜者，我构建了一个简单的函数来随机化数组。目前，它们是数字，但是您可以将其替换为需要选择的列表。

const array = [1, 2, 3, 4, 5, 6];

Create a variable that makes a shallow copy of your array and slices it:

创建一个变量，该变量将对数组进行浅表复制并将其切片：

const b = array.slice();

Then create a new array that data will be pushed to:

然后创建一个新数组，数据将被推送到：

const newArr = [];

Next, create a simple for loop that will randomize the items in your array, and push to your newArr:

接下来，创建一个简单的for循环，该循环将随机化数组中的项目，并推送到newArr：

for (let i = 0; i < 3; i++) {let arr = b[Math.floor(Math.random() * b.length)];let index = b.indexOf(arr);b.splice(index, 1);newArr.push(arr);}

In this case, because I wanted 3 winners selected, i < 3, so you would change this to however many you wanted.

在这种情况下，因为我希望选择3个获奖者，即<3 ，所以您可以将其更改为想要的数量。

I almost forgot — this is the HTML body markup:

我几乎忘了-这是HTML正文标记：

<h1>WINNERS WILL APPEAR BELOW!</h1><div id="container"></div>

Now for the fun! I used this code from Experts-Exchange and tweaked it.

现在找乐子！我使用了来自Experts-Exchange的代码并进行了调整。

Create a let variable that is globally scoped, this will be your starting number. In my case, I started the countdown at 5.

创建一个全局范围的let变量，这将是您的起始编号。就我而言，我从5开始倒计时。

let current_count = 5;

In my function called countDown, I’m first going to append an <h2> to my container div with the .innerHTML property that appends the number if current_count is greater than 0:

在名为countDown的函数中，我首先要使用.innerHTML属性将<h2>附加到我的容器div中，如果current_count大于0，该属性将附加数字：

function countDown() {document.getElementById("container",).innerHTML = `<h2> ${current_count}</h2>`;} if (current_count > 0) {current_count--;}

The next section is two parts and happens simultaneously:

下一部分分为两部分，同时进行：

First, clear the <h2>. I added this so when current_count = 0, it is removed from the page and the next .innerHTML can really shine.

首先，清除<h2>。我添加了它，以便当current_count = 0时，它从页面中删除，下一个.innerHTML可以真正发光。

else {clearInterval(countJob);document.getElementById("container").innerHTML = `<h2> </h2>`;

In the same else block:

在相同的else块中：

newArr.forEach((winner) => {document.getElementById(“container”,).innerHTML += `<li> ${winner}</li>`; });}

The whole countDown function will look like this:

整个countDown函数将如下所示：

Lastly, launch the countDown function in a SetInterval variable:

最后，在SetInterval变量中启动countDown函数：

const countJob = setInterval("countDown()", 1000);

And that’s it!

就是这样！

Countdown timer in action 倒数计时器运作中

翻译自: https://medium.com/@whoisasey/building-a-simple-countdown-timer-and-html-reveal-with-vanilla-javascript-411bc8d863af

html 时间的倒数计时

相关资源：html纯静态倒计时器支持农历显示

Processed: 0.012, SQL: 8