使用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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
原生JS实现留言板
Mar 26 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP上传图片进行等比缩放可增加水印功能
2014/01/13 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
php验证码生成器
2017/05/24 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
前台文员个人求职信范文
2014/01/05 职场文书
公司开业庆典主持词
2014/03/21 职场文书
校庆活动方案
2014/03/31 职场文书
党员反邪教心得体会
2016/01/15 职场文书