使用js原生实现年份轮播选择效果实例

前言

用js实现一个年份轮换选择效果。废话不多说，看图：

一、思路是什么？

• 布局： 左右箭头使用实体字符 & lt; 和 & gt; 年份5个span。使用用flex布局横向排列。
• js逻辑：（注：年份数据为number数组）
  • a> . 默认展示年份数据前5个。
  • b> . FirstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5 刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。
  • c> .selectedIndex记录当前点击选中的年份索引。默认显示第一个即2021。初始值0。
  • d> .firstIndex值发生变化，获取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4对应的年份，渲染到页面。并且这5个索引中某一个和selectedIndex相等，说明选中的年份，刚好在当前页面显示的年份当中。所以，与之相等的index对应的span添加选中样式，其他4个span移除选中样式。
• css：左右箭头逻辑，默认全部添加可点击样式：firstIndex=0，移除左可点击样式，firstIndex+5=年份数组长度，移除右可点击样式。
  

二、全部代码

1. htML

代码如下：

!DOCTYPE html>
    html lang="en">
    head>
     meta charset="UTF-8">
     tITle>
    Title/title>
     link rel="stylesheet" href="index.css" rel="external nofollow" 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>
    &
    lt;
    /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>
    &
    gt;
    /span>
     /div>
    /div>
    div class="content" id="content">
    /div>
    /body>
    /html>
    

2.js

代码如下：

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

代码如下：

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;
}
    

总结

每天记录一点，从小小菜鸟变小菜鸟！！！

到此这篇关于使用js原生实现年份轮播选择效果的文章就介绍到这了,更多相关js原生实现年份轮播选择内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• javaScript年份下拉列表框内容为当前年份及前后50年
• JS日期对象简单操作（获取当前年份、星期、时间）
• IE与Firefox下javascript getyear年份的兼容性写法
• js输出阴历、阳历、年份、月份、周示例代码
• 一个可以显示当前年份以及生肖的js代码
• JS动态生成年份和月份实例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！