站長(zhǎng)資訊網(wǎng)
相關(guān)免費(fèi)學(xué)習(xí)推薦：javascript（視頻）
文章目錄
- 前言
- 一、思路是什么？
- 二、全部代碼
-
- 1. html
- 2.js
- 2.css
- 總結(jié)
前言
用js實(shí)現(xiàn)一個(gè)年份輪換選擇效果。廢話不多說(shuō)，看圖：
一、思路是什么？
- 布局： 左右箭頭使用實(shí)體字符 < 和 > 年份5個(gè)span。使用用flex布局橫向排列。
- js邏輯：（注：年份數(shù)據(jù)為number數(shù)組）
- a> . 默認(rèn)展示年份數(shù)據(jù)前5個(gè)。
- b>. firstIndex記錄要顯示的5個(gè)年份的起始索引。點(diǎn)擊右側(cè)箭頭+1，直到firstIndex+5 剛好等于年份數(shù)組長(zhǎng)度，不在遞增。點(diǎn)擊左側(cè)箭頭-1，直到firstIndex為0，不在遞減。初始值為0。
- c>.selectedIndex記錄當(dāng)前點(diǎn)擊選中的年份索引。默認(rèn)顯示第一個(gè)即2021。初始值0。
- d>.firstIndex值發(fā)生變化，獲取firstIndex，firstIndex+1，firstIndex+2…firstIndex+4對(duì)應(yīng)的年份，渲染到頁(yè)面。并且這5個(gè)索引中某一個(gè)和selectedIndex相等，說(shuō)明選中的年份，剛好在當(dāng)前頁(yè)面顯示的年份當(dāng)中。所以，與之相等的index對(duì)應(yīng)的span添加選中樣式，其他4個(gè)span移除選中樣式。
- css：左右箭頭邏輯，默認(rèn)全部添加可點(diǎn)擊樣式：firstIndex=0，移除左可點(diǎn)擊樣式，firstIndex+5=年份數(shù)組長(zhǎng)度，移除右可點(diǎn)擊樣式。
二、全部代碼
1. html
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css" type="text/css"/> <script type="text/javascript" src="echarts.min.js"></script> <script type="text/javascript" src="index.js"></script></head><body><p class="container"> <p id="left" class="arrow_left" onclick="clickBefore()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span><</span> </p> <p 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> </p> <p id="right" class="arrow_right arrow_active" onclick="clickNext()" style="cursor:default" unselectable="on" onselectstart="return false;"> <span>></span> </p></p><p class="content" id="content"></p></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;//選中索引,默認(rèn)選中第一個(gè)let selectedIndex = 0;/** * 初始化列表 */function initList(firstIndex) { //渲染頁(yè)面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') } } //頁(yè)面內(nèi)容顯示值 document.getElementById('content').innerText = '當(dāng)前選中年份：' + yearArr[selectedIndex];}/** * 下一頁(yè) */function clickNext(p) { if (firstIndex + 5 < yearArr.length) { firstIndex = firstIndex + 1; initList(firstIndex) } arrowActive();}/* * 上一頁(yè) */function clickBefore(p) { 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;}
總結(jié)
每天記錄一點(diǎn)，從小小菜鳥(niǎo)變小菜鳥(niǎo)！??！
相關(guān)免費(fèi)學(xué)習(xí)推薦：js視頻教程
