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 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
没有document.getElementByName方法
Aug 19 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
非常漂亮的js烟花效果
Mar 10 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
python处理二进制数据的方法
2015/06/03 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python add_argument()用法解析
2020/01/29 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python matplotlib可视化实例解析
2020/06/01 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
听证通知书
2015/04/24 职场文书
故意伤害辩护词
2015/05/21 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python