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


Posted in Javascript onJanuary 12, 2021

前言

用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><</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

代码如下:

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 相关文章推荐
javascript中数组中求最大值示例代码
Dec 18 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
javascript实现全局匹配并替换的方法
Apr 27 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Webpack实战加载SVG的方法
Dec 26 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
vue实现简单瀑布流布局
May 28 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
js动态生成表格(节点操作)
Jan 12 #Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 #Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 #Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python3生成手写体数字方法
2018/01/30 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python time()的实例用法
2020/11/03 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
大学系主任推荐信范文
2013/12/24 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
《四季》教学反思
2014/04/08 职场文书
借款担保书范文
2014/05/13 职场文书
孔庙导游词
2015/02/04 职场文书