本文介绍了Java脚本语言实现同时选取多个时间段的方法，分享给大家，具体如下：

模板div ul Li v-for='时间轴。idlist ' :键=' index '中的（项，索引)被选中='0' @mousemove='item.id！=未定义？move _ Li($ event): ' ' @鼠标向下=' item。身份证！=未定义？down _ Li(): ' ' @鼠标向上=' item。身份证！=未定义？up _ Li(): ' ' ' : id=' item。身份证！=未定义？项目。id : ' ' ' div : id=' item。身份证！=未定义？项目。id : ' ' '为select=' 0 '/div/Li/ul div class=' num ' span 0/span span 1/span span 2/span span 3/span 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 14/span span span 15/span 16/span span 17/span span 18/span span 19/span span 20/span span 21 { ids时间线。标志=1；}，up _ Li(){这个。时间线。标志=0；这个。TiME。preid=-1；}，move _ Li(e){ if(this。时间线。flag==0){ return；} var id=e . target。GetAttribute(' id ')；if(id==undefined){ return；} id=ParSeint(id)；//避免重复获取身份证，每个时间段都只获取一次身份证如果(这个。TiME。preid==ID){ return；} //避免滑动时闪烁这个。TiME。preid=idvar是select=$("#"id).attr('我选择了')；if(我选择的==1){ $("#"id).儿童(' div ').css(“”背景色',' ');$("#"id).attr('iselected '，' 0 ')；} else { $(“#”id).儿童(' div ').css(“”背景色，' # 3bbe 9b ')；$("#"id).attr('iselected '，' 1 ')；} }, //处理提交至后台数据的时间格式为start : end timeLineSub(){ var preid=-1；定义变量开始；定义变量计数=0;var timeArr=[]；$(“李[我选中了=1]”)。每个（函数（索引，值){ var id=value . idif(preid==-1){ preid=id；start=id计数；返回；} if(preid==id-1){ count；} else { if(计数0){ timearr。推送(开始‘:’计数)；} start=id计数=1;} preid=id })；timeArr.push(开始':'计数);this.timeRange=timeArr.join('，')；} }};/script style lang=' less '范围html，正文{ margin : 0；padd : 0；ul { height: 20px边距-底部： 0pxpadd : 10px 19pxli { cursor :指针；列表样式：无；向左浮动：height : 20pxpad : 6px 0；}李第：个孩子(偶数){ div { width : 28px heart : 5pxmargin-top : 2px；背景-color: rgb(232，234，236)；} }李第：个孩子(奇数){ div { width : 7pxh three : 7px边界半径： 50%;页边距-top : 1px；border: 1px纯色rgb(59，190，155)；} } } .num { height : 100%；左填充left : 20 pxmargin-top : 2px；span { display : inline-block；宽度： 9pxheight : 7px font-size : 12px；右边距： 23px} span :最后一个孩子{ margin-right : 0px；} } }/样式效果图如下：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。