脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js原生实现年份轮播选择

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

 更新时间：2021年01月12日 11:24:54   作者：Hui-1018  
这篇文章主要给大家介绍了关于如何使用js原生实现年份轮播选择效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

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

一、思路是什么？

  • 布局： 左右箭头使用实体字符 < 和 > 年份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中一个奇葩的IE浏览器判断方法

    JavaScript中一个奇葩的IE浏览器判断方法

    在写原生的Javascript的时候，因为IE的JS引擎与标准浏览器的JS引擎之间总有那么些差异，所以经常会去判断是否是IE浏览器
    2014-04-04
  • 全面解析Bootstrap手风琴效果

    全面解析Bootstrap手风琴效果

    这篇文章主要为大家详细介绍了全面解析Bootstrap手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 基于原生CSS+JS实现一个标签输入框

    基于原生CSS+JS实现一个标签输入框

    在各种框架大行其道的氛围下，有些原生的属性和方法可能都不太关注了，这也不失为是一种损失。本文就将利用原生CSS+JS实现一个简单的标签输入框，感兴趣的可以了解一下
    2022-04-04
  • JS实现方形抽奖效果

    JS实现方形抽奖效果

    这篇文章主要为大家详细介绍了JS实现方形抽奖效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 原生js实现图片放大缩小计时器效果

    原生js实现图片放大缩小计时器效果

    本文主要介绍了原生js实现图片放大缩小计时器效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JS实现放大镜效果

    JS实现放大镜效果

    这篇文章主要为大家详细介绍了JS实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 基于打包工具Webpack进行项目开发实例

    基于打包工具Webpack进行项目开发实例

    这篇文章主要介绍了基于打包工具Webpack进行项目开发实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 基于JS实现步骤引导进度条效果的代码示例

    基于JS实现步骤引导进度条效果的代码示例

    在Web前端开发中,步骤引导进度条是一种常见的交互设计,用于引导用户完成多步骤任务,如表单填写、注册流程或支付操作,本文将详细介绍如何利用JavaScript实现一个功能完善且视觉友好的步骤引导进度条效果,需要的朋友可以参考下
    2025-02-02
  • Javascript幻灯片播放功能实现过程解析

    Javascript幻灯片播放功能实现过程解析

    这篇文章主要介绍了Javascript幻灯片播放功能实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • JS扁平化输出数组的2种方法解析

    JS扁平化输出数组的2种方法解析

    这篇文章主要介绍了JS扁平化输出数组的2种方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论