日期时间安排表（以时间槽的形式展示占用空闲状态）

time schedule table，可用于会议 | 场所时间段预定页面。

js, time, slot

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1616
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function timeslotize(divs) {
  var header = '<div class=time-head><div class=time-slot style=width:10%></div><div class=time-slot style=width:6%>8</div><div class=time-slot style=width:6%>9</div><div class=time-slot style=width:6%>10</div><div class=time-slot style=width:6%>11</div><div class=time-slot style=width:6%>12</div><div class=time-slot style=width:6%>13</div><div class=time-slot style=width:6%>14</div><div class=time-slot style=width:6%>15</div><div class=time-slot style=width:6%>16</div><div class=time-slot style=width:6%>17</div><div class=time-slot style=width:6%>18</div><div class=time-slot style=width:6%>19</div><div class=time-slot style=width:6%>20</div><div class=time-slot style=width:6%>21</div><div class=time-slot style=width:6%>22</div><div class=time-slot style=width:6%>23</div></div>';
  var days = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'];

for (var idiv = 0; idiv < divs.length; idiv++) {
    var div = divs[idiv];
    var wapper = header;
    var values = div.getAttribute("value");
    if (values == null) values = '0,0,0,0,0,0,0';
    values = values.split(",");
    for (var i = 0; i < values.length; i++) {
      values[i] = +values[i];
    }

if (div.classList.contains("time-board-input")) {
      if (values.length == 7) {
        for (var j = 0; j < 7; j++) {
          wapper += '<div class="time-bar" value="' + j + '"><div class="time-slot" style="width: 10%">' + days[j] + '</div>';
          for (var k = 0; k < 32; k++) {
            if ((values[j] >> k) & 0x1) {
              wapper += slotunit('green', k, true);
            } else {
              wapper += slotunit('red', k, true);
            }
          }
          wapper += '</div>';
        }
        wapper += '<input type="text" name="'+div.getAttribute('inputname') +'" value="' + div.getAttribute("value") + '" hidden>';
        div.innerHTML = wapper;
      }
    } else {
      if (values.length == 7) {
        for (var j = 0; j < 7; j++) {
          wapper += '<div class="time-bar"><div class="time-slot" style="width: 10%">' + days[j] + '</div>';
          for (var k = 0; k < 32; k++) {
            if ((values[j] >> k) & 0x1) {
              wapper += slotunit('green', k, false);
            } else {
              wapper += slotunit('null', k, false);
            }
          }
          wapper += '</div>';
        }
        div.innerHTML = wapper;
      } else if (values.length == 14) {
        for (var j = 0; j < 7; j++) {
          wapper += '<div class="time-bar"><div class="time-slot" style="width: 10%">' + days[j] + '</div>';
          for (var k = 0; k < 32; k++) {
            var status = (values[j] >> k) & 0x1 + (values[j + 7] >> k) & 0x1;
            if ((values[j] >> k) & 0x1 && (values[j + 7] >> k) & 0x1) {
              wapper += slotunit('green', k, false);
            } else if ((values[j + 7] >> k) & 0x1) {
              wapper += slotunit('yellow', k, false);
            } else {
              wapper += slotunit('null', k, false);
            }
          }
          wapper += '</div>';
        }
        div.innerHTML = wapper;
      }
    }
  }
};

$(document).ready(function() {
  timeslotize($('.time-board'));
  $('.time-slot').tooltip();
});

编译

CSS

.time-board {
  height: 160px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.time-bar,
.time-head {
  height: 20px;
  overflow: hidden;
}

.time-slot {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #000;
  text-align: center;
  background-color: transparent;
  overflow: hidden;
}

.time-slot-primary {
  color: #fff;
  background-color: #337ab7;
}

.time-slot-success {
  color: #fff;
  background-color: #5cb85c;
}

.time-slot-info {
  color: #fff;
  background-color: #5bc0de;
}

.time-slot-warning {
  color: #fff;
  background-color: #f0ad4e;
}

.time-slot-danger {
  color: #fff;
  background-color: #d9534f;
}

.time-board > .time-bar:hover,
.time-board > .time-head > .time-slot:nth-of-type(even),
.time-board > .time-bar:nth-of-type(even) > .time-slot:nth-of-type(1) {
  color: #000;
  background-color: #e5e5e5;
}

.time-board-hover > .time-bar > .time-slot-success:hover,
.time-board-hover > .time-bar > .time-slot-warning:hover,
.time-board-hover > .time-bar > .time-slot-danger:hover {
  -webkit-box-shadow: inset 0px 10px 20px rgba(255, 255, 255, 0.15);
  box-shadow: inset 0px 10px 20px rgba(255, 255, 255, 0.15);
}

HTML

time schedule table，可用于会议 | 场所时间段预定页面。

js, time, slot

编辑器支持Emmet

快捷键

time schedule table，可用于会议 | 场所时间段预定页面。

js, time, slot

HTML5 CSS3使用纵向时间轴（时间线）实现的个人简历模板

CSS3 带悬停信息提示框的水平时间线（紫红色调渐变背景）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：