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

Today, I will talk to you about how JavaScript can achieve the effect of rolling balance figures. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

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, the error this.container = document.querySelector (options.container); if (! this.container) {throw Error ("no container");} this.container.style.overflow = "hidden"; this.container.style.display = "flex" is thrown / / the visible 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 this.initDigitEle (num) of each digit after splitting the passed number to scroll Const numEles = this.container.querySelectorAll (".single-num"); / / traverses to generate a scrolling queue of each digit. If scrolling to 7, the content is 0 div 1, 2, 3, 4, 5, 6, 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, once pieced together, insert const fragment = document.createDocumentFragment () in the node at one time; / / generate div while (targetNum > = cirNum) {const ele = document.createElement ("div") corresponding to the target number from 0 to the target number; GE [XSS _ clean] = cirNum% 10 CirNum++; fragment.appendChild (ele);} numelle [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 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 is scrolling, not a number such as. 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 digits this.numberArr = numArr.filter ((item) = > / [0-9] / .test (item)) }} after reading the above, do you have any further understanding of how JavaScript can achieve the effect of scrolling balance figures? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.