使用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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 Javascript
JS实现图片切换特效
Dec 23 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
原生JS生成指定位数的验证码
Oct 28 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 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
银行实习鉴定
2013/12/13 职场文书
期终自我鉴定
2014/02/17 职场文书
爱之链教学反思
2014/04/30 职场文书
安全教育演讲稿
2014/05/09 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
航空学院求职信
2014/06/11 职场文书
邓小平理论心得体会
2014/09/09 职场文书
放飞理想主题班会
2015/08/14 职场文书
新年寄语2016
2015/08/17 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
Nginx的基本概念和原理
2022/03/21 Servers