JavaScript natively implements year-rounding selection
May 30, 2021 Article blog
Table of contents
preface
Use js to achieve a year rotation selection effect. Don't talk much nonsense, look at the picture:
First, what is the idea?
- Layout: The left and right arrows use the solid characters < and > years 5 spans. Use a flex layout to arrange horizontally.
- js Logic: (Note: Year data is number array) a > . T he first 5 years of data are displayed by default. b >. F irstIndex records the starting index for the five years to be displayed. C lick on the arrow on the right, s1, until firstIndex5 is exactly equal to the length of the year array and is not incrementing. C lick the arrow -1 on the left until firstIndex is 0 and not decreasing. T he initial value is 0. c >.selectedIndex records the current click on the selected year index. T he first one, 2021, is displayed by default. T he initial value is 0. d >.firstIndex value changes, get firstIndex, firstIndex1, firstIndex plus 2... T he year for firstIndex4, rendered to the page. A nd one of the five indexes is equal to selectedIndex, indicating that the selected year is exactly the year displayed on the current page. Therefore, the span corresponding to the index is added to the selected style, and the other 4 spans remove the selected style.
- css: left and right arrow logic, by default all add clickable style: firstIndex-0, remove left clickable style, firstIndex-5-year array length, remove right clickable style.
Second, all the code
1 .html
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css" type="text/css"/>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="container">
<div id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;">
<span><</span>
</div>
<div id="wrap" class="wrap">
<span onclick="selected(this)">1</span>
<span onclick="selected(this)">2</span>
<span onclick="selected(this)">3</span>
<span onclick="selected(this)">4</span>
<span onclick="selected(this)">5</span>
</div>
<div id="right" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="on" onselectstart="return false;">
<span>></span>
</div>
</div>
<div class="content" id="content">
</div>
</body>
</html>2.js
The code is as follows:
window.onload = function () {
/*首次渲染列表*/
initList(firstIndex);
};
let yearArr = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021];
yearArr.reverse();
/*起始索引*/
let firstIndex = 0;
/*选中索引,默认选中第一个*/
let selectedIndex = 0;
/**
* 初始化列表
*/
function initList(firstIndex) {
/*渲染页面span列表*/
let spanList = document.getElementById('wrap').getElementsByTagName('span');
for (let i = 0; i < spanList.length; i++) {
let index = firstIndex + i;
let span = spanList[i];
span.innerText = yearArr[index];
/*选中样式添加和移除*/
if (index === selectedIndex) {
span.classList.add('active');
} else {
span.classList.remove('active')
}
}
/*页面内容显示值*/
document.getElementById('content').innerText = '当前选中年份：' + yearArr[selectedIndex];
}
/**
* 下一页
*/
function clickNext(div) {
if (firstIndex + 5 < yearArr.length) {
firstIndex = firstIndex + 1;
initList(firstIndex)
}
arrowActive();
}
/*
* 上一页
*/
function clickBefore(div) {
if (firstIndex > 0) {
firstIndex = firstIndex - 1;
initList(firstIndex)
}
arrowActive();
}
/**
* 选中
*/
function selected(span) {
let value = span.innerText;
let index = yearArr.findIndex((el) => {
return el + "" === value;
})
selectedIndex = index !== -1 ? index : 0;
initList(firstIndex);
}
/**
* 左右箭头激活
* firstIndex = 0: 右激活 左不
* firstIndex = length-5：左激活 右不
* 其他：全激活
*/
function arrowActive() {
let left = document.getElementById('left')
let right = document.getElementById('right')
left.classList.add('arrow_active');
right.classList.add('arrow_active');
if (firstIndex === 0) {
left.classList.remove('arrow_active');
} else if (firstIndex === yearArr.length - 5) {
right.classList.remove('arrow_active');
}
}2.css
The code is as follows:
body{
margin-top: 80px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
.wrap {
height: 40px;
z-index: 1;
color: black;
display: flex;
flex: 1;
background: rgba(155,226,219,0.5);
border-radius: 20px;
margin-left: 20px;
margin-right: 20px;
}
.wrap span {
flex: 1;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 20px;
}
.active{
background: #1abc9c;
color:#fff;
}
.arrow_left {
left: 10px;
color: green;
padding: 0px 14px;
border-radius: 50%;
font-size: 30px;
z-index: 2;
}
.arrow_right {
right: 10px;
color: green;
padding: 0px 14px;
border-radius: 50%;
font-size: 30px;
z-index: 2;
}
.arrow_active{
color: blue;
}
.content{
margin-left: 30px;
}Recommended lessons: JavaScript micro-class, ES6 micro-class