您的位置: 首页  >  文章  >  原生JS实现的JSON数组排序，关键字锚点跳转到指定内容区

原生JS实现的JSON数组排序，关键字锚点跳转到指定内容区

分类: 文章 • 2023-11-12 15:43:46

  1. 原生JS实现的仿点击锚点对应模块跳转到指定的位置，锚点关键字从模块中取出，去除重复值按照由大到小的顺序排序
  2. //JSON数组按指定值进行排序排序,name:排序规则
  3.         function jsonSort(jsonarr,name,snum){
  4.             //如果数组<=1,则直接返回
  5.             if(jsonarr.length<=1){return jsonarr;}
  6.             var pivotIndex=Math.floor(jsonarr.length/2);
  7.             //找基准，并把基准从原数组删除
  8.             var pivot=jsonarr.splice(pivotIndex,1)[0];
  9.             var middleNum=pivot[name];
  10.             // 定义左右数组
  11.             var leftArr=[];
  12.             var rightArr=[];
  13.             //比基准小的放在left，比基准大的放在right
  14.             if(snum){
  15.                 for(var i=0;i<jsonarr.length;i++){
  16.                     if(Number(jsonarr[i][name])<=Number(middleNum) ){
  17.                         leftArr.push(jsonarr[i]);
  18.                     }else{
  19.                         rightArr.push(jsonarr[i]);
  20.                     }
  21.                 }
  22.             }else{
  23.                 for(var i=0;i<jsonarr.length;i++){
  24.                     if(jsonarr[i][name]<=middleNum){
  25.                         leftArr.push(jsonarr[i]);
  26.                     }else{
  27.                         rightArr.push(jsonarr[i]);
  28.                     }
  29.                 }
  30.             }
  31.             //递归,返回所需数组,从大到小的顺序排列
  32.             return jsonSort(rightArr,name,snum).concat([pivot],jsonSort(leftArr,name,snum));
  33.         }

  35.         function Id(id){
  36.             return document.getElementById(id);
  37.         }
  38.         //加载列表数据
  39.         function getData(ListData){
  40.             var detailbox = Id("detailbox");
  41.             var detailHtml = "";
  42.             var dataM = []; //存放当前年月的值
  43.             for(var i=0;i<ListData.length;i++){
  44.                 //ListData[i].expiry.substr(0,7)取出年月，对指定字符串从0开始取出7个字符
  45.                 detailHtml+="<li id='"+ListData[i].id+"' data-month='"+ListData[i].datatime.substr(0,7)+"'>"+
  46.                         "<div>"+
  47.                         "<h3>"+ListData[i].detail+"</h3>"+
  48.                         "<p>"+ListData[i].datatime+"</p>"+
  49.                         "</div>"+
  50.                         "</li>";
  51.                 detailbox.innerHTML = detailHtml;
  52.                 dataM.push(ListData[i].datatime.substr(0,7));
  53.             }           
  54.             var monthArr = unique(dataM);
  55.             getTimeline(monthArr);
  56.         }

  58.         //数组去重
  59.         function unique(arr) {
  60.             var result = [], hash = {};
  61.             for (var i = 0, elem; (elem = arr[i]) != null; i++) {
  62.                 if (!hash[elem]) {
  63.                     result.push(elem);
  64.                     hash[elem] = true;
  65.                 }
  66.             }
  67.             return result;
  68.         }

  70.         //加载时间线数据
  71.         function getTimeline(timedata){
  72.             var timeline = Id("timeline");
  73.             var timeHtml="";
  74.             for(var i=0;i<timedata.length;i++){
  75.                 timeHtml+="<li><a href='javascript:;'>"+timedata[i]+"</a></li>";
  76.                 timeline.innerHTML = timeHtml;
  77.             }
  78.         }

  80.         //获取时间线的值
  81.         function gotoDetail(){
  82.             var timeUl = Id("timeline");
  83.             timeUl.onclick = function(ev){
  84.                 var ev = ev || window.event;
  85.                 var target = ev.target || ev.srcElement;
  86.                 if(target.nodeName.toLowerCase() == 'a'){                    
  87.                     var timeText = target.innerHTML;
  88.                     getDMonth(timeText);
  89.                 }
  90.             }
  91.         }

  93.         //点击时间线，页面将跳转到指定的内容
  94.         function getDMonth(timeText){
  95.             var dmonthArr = [];
  96.             var detailLisArr = [];
  97.             var detailbox = Id("detailbox");
  98.             var detailLis=detailbox.getElementsByTagName("li");
  99.             for (var i=0; i< detailLis.length;i++){
  100.                 if(detailLis[i].getAttribute("data-month")==timeText){                    
  101.                     detailLisArr.push(detailLis[i]);
  102.                 }
  103.             }         
  104.             document.documentElement.scrollTop = document.body.scrollTop = detailLisArr[0].offsetTop;
  105.         }
  106. window.onload = function(){
  107.             var ListData=[
  108.                 {"id":"1","detail":"JS Array.reverse 将数组元素颠倒顺序","datatime":"2018-01-12 15:20"},
  109.                 {"id":"2","detail":"js for循环倒序输出数组元素","datatime":"2018-01-26 9:10"},
  110.                 {"id":"3","detail":"使用js实现数组逆序","datatime":"2018-01-05 11:20"},
  111.                 {"id":"4","detail":"js中数组的排序","datatime":"2017-10-02 8:20"},
  112.                 {"id":"5","detail":"js中数组的sort()方法用法，参数以及排序原理","datatime":"2017-10-19 15:45"},
  113.                 {"id":"6","detail":"Javascript 数组循环遍历之forEach","datatime":"2017-10-23 15:32"},
  114.                 {"id":"7","detail":"js数组的sort排序详解","datatime":"2016-09-14 15:20"},
  115.                 {"id":"8","detail":"Js数组排序函数sort()介绍","datatime":"2016-09-30 15:20"},
  116.                 {"id":"9","detail":"JVM启动参数的类别及使用","datatime":"2016-06-29 15:12"},
  117.                 {"id":"10","detail":"2018年，该转行AI工程师吗","datatime":"2015-12-24 15:20"},
  118.                 {"id":"11","detail":"vue: WebStorm设置快速编译运行","datatime":"2017-12-12 11:20"},
  119.                 {"id":"12","detail":"编程到底难在哪里？","datatime":"2015-12-09 10:20"},
  120.                 {"id":"13","detail":"android跨进程通信（IPC）：使用AIDL","datatime":"2017-12-05 12:30"},
  121.                 {"id":"14","detail":"想精通 Python 数据挖掘？清华博士带你入门！","datatime":"2016-06-12 09:00"},
  122.                 {"id":"15","detail":"大龄程序员都去哪了？","datatime":"2015-07-13 22:15"}
  123.             ];
  124.    //按照日期返回的排序数组
  125.             var arrListData = jsonSort(ListData,"datatime",false);
  126.             getData(arrListData);
  127.             gotoDetail();
  128.         }
  129. <!--HTML -->
  130. <div class="box_l">
  131.     <ul id="detailbox">
  132.         <li data-month="2017-5">
  133.             <div>
  134.                 <h3></h3>
  135.                 <p></p>
  136.             </div>
  137.         </li>
  138.     </ul>
  139. </div>
  140. <div class="box_r">
  141.     <ul id="timeline">
  142.         <li><a href="javascript:;"></a></li>
  143.     </ul>
  144. </div>
  145. <!--效果-->
  146. 原生JS实现的JSON数组排序，关键字锚点跳转到指定内容区

相关推荐