ai-3：原生js实现时光轴，jquery-ajax调接口（本地文件用open with live server）

2023-12-16 14:25:22

html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="./test.css" />
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>时间轴</title>
  </head>

  <body>
    <div id="timeline"></div>
    <button id="more">... 查看更多信息</button>
    <script type="text/javascript" src="./test.js"></script>
    
  </body>
</html>

js文件

$.ajax({
  type: 'get',
  url:'qq.json',
  dataType: 'json',
  success: function (data) {//接口调数据
    console.log('ok',data)
    
    //data-->data1   数据转换-得到数据条数-用于切分
    let data1 = []
    data.map(({ date, datalist }) => {
      datalist.map(({ time, status, url, urlName }) => {
        data1.push({
          date: date,
          time: time,
          status: status.join(' '),
          url: url,
          urlName: urlName,
        })
      })
    })

    //data1-->data11  切分数据 count为每次加载的数据条数
    let count = 2
    let startN = 0
    let endN = count
    var data11 = data1.slice(startN, endN)

    //data11-->data2 数据再转换回去 data2用于展示
    let data2 = []
    getdata2()
    showData()

    let addmore = document.getElementById('more')
    if (data1.length > count) {
      addmore.style.display = 'block'
    }

    addmore.onclick = function () {
      startN = endN
      endN += count
      data11 = data11.concat(data1.slice(startN, endN))
      getdata2()
      showData()
      if (endN == data1.length || endN > data1.length) {
        addmore.style.display = 'none'
      }
      console.log(startN)
      console.log(endN)
    }

    function getdata2() {
      data2 = []
      data11.map((a) => {
        let datalist = []
        datalist.push({
          time: a.time,
          status: a.status,
          url: a.url,
          urlName: a.urlName,
        })
        let dd = {}
        dd['date'] = a.date
        dd['datalist'] = datalist
    
        if (
          !data2.some((d) => {
            if (d.date == a.date) {
              d.datalist = d.datalist.concat(datalist)
            }
            return d.date == a.date
          })
        ) {
          data2.push(dd)
        }
      })
    }
    function showData() {
      let timeline = document.getElementById('timeline')
      timeline.innerHTML = ''
      console.log(data2)
      data2.map(({ date, datalist }) => {
        let lineTop = document.createElement('div')
        timeline.appendChild(lineTop)
        lineTop.innerHTML = date
        lineTop.setAttribute('class', 'line-top')
    
        datalist.map(({ time, status, url, urlName }) => {
          let lineBottom = document.createElement('div')
          let lineLeft = document.createElement('div')
          let line = document.createElement('div')
          let lineRight = document.createElement('div')
          timeline.appendChild(lineBottom)
          lineBottom.appendChild(lineLeft)
          lineBottom.appendChild(line)
          lineBottom.appendChild(lineRight)
          lineLeft.innerHTML = time
          lineBottom.setAttribute('class', 'line-bottom')
          lineLeft.setAttribute('class', 'line-left')
          lineRight.setAttribute('class', 'line-right')
          line.setAttribute('class', 'line')
    
          let p = document.createElement('p')
          let a = document.createElement('a')
          lineRight.appendChild(p)
          lineRight.appendChild(a)
          p.setAttribute('class', 'line-right-status')
          a.setAttribute('class', 'line-right-urlname')
          p.innerHTML = status
          a.innerHTML = urlName
          a.setAttribute('href', url)
        })
      })
    }

  },
  error:function(data){
    console.log('no',data)
  }
})

css样式

html,body,div,p,a,button {
  margin: 0;
  padding: 0;
  color: #444444;
  Font-Family: "微软雅黑";
  font-size: 14px;
  font-weight: normal;
}
#timeline {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.line-top {
  padding: 2px;
  background-color: rgb(220, 231, 247);
  font-weight: bold;  
}
.line-bottom {
  display: flex;
}
.line {
  height: auto;
  border-left: 2px solid rgb(200, 200, 200);
  margin: 0 20px;
}
.line-left { 
  width: 200px;
  flex: 1;
  text-align: right;
  margin: auto;
  color: grey;
}
.line-right {
  flex: 1;
  text-align: left;
  margin: 10px 0;
  
}
.line-right-status{
    font-weight: bold;
}
.line-right-urlname{
  color: rgb(13,147,246);
}
#more{
  border: none;
  background-color: white;
  color: rgb(64, 90, 170);
  position:relative;
  left: 50%;
  font-weight: bold;
  display: none;
}

数据格式

[
  {
    "date": "2012-12-24",
    "datalist": [
      {
        "time": "10:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxxxxxxxxxxxxxx入职单"
      },
      {
        "time": "11:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      },
      {
        "time": "12:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      }
    ]
  },
  {
    "date": "2012-12-25",
    "datalist": [
      {
        "time": "10:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxxxxxxxxxxxxxx入职单"
      },
      {
        "time": "11:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      },
      {
        "time": "12:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      }
    ]
  },
  {
    "date": "2012-12-26",
    "datalist": [
      {
        "time": "10:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxxxxxxxxxxxxxx入职单"
      },
      {
        "time": "11:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      },
      {
        "time": "12:28",
        "status": ["入职", "转正"],
        "url": "#",
        "urlName": "xxxxx入职单"
      }
    ]
  }
]

最终效果

码农公寓

相关文章