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实现的可编辑下拉框实现代码
Aug 02 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中使用memcache存储session的三种配置方法
2014/04/05 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php验证码生成器
2017/05/24 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
浅谈php调用python文件
2019/03/29 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
原生js实现轮播图
2017/02/27 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
在django中自定义字段Field详解
2019/12/03 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
华三通信H3C面试题
2015/05/15 面试题
会计自荐信范文
2014/03/09 职场文书
安全月宣传标语
2014/10/07 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
在Docker容器中部署SQL Server
2022/04/11 Servers