南强小屋 Design By 杰米
本文介绍了JavaScript 实现同时选取多个时间段的方法,分享给大家,具体如下:
<template> <div> <ul> <li v-for="(item,index) in timeLine.idList" :key="index" iselected="0" @mousemove="item.id != undefined " @mousedown="item.id != undefined " @mouseup="item.id != undefined " :id="item.id != undefined " > <div :id="item.id != undefined " 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>
效果图如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无JavaScript 实现同时选取多个时间段的方法的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?