使用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 Event事件学习第一章 Event介绍
Feb 07 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue更改数组中的值实例代码详解
Feb 07 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
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JS 控件事件小结
2012/10/31 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
关于python的list相关知识(推荐)
2017/08/30 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
python去除字符串中的换行符
2017/10/11 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
意大利消费电子产品购物网站:SLG Store
2019/12/26 全球购物
自荐信包含哪些内容
2013/10/30 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
让世界充满爱观后感
2015/06/10 职场文书
防震减灾主题班会
2015/08/14 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS