原生JS實現的JSON陣列排序,關鍵字錨點跳轉到指定內容區
阿新 • • 發佈:2019-02-17
- 原生JS實現的仿點選錨點對應模組跳轉到指定的位置,錨點關鍵字從模組中取出,去除重複值按照由大到小的順序排序
- //JSON陣列按指定值進行排序排序,name:排序規則
- function jsonSort(jsonarr,name,snum){
- //如果陣列<=1,則直接返回
- if(jsonarr.length<=1){return jsonarr;}
- var pivotIndex=Math.floor(jsonarr.length/2);
- //找基準,並把基準從原陣列刪除
- var pivot=jsonarr.splice(pivotIndex,1)[0];
- var middleNum=pivot[name];
- // 定義左右陣列
- var leftArr=[];
- var rightArr=[];
- //比基準小的放在left,比基準大的放在right
- if(snum){
- for(var i=0;i<jsonarr.length;i++){
- if(Number(jsonarr[i][name])<=Number(middleNum) ){
- leftArr.push(jsonarr[i]);
- }else{
- rightArr.push(jsonarr[i]);
- }
- }
- }else{
- for(var i=0;i<jsonarr.length;i++){
- if(jsonarr[i][name]<=middleNum){
- leftArr.push(jsonarr[i]);
- }else{
- rightArr.push(jsonarr[i]);
- }
- }
- }
- //遞迴,返回所需陣列,從大到小的順序排列
- return jsonSort(rightArr,name,snum).concat([pivot],jsonSort(leftArr,name,snum));
- }
- function Id(id){
- return document.getElementById(id);
- }
- //載入列表資料
- function getData(ListData){
- var detailbox = Id("detailbox");
- var detailHtml = "";
- var dataM = []; //存放當前年月的值
- for(var i=0;i<ListData.length;i++){
- //ListData[i].expiry.substr(0,7)取出年月,對指定字串從0開始取出7個字元
- detailHtml+="<li id='"+ListData[i].id+"' data-month='"+ListData[i].datatime.substr(0,7)+"'>"+
- "<div>"+
- "<h3>"+ListData[i].detail+"</h3>"+
- "<p>"+ListData[i].datatime+"</p>"+
- "</div>"+
- "</li>";
- detailbox.innerHTML = detailHtml;
- dataM.push(ListData[i].datatime.substr(0,7));
- }
- var monthArr = unique(dataM);
- getTimeline(monthArr);
- }
- //陣列去重
- function unique(arr) {
- var result = [], hash = {};
- for (var i = 0, elem; (elem = arr[i]) != null; i++) {
- if (!hash[elem]) {
- result.push(elem);
- hash[elem] = true;
- }
- }
- return result;
- }
- //載入時間線資料
- function getTimeline(timedata){
- var timeline = Id("timeline");
- var timeHtml="";
- for(var i=0;i<timedata.length;i++){
- timeHtml+="<li><a href='javascript:;'>"+timedata[i]+"</a></li>";
- timeline.innerHTML = timeHtml;
- }
- }
- //獲取時間線的值
- function gotoDetail(){
- var timeUl = Id("timeline");
- timeUl.onclick = function(ev){
- var ev = ev || window.event;
- var target = ev.target || ev.srcElement;
- if(target.nodeName.toLowerCase() == 'a'){
- var timeText = target.innerHTML;
- getDMonth(timeText);
- }
- }
- }
- //點選時間線,頁面將跳轉到指定的內容
- function getDMonth(timeText){
- var dmonthArr = [];
- var detailLisArr = [];
- var detailbox = Id("detailbox");
- var detailLis=detailbox.getElementsByTagName("li");
- for (var i=0; i< detailLis.length;i++){
- if(detailLis[i].getAttribute("data-month")==timeText){
- detailLisArr.push(detailLis[i]);
- }
- }
- document.documentElement.scrollTop = document.body.scrollTop = detailLisArr[0].offsetTop;
- }
- window.onload = function(){
- var ListData=[
- {"id":"1","detail":"JS Array.reverse 將陣列元素顛倒順序","datatime":"2018-01-12 15:20"},
- {"id":"2","detail":"js for迴圈倒序輸出陣列元素","datatime":"2018-01-26 9:10"},
- {"id":"3","detail":"使用js實現陣列逆序","datatime":"2018-01-05 11:20"},
- {"id":"4","detail":"js中陣列的排序","datatime":"2017-10-02 8:20"},
- {"id":"5","detail":"js中陣列的sort()方法用法,引數以及排序原理","datatime":"2017-10-19 15:45"},
- {"id":"6","detail":"Javascript 陣列迴圈遍歷之forEach","datatime":"2017-10-23 15:32"},
- {"id":"7","detail":"js陣列的sort排序詳解","datatime":"2016-09-14 15:20"},
- {"id":"8","detail":"Js陣列排序函式sort()介紹","datatime":"2016-09-30 15:20"},
- {"id":"9","detail":"JVM啟動引數的類別及使用","datatime":"2016-06-29 15:12"},
- {"id":"10","detail":"2018年,該轉行AI工程師嗎","datatime":"2015-12-24 15:20"},
- {"id":"11","detail":"vue: WebStorm設定快速編譯執行","datatime":"2017-12-12 11:20"},
- {"id":"12","detail":"程式設計到底難在哪裡?","datatime":"2015-12-09 10:20"},
- {"id":"13","detail":"android跨程序通訊(IPC):使用AIDL","datatime":"2017-12-05 12:30"},
- {"id":"14","detail":"想精通 Python 資料探勘?清華博士帶你入門!","datatime":"2016-06-12 09:00"},
- {"id":"15","detail":"大齡程式設計師都去哪了?","datatime":"2015-07-13 22:15"}
- ];
- //按照日期返回的排序陣列
- var arrListData = jsonSort(ListData,"datatime",false);
- getData(arrListData);
- gotoDetail();
- }
- <!--HTML -->
- <div class="box_l">
- <ul id="detailbox">
- <li data-month="2017-5">
- <div>
- <h3></h3>
- <p></p>
- </div>
- </li>
- </ul>
- </div>
- <div class="box_r">
- <ul id="timeline">
- <li><a href="javascript:;"></a></li>
- </ul>
- </div>
- <!--效果-->