在javascript中创建年终计数器

Since new year is coming, it’s perfect time to create a new year counter in JavaScript.

由于新的一年即将到来，因此现在是使用JavaScript创建新的计数器的绝佳时机。

First let create a folder YearEndCounter and three files index.html, styles.css and main.js inside it. Also, opened it in VS Code.

首先让我们创建一个YearyearCounter文件夹，并在其中创建三个文件index.html ， styles.css和main.js。 另外，用VS Code打开它。

YearEndCounter YearEndCounter

Now, in index.html put the basic html which wraps the time in countdown-container class. We have time class four times and for days, hours, minutes and seconds.

现在，在index.html中，将用于包装时间的基本html放入countdown-container类中。 我们有四次时间课，分别是天 ， 小时 ， 分钟和秒 。

We have also linked the main.js and styles.css files and also started the project in Live Server.

我们还链接了main.js和styles.css文件，并在Live Server中启动了该项目。

index.html index.html

Let’s move to the styles.css and put the basic styles. Also notice that we are also putting an image for snow in our project. With the flex, we have everything in center.

让我们转到styles.css并放置基本样式。 还要注意，我们还在项目中放置了雪的图像。 有了flex，我们就可以将一切摆在中心。

styles.css styles.css

Now, we will complete the styles by adding CSS for the countdown-container and out counter is at the correct place.

现在，我们将通过为倒数容器添加CSS来完成样式，并且out计数器位于正确的位置。

styles.css styles.css

Now, it’s time to convert the JavaScript and start our counter. So, open the main.js and add the below code. Here, we are taking the endTime as December 31 2020. We are running the function updateCountdown(), every second through setInterval().

现在，是时候转换JavaScript并开始我们的计数器了。 因此，打开main.js并添加以下代码。 在这里，我们将endTime设为December 31 2020 。 我们正在通过setInterval()每秒运行一次updateCountdown()函数。

Inside the function updateCountdown(),we are just doing the math show the days, hours, minutes and seconds.

在updateCountdown()函数内部，我们只是在做数学运算以显示天，小时，分钟和秒。

main.js main.js

This completes our mini-project. You can find the code for the same in my github account here.

这样就完成了我们的迷你项目。 你可以在我的github账户为同一代码在这里 。

翻译自: https://medium.com/swlh/create-a-year-end-counter-in-javascript-81cb09ab2bc5

相关资源：四史答题软件安装包exe