本文介紹了JavaScript 實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法，分享給大家，具體如下：

創(chuàng)新互聯(lián)公司始終致力于在企業(yè)網(wǎng)站建設(shè)領(lǐng)域發(fā)展。秉承“創(chuàng)新、求實(shí)、誠(chéng)信、拼搏”的企業(yè)精神，致力為企業(yè)提供全面的網(wǎng)絡(luò)宣傳與技術(shù)應(yīng)用整體策劃方案，為企業(yè)提供包括“網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、微信網(wǎng)站建設(shè)、微信平臺(tái)小程序開(kāi)發(fā)、商城系統(tǒng)網(wǎng)站開(kāi)發(fā)、平臺(tái)網(wǎng)站建設(shè)秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

<template>
 <div>
  <ul>
   <li
    v-for="(item,index) in timeLine.idList"
    :key="index"
    iselected="0"
    @mousemove="item.id != undefined ? move_li($event) : ''"
    @mousedown="item.id != undefined ? down_li() : ''"
    @mouseup="item.id != undefined ? up_li() : ''"
    :id="item.id != undefined ? item.id : ''"
   >
    <div :id="item.id != undefined ? item.id : ''" iselected="0"></div>
   </li>
  </ul>
  <div class="num">
   <span>0</span>
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
   <span>7</span>
   <span>8</span>
   <span>9</span>
   <span>10</span>
   <span>11</span>
   <span>12</span>
   <span>13</span>
   <span>14</span>
   <span>15</span>
   <span>16</span>
   <span>17</span>
   <span>18</span>
   <span>19</span>
   <span>20</span>
   <span>21</span>
   <span>22</span>
   <span>23</span>
   <span>24</span>
  </div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   timeLine: {
    flag: 0,
    preid: -1,
    idList: [
     {},
     { id: 0 },
     {},
     { id: 1 },
     {},
     { id: 2 },
     {},
     { id: 3 },
     {},
     { id: 4 },
     {},
     { id: 5 },
     {},
     { id: 6 },
     {},
     { id: 7 },
     {},
     { id: 8 },
     {},
     { id: 9 },
     {},
     { id: 10 },
     {},
     { id: 11 },
     {},
     { id: 12 },
     {},
     { id: 13 },
     {},
     { id: 14 },
     {},
     { id: 15 },
     {},
     { id: 16 },
     {},
     { id: 17 },
     {},
     { id: 18 },
     {},
     { id: 19 },
     {},
     { id: 20 },
     {},
     { id: 21 },
     {},
     { id: 22 },
     {},
     { id: 23 },
     {}
    ]
   }
  };
 },
 methods: {
  down_li(e) {
   this.timeLine.flag = 1;
  },
  up_li() {
   this.timeLine.flag = 0;
   this.timeLine.preid = -1;
  },
  move_li(e) {
   if (this.timeLine.flag == 0) {
    return;
   }
   var id = e.target.getAttribute('id');
   if (id == undefined) {
    return;
   }
   id = parseInt(id);
   // 避免重復(fù)獲取 ID，每個(gè)時(shí)間段都只獲取一次 ID
   if (this.timeLine.preid == id) {
    return;
   }
   // 避免滑動(dòng)時(shí)閃爍
   this.timeLine.preid = id;
   var iselected = $('#' + id).attr('iselected');
   if (iselected == 1) {
    $("#"+id).children('div').css('background-color','');
    $("#"+id).attr('iselected', '0');
   } else {
    $("#"+id).children('div').css('background-color','#3bbe9b');
    $("#"+id).attr('iselected', '1');
   }
  },
  // 處理提交至后臺(tái)數(shù)據(jù)的時(shí)間格式為 start : end
  timeLineSub() {
   var preid = -1;
   var start;
   var count = 0;
   var timeArr = [];
   $('li[iselected=1]').each(function(index, value) {
    var id = value.id;
    if (preid == -1) {
     preid = id;
     start = id;
     count++;
     return;
    }
    if (preid == id - 1) {
     count++;
    } else {
     if (count > 0) {
      timeArr.push(start + ':' + count);
     }
     start = id;
     count = 1;
    }
    preid = id;
   });
   timeArr.push(start + ':' + count);
   this.timeRange = timeArr.join(',');
  }
 }
};
</script>

<style lang="less" scoped>
html,
body {
 margin: 0;
 padding: 0;
 ul {
  height: 20px;
  margin-bottom: 0px;
  padding: 10px 19px;
  li {
   cursor: pointer;
   list-style: none;
   float: left;
   height: 20px;
   padding: 6px 0;
  }
  li:nth-child(even) {
   div {
    width: 28px;
    height: 5px;
    margin-top: 2px;
    background-color: rgb(232, 234, 236);
   }
  }
  li:nth-child(odd) {
   div {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 1px;
    border: 1px solid rgb(59, 190, 155);
   }
  }
 }
 .num {
  height: 100%;
  padding-left: 20px;
  margin-top: 2px;
  span {
   display: inline-block;
   width: 9px;
   height: 7px;
   font-size: 12px;
   margin-right: 23px;  
  }
  span:last-child {
   margin-right: 0px;
  }
 }
}
</style>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：JavaScript實(shí)現(xiàn)同時(shí)選取多個(gè)時(shí)間段的方法-創(chuàng)新互聯(lián)
文章來(lái)源：http://chinadenli.net/article40/dgpjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、App設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、關(guān)鍵詞優(yōu)化、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)