JavaScript 实现同时选取多个时间段的方法


Posted in Javascript onOctober 17, 2019

本文介绍了JavaScript 实现同时选取多个时间段的方法,分享给大家,具体如下:

<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);
   // 避免重复获取 ID,每个时间段都只获取一次 ID
   if (this.timeLine.preid == id) {
    return;
   }
   // 避免滑动时闪烁
   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');
   }
  },
  // 处理提交至后台数据的时间格式为 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>

效果图如下:

JavaScript 实现同时选取多个时间段的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 #Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 #Javascript
Weex开发之地图篇的具体使用
Oct 16 #Javascript
WEEX环境搭建与入门详解
Oct 16 #Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 #Javascript
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php删除数组元素示例分享
2014/02/17 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php数组去除空值函数分享
2015/02/02 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
vue实现文件上传功能
2018/08/13 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
javascript的this关键字详解
2019/05/20 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Python中zip函数如何使用
2020/06/04 Python
关于python中remove的一些坑小结
2021/01/04 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
大二学期个人自我评价
2014/01/13 职场文书
经典商业广告词
2014/03/13 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
PHP 时间处理类Carbon
2022/05/20 PHP