web前端|js教程
js,年份轮播
web前端-js教程
有没有比较系统的lwIP源码介绍,vscode自动写代码ai,ubuntu 投影仪,tomcat配置远程调试,vc sqlite,成都招聘网页设计师,30g数据库共享,网站更换服务器 备案,微商店 插件,前端可用框架,爬虫调研薪酬,php 获取访问ip,seo高级指令,springboot解析php,dede 评论标签,css中文网站模板下载,网页icon小图标,海洋cms模板下载,后台制作,Excel页面选项卡,html文章管理系统 源码,网络小说采集程序源码lzw
相关免费学习推荐：javascript（视频）
贴吧系统源码,vscode最好用的快捷键,ubuntu磁盘检测,怎么下载tomcat里的文件,sqlite连mysql,网页设计字体用什么软件好,什么是网站服务器名称,js访问源码插件,golang前端框架推荐,反爬虫声明,php试题网,seo自动外链工具,学校网站建设的作用,销售网页平台源码,织梦5.7模板下载,商品详情h5页面模板,分站内容管理系统,matlab迭代法程序lzw
文章目录
文件下载类网站源码,ubuntu17启动,爬虫请求xhr页,php wuyuting,新优点seolzw
前言A、思路是什么？B、全部代码1. html2.js2.css总结
前言
用js实现一个年份轮换选择效果。废话不多说，看图：
A、思路是什么？
布局： 左右箭头使用实体字符 < 和 > 年份5个span。使用用flex布局横向排列。js逻辑：（注：年份数据为number数组）
a> . 默认展示年份数据前5个。b>. firstIndex记录要显示的5个年份的起始索引。点击右侧箭头+1，直到firstIndex+5 刚好等于年份数组长度，不在递增。点击左侧箭头-1，直到firstIndex为0，不在递减。初始值为0。c>.selectedIndex记录当前点击选中的年份索引。默认显示第一个即。初始值0。d>.firstIndex值发生变化，获取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4对应的年份，渲染到页面。并且这5个索引中某一个和selectedIndex相等，说明选中的年份，刚好在当前页面显示的年份当中。所以，与之相等的index对应的span添加选中样式，其他4个span移除选中样式。css：左右箭头逻辑，默认全部添加可点击样式：firstIndex=0，移除左可点击样式，firstIndex+5=年份数组长度，移除右可点击样式。
B、全部代码
1. html
代码如下：
<
1 2 3 4 5
>
2.js
代码如下：
window.onload = function () { //首次渲染列表 initList(firstIndex);};let yearArr = [, , , , , , , , , , , , , , ];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(p) { if (firstIndex + 5 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( ight) 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;}
总结
每天记录一点，从小小菜鸟变小菜鸟！！！
