使用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 相关文章推荐
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
Vue实现自定义下拉菜单功能
Jul 16 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 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
基于mysql的论坛(2)
2006/10/09 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
js运动应用实例解析
2015/12/28 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
浅谈Python中range和xrange的区别
2017/12/20 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
十佳班主任事迹材料
2014/01/18 职场文书
加工操作管理制度
2014/01/19 职场文书
新三好学生主要事迹
2014/01/23 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
PHP策略模式写法
2021/04/01 PHP
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
flex弹性布局详解
2022/03/20 HTML / CSS
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server