How to realize the effect of year rotation selection by JavaScript

This article mainly explains "how JavaScript achieves the effect of year rotation selection". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "JavaScript how to achieve year rotation selection effect".

Preface

Use js to achieve a year rotation selection effect. Don't talk too much nonsense, look at the picture:

First, what is the train of thought?

Layout: left and right arrows use entity characters

There are 5 span in years. Use flex layout to arrange horizontally.

Js logic: (note: year data is number array) a >. The first 5 year data are displayed by default. B >. FirstIndex records the starting index of the 5 years to be displayed. Click the right arrow + 1 until firstIndex+5 is exactly equal to the length of the year array and is not increasing. Click the left arrow-1 until firstIndex is 0, which is not decreasing. The initial value is 0. C > .selectedIndex records the index of the year currently selected by the click. The first 2021 is displayed by default. The initial value is 0. D > .firstIndex value changes, get firstIndex,firstIndex+1,firstIndex+2... The year corresponding to firstIndex+4 is rendered to the page. And one of the five indexes is equal to selectedIndex, indicating that the selected year is exactly among the years displayed on the current page. Therefore, the span corresponding to the equivalent index adds the selected style, and the other four span remove the selected style.

Css: left and right arrow logic. Add all clickable styles by default: firstIndex=0, remove left clickable styles, firstIndex+5= year array length, remove right clickable styles.

2. All codes 1. Html

The code is as follows:

Title

two

four