JavaScript implementation simultaneously selects multiple time segments

This article describes the method of JavaScript implementation to select multiple time periods, share it to everyone, the specific:

   
  • 0
    1
2
3 4 7 8 10 11 15 16 17 18 21 23 24 EXPORT Default {data () {return {Timeline: {Flag: 0, preid: -1, idlist: [{}, {id: 0}, {}, {id: 1}, {} , {ID: 2}, {}, {id: 3}, {}, {id: 4}, {},{ID: 5}, {}, {ID: 7}, {}, {id: 8}, {}, {id: 9}, {}, {id: 10} , {}, {ID: 12}, {}, {id: 13}, {}, {id: 14}, {}, {ID: 15}, {}, { ID: 16}, {}, {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); // Avoid repeating the ID, only one ID if (this.timeline.preid == id) {return;} // per time period;} // = = ID ;. }.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 ');}}}, // Time format submitted to the background data is start: End Timelinesub () {VAR PREID = -1; var start; var count = 0; var timearr = []; $ ('Li [ISELECTED = 1]'). Each (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 (',');}}; HTML, Body {margin: 0; padding: 0; ul {height: 20px; margin-bottom: 0px; padding: 10px 19px; li {cursor: Pointer List-style: none; float: left; 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;}}} The above is all the content of this article, I hope that everyone's learning is helpful, I hope everyone will support it. Tumi cloud.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment