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实现动画效果的实例代码
May 07 Javascript
对比分析json及XML
Nov 28 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 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 strcmp使用说明
2010/04/22 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
简化Python的Django框架代码的一些示例
2015/04/20 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
python daemon守护进程实现
2016/08/27 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python之yield和Generator深入解析
2019/09/18 Python
简单介绍django提供的加密算法
2019/12/18 Python
python关于变量名的基础知识点
2020/03/03 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
销售会计工作职责
2013/12/02 职场文书
承诺书的格式范文
2014/03/28 职场文书
励志演讲稿大全
2014/08/21 职场文书
幽灵公主观后感
2015/06/09 职场文书
安全教育片观后感
2015/06/17 职场文书