Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve the balance digital scrolling effect in JavaScript". In the daily operation, I believe that many people have doubts about how to achieve the balance digital scrolling effect in JavaScript. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to achieve the balance digital scrolling effect in JavaScript". Next, please follow the editor to study!

1. Implementation background

Last week, in a demand for a task to receive a red packet, a user clicked a button to pop up a pop-up window to receive the red packet, and when the pop-up window was closed to return to the original page, the number of the balance of the page should show the effect of scrolling each digit.

Because I had not done such an effect before, and I didn't know how to achieve it at first, I wanted to look for the relevant library on GitHub and see a library with the highest star, but found that it was dependent on jQuery and could not be introduced by npm package. It feels very unnecessary, the original project is the react framework, is to operate DOM as little as possible, in order to solve this scrolling, it is not appropriate to introduce jQuery. So I decided to realize it by myself. I first took a look at other people's ideas, and then I realized it myself.

two。 Realization idea

In fact, it is to split the incoming n-digit number with scrolling into each number to be scrolled, and then dynamically create a container containing scrolling to each corresponding number, and then put it into the incoming target container. The implementation of scrolling to each corresponding number can be achieved by dynamically creating the contents of the div,div with intervals from 0 to the corresponding number as the corresponding number, just like a long piece of paper written vertically from 0 to 0, and then pulling it from 0 to the target number within a specified period of time.

3. Realization process

Since you want to encapsulate it, you'd better write it in the form of class. You don't have to say much, just go to the code.

/ * *

* classes that achieve the effect of digital scrolling

, /

Class DigitScroll {

Constructor (options) {

/ / get the DOM of the container. If not, an error is thrown.

This.container = document.querySelector (options.container)

If (! this.container) {

Throw Error ("no container")

}

This.container.style.overflow = "hidden"

This.container.style.display = "flex"

/ / the visual container height is also the scrolling interval distance. The container should set the height, otherwise the default 30px

This.rollHeight = parseInt (getComputedStyle (this.container) .height) | | 30

This.container.style.height = this.rollHeight + "px"

}

Roll (num) {

/ / initialize the container of each digit after splitting the incoming number to scroll

This.initDigitEle (num)

Const numEles = this.container.querySelectorAll (".single-num")

/ / traversing to generate a scrolling queue for each digit. If scrolling to 7, the content is generated as 0Magol 1 div 2pm 3pm 4pm 6pm 7 7 for scrolling animation.

[... numEles] .forEach ((numEle, index) = > {

Const curNum = 0

Let targetNum = Number (this. numberArr [index])

If (curNum > = targetNum) {

TargetNum = targetNum + 10

}

Let cirNum = curNum

/ / document fragments are pieced together and inserted into the node at one time

Const fragment = document.createDocumentFragment ()

/ / generate div from 0 to the target number

While (targetNum > = cirNum) {

Const ele = document.createElement ("div")

Ele [XSS _ clean] = cirNum% 10

CirNum++

Fragment.appendChild (ele)

}

Numel [XSS _ clean] = ""

NumEle.appendChild (fragment)

/ / reset position

NumEle.style.cssText + =

"- webkit-transition-duration:0s;-webkit-transform:translateY (0)"

SetTimeout () = > {

NumEle.style.cssText + =-webkit-transition-duration:1s;-webkit-transform:translateY (${

-(targetNum-curNum) * this.rollHeight

} px);-

}, 50)

});

}

/ / initialize the container

InitDigitEle (num) {

/ / number of split digits

Const numArr = num.toString () .split (")

/ / document fragments are pieced together and inserted into the node at one time

Const fragment = document.createDocumentFragment ()

NumArr.forEach ((item) = > {

Const el = document.createElement ("div")

/ / the number should be scrolled, not a number such as. It doesn't roll.

If (/ [0-9] / .test (item)) {

El.className = "single-num"

El.style.height = this.rollHeight + "px"

El.style.lineHeight = this.rollHeight + "px"

} else {

El [XSS _ clean] = item

El.className = "no-move"

El.style.verticalAlign = "bottom"

}

/ / el.style.float='left'

Fragment.appendChild (el)

}, [])

This.container [XSS _ clean] = ""

This.container.appendChild (fragment)

/ / Store scrolling numbers

This.numberArr = numArr.filter ((item) = > / [0-9] / .test (item))

}

}

At this point, the study on "how to achieve the balance figure scrolling effect in JavaScript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.