倒数第二个元素css选择器_创建一个CSS / JS倒数计时器

倒数第二个元素css选择器

I was watching Disney+ the other day (Mandalorian rocks!) and I saw a neat UI for auto advancing a user to the next episode. It was a button with a countdown.

前几天，我在看迪士尼+（Mandalorian摇滚！），我看到了一个整洁的UI，可以自动将用户推进到下一集。 这是一个带有倒计时的按钮。

I thought "Can we make that in CSS?!" Let's go ahead and make it!

我以为“我们可以用CSS做到吗？！” 让我们继续前进吧！

我们将建立什么 ( What We'll Build )

Here is our countdown timer. You can use this for a number of things. Advancing a user through your UI is the main idea here.

这是我们的倒​​数计时器。 您可以将其用于很多事情。 通过用户界面推进用户是这里的主要思想。

Final CodePen: https://codepen.io/chrisoncode/pen/JjdPyer?editors=1000

最终的CodePen： https ://codepen.io/chrisoncode/pen/JjdPyer ? editors = 1000

技术 (The Technique)

We'll be letting CSS handle the animations since CSS animations are far more performant in browsers than letting JavaScript handle the animation. The steps for creating our countdown timer look like:

我们将让CSS处理动画，因为CSS动画在浏览器中的性能要比JavaScript处理动画高得多。 创建倒数计时器的步骤如下：

1. Create a stack of numbers
   创建一堆数字
2. Create a JavaScript interval for every second
   每秒创建一个JavaScript间隔
3. Move the stack of numbers using CSS transforms
   使用CSS变换移动数字堆栈

HTML ( The HTML )

Let's start with all of our HTML. We need two buttons along with all the numbers from 10-0.

让我们从所有HTML开始。 我们需要两个按钮以及所有10-0的数字。

< div >
  < button class = " next " >
    < span class = " icon " > 👉 </ span >
    Next Episode Starts in
    < span class = " countdown " >
      10
      < span class = " numbers " >
        < span > 10 </ span >
        < span > 9 </ span >
        < span > 8 </ span >
        < span > 7 </ span >
        < span > 6 </ span >
        < span > 5 </ span >
        < span > 4 </ span >
        < span > 3 </ span >
        < span > 2 </ span >
        < span > 1 </ span >
        < span > 0 </ span >
      </ span >
    </ span >
  </ button >

  < button class = " reset " > Reset </ button >
</ div >

We have added the icon with an emoji. We also have a countdown which will contain our numbers.

我们添加了带有表情符号的图标。 我们还有一个countdown ，其中将包含我们的numbers 。

The reason we have the countdown div is so that we can place a 10 in there. This 10 will be responsible for providing some space in our UI for our numbers. It will have space in the document flow.

我们有倒数div的原因是我们可以在其中放置10 。 这10个负责在UI中为我们的numbers提供一些空间。 文件流中将有空间。

We are going to have to position our numbers absolutely, which will take them out of the document flow.

我们将必须绝对定位我们的numbers ，这会将它们从文档流中删除。

CSS ( The CSS )

Let's start our CSS.

让我们开始我们CSS。

基本样式 (Base Styles)

We have some basic styling for our buttons so that they look good:

我们为按钮设置了一些基本样式，以使其看起来不错：

/_ button styles are here _/
button  {
  background : white ;
  border-radius : 5 px ;
  border : none ;
  padding : 15 px 30 px ;
  font-size : 24 px ;
  font-family : 'Muli' ;
  display : block ;
  text-transform : uppercase ;
  letter-spacing : 2 px ;
  cursor : pointer ;
  transition : 0.3 s ease all ;
  line-height : 1 ;
  display : flex ;
}

button :hover  {
  background : #eee ;
}

.icon  {
  margin-right : 8 px ;
}

.reset  {
  font-size : 12 px ;
  padding : 8 px 16 px ;
  margin : 100 px auto 0 ;
}

Now we'll have some good looking buttons. The next step is to start positioning our numbers so that they show up in a column.

现在，我们将提供一些美观的按钮。 下一步是开始定位我们的数字，以便它们显示在列中。

自定义字体 (Custom Font)

We've found a custom font from fonts.google.com and added the link to our CodePen settings:

我们从fonts.google.com找到了一种自定义字体，并将链接添加到我们的CodePen设置中：

https://fonts.googleapis.com/css?family=Muli & display=swap

https://i.imgur.com/Q7Kt4P7.png\]\(https://i.imgur.com/Q7Kt4P7.png

https：//i.imgur.com/Q7Kt4P7.png \] \ （ https://i.imgur.com/Q7Kt4P7.png

倒数和数字的位置 (Positioning the Countdown and Numbers)

Add the following to our CSS.

将以下内容添加到我们CSS中。

.countdown  {
  position : relative ;
  display : block ;
  text-indent : - 9999 px ;
  overflow : hidden ;
  margin-left : 6 px ;
}

.numbers  {
  position : absolute ;
  top : 0 ;
  left : 0 ;
  text-align : center ;
  transition : 0.3 s ease transform ;
  text-indent : 0 ;
}

We have our countdown area set to overflow: hidden so that any numbers outside of its view are not seen. All we see is one number now.

我们将countdown区域设置为overflow: hidden以便看不见其视图之外的任何数字。 我们现在看到的只是一个数字。

Take a look at what this looks like behind the scenes without overflow: hidden:

看一下幕后的样子，没有overflow: hidden ：

With overflow: hidden, all of our extra numbers are hidden from view:

使用overflow: hidden ，我们所有的额外数字都从视图中隐藏：

Let's move onto our JavaScript.

让我们进入我们JavaScript。

JavaScript ( The JavaScript )

This is where the work comes in to start moving our numbers every second.

这是开始每秒移动数字的工作所在。

创建变量 (Creating Variables)

Let's start by grabbing everything we need from our DOM and creating our variables.

首先，从DOM中获取所需的一切并创建变量。

// grab parts of our HTML
const countdownArea = document . querySelector ( '.countdown' ) ;
const numbersArea = document . querySelector ( '.numbers' ) ;
const resetBtn = document . querySelector ( '.reset' ) ;

// create an interval and counter
let interval ;
let count = 0 ;

// calculate the height of our numbers
const height = countdownArea . getBoundingClientRect ( ) . height ;

创建一个计时器 (Creating a Timer)

Next up, we'll create a function to create a timer. The things we need to do are:

接下来，我们将创建一个用于创建计时器的函数。 我们需要做的事情是：

1. Increment our count
   增加count
2. Use the count and the height to figure out how far to offset the list of numbers
   使用count和height找出要偏移数字列表的距离
3. Apply that new offset to the numbers section with CSS transforms
   使用CSS转换将新的offset应用于数字部分
4. Make sure to stop the interval once we reach 10
   确保到达10点后停止间隔

// create the interval that creates the timer
function createTimer ( ) {
  interval = setInterval ( ( ) => {

        // 1. increment our count
    count ++ ;

    // 2. calculate the offset and apply it
    const offset = height * count ;

        // 3. apply the offset using css transforms
    numbersArea . style . transform = `translateY(- ${ offset } px)`

    // 4. stop the interval at 10
    if ( count >= 10 ) {
      // go to the next episode
      clearInterval ( interval ) ;
    }
  } , 1000 ) ;
}

The last part is to actually call our new function. Add the following and our timer should start working!

最后一部分是实际调用我们的新函数。 添加以下内容，我们的计时器应该开始工作了！

createTimer ( ) ;

添加重置 (Adding the Reset)

The last part is to add the reset. We'll use the reset button we grabbed earlier:

最后一部分是添加重置。 我们将使用之前抓取的重置按钮：

resetBtn . addEventListener ( 'click' , createTimer ) ;

We have to add three lines to our createTimer function to reset everything:

我们必须在createTimer函数中添加三行以重置所有内容：

function createTimer ( ) {
  clearInterval ( interval ) ;
  count = 0 ;
  numbersArea . style . transform = 'translateY(0)'

    // other code goes here...
    // interval = setInterval(() => {...
}

That's it! We now have our button!

而已！ 现在我们有了按钮！

结论 ( Conclusion )

Using some CSS and vanilla JavaScript, we were able to create a button that has a cool effect and gives users a little more interaction.

使用一些CSS和原始JavaScript，我们能够创建一个具有酷炫效果并为用户提供更多交互的按钮。

Be sure to check out the video walkthrough and the final CodePen. Thanks for reading!

请务必查看视频演练和最终的CodePen 。 谢谢阅读！

翻译自: https://scotch.io/tutorials/create-a-cssjs-countdown-timer

倒数第二个元素css选择器