HTML 挑战 - 时隙
[英]HTML challenge - Time slots
问题描述
I need to build something like in the following:
我需要构建如下内容：
This is the structure I built so far:这是我到目前为止构建的结构：
https://codepen.io/orassayag/pen/XWMxWPp https://codepen.io/orassayag/pen/XWMxWPp
But I have difficult times to build the grid.但是我很难建立网格。
This is the code:这是代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
</head>
<body>
<div class="devices-container">
<div class="index">
<div class="index-box head">
Device / Time
</div>
<div class="index-box">
Device 1
</div>
<div class="index-box">
Device 1
</div>
<div class="index-box">
Device 1
</div>
<div class="index-box">
Device 1
</div>
<div class="index-box">
Device 1
</div>
<div class="index-box tail">
Device 1
</div>
</div>
<div class="timeline">
<div id="timetable">
<div class="timetable_content">
<ul class="hours">
<li data-hour="00">
<div class="hour-container">
<div class="time1">00:00</div>
<div class="time2">00:30</div>
</div>
</li>
<li data-hour="01">
<div class="hour-container">
<div class="time1">01:00</div>
<div class="time2">01:30</div>
</div>
</li>
<li data-hour="02">
<div class="hour-container">
<div class="time1">02:00</div>
<div class="time2">02:30</div>
</div>
</li>
<li data-hour="03">
<div class="hour-container">
<div class="time1">03:00</div>
<div class="time2">03:30</div>
</div>
</li>
<li data-hour="04">
<div class="hour-container">
<div class="time1">04:00</div>
<div class="time2">04:30</div>
</div>
</li>
<li data-hour="05">
<div class="hour-container">
<div class="time1">05:00</div>
<div class="time2">05:30</div>
</div>
</li>
<li data-hour="06">
<div class="hour-container">
<div class="time1">06:00</div>
<div class="time2">06:30</div>
</div>
</li>
<li data-hour="07">
<div class="hour-container">
<div class="time1">07:00</div>
<div class="time2">07:30</div>
</div>
</li>
<li data-hour="08">
<div class="hour-container">
<div class="time1">08:00</div>
<div class="time2">08:30</div>
</div>
</li>
<li data-hour="09">
<div class="hour-container">
<div class="time1">09:00</div>
<div class="time2">09:30</div>
</div>
</li>
<li data-hour="10">
<div class="hour-container">
<div class="time1">10:00</div>
<div class="time2">10:30</div>
</div>
</li>
<li data-hour="11">
<div class="hour-container">
<div class="time1">11:00</div>
<div class="time2">11:30</div>
</div>
</li>
<li data-hour="12">
<div class="hour-container">
<div class="time1">12:00</div>
<div class="time2">12:30</div>
</div>
</li>
<li data-hour="13">
<div class="hour-container">
<div class="time1">13:00</div>
<div class="time2">13:30</div>
</div>
</li>
<li data-hour="14">
<div class="hour-container">
<div class="time1">14:00</div>
<div class="time2">14:30</div>
</div>
</li>
<li data-hour="15">
<div class="hour-container">
<div class="time1">15:00</div>
<div class="time2">15:30</div>
</div>
</li>
<li data-hour="16">
<div class="hour-container">
<div class="time1">16:00</div>
<div class="time2">16:30</div>
</div>
</li>
<li data-hour="17">
<div class="hour-container">
<div class="time1">17:00</div>
<div class="time2">17:30</div>
</div>
</li>
<li data-hour="18">
<div class="hour-container">
<div class="time1">18:00</div>
<div class="time2">18:30</div>
</div>
</li>
<li data-hour="19">
<div class="hour-container">
<div class="time1">19:00</div>
<div class="time2">19:30</div>
</div>
</li>
<li data-hour="20">
<div class="hour-container">
<div class="time1">20:00</div>
<div class="time2">20:30</div>
</div>
</li>
<li data-hour="21">
<div class="hour-container">
<div class="time1">21:00</div>
<div class="time2">21:30</div>
</div>
</li>
<li data-hour="22">
<div class="hour-container">
<div class="time1">22:00</div>
<div class="time2">22:30</div>
</div>
</li>
<li data-hour="23">
<div class="hour-container last">
<div class="time1">23:00</div>
<div class="time2">23:30</div>
</div>
</li>
</ul>
<ul class="timeslots">
<li>
<div class="timeslot" data-hour-start="00" data-hour-end="00.5"></div>
</li>
<li>
<div class="timeslot" data-hour-start="00.5" data-hour-end="01"></div>
</li>
<li>
<div class="timeslot" data-hour-start="18" data-hour-end="19"></div>
</li>
<li>
<div class="timeslot" data-hour-start="07.5" data-hour-end="10"></div>
</li>
<li>
<div class="timeslot" data-hour-start="23.5" data-hour-end="24"></div>
</li>
<li>
<div class="timeslot" data-hour-start="23.5" data-hour-end="24"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
<style type="text/css">
.devices-container {
display: flex;
flex-direction: row;
}
.index-box {
height: 70px;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
align-content: center;
flex-direction: row;
justify-content: center;
line-height: 4;
border: 1px #cccccc solid;
border-right: 0px;
border-bottom: 0px;
padding: 1em;
padding-top: 0px;
padding-bottom: 0px;
}
.index-box.head {
line-height: 3;
height: 50px;
border-right: 0px;
border-bottom: 0px;
}
.index-box.tail {
border-bottom: 1px #cccccc solid;
}
#timetable {
width: 100%;
height: auto;
max-width: 768px;
overflow-y: hidden;
border: 1px solid #cccccc;
}
#timetable ul {
padding: 0;
list-style: none;
margin: 0;
}
.timetable_content {
width: 2640px;
}
.device {
display: flex;
flex-direction: row;
width: 110px;
text-align: center;
}
.hours {
width: 2640px;
max-height: 50px;
overflow: hidden;
}
.hours li {
width: 110px;
text-align: center;
float: left;
display: inline-block;
padding: 0px;
}
.hour-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.hours li div {
width: 100%;
height: 56px;
border: 1px solid #cccccc;
border-top: 0px;
line-height: 3;
border-left: 0px;
border-right: 0px;
font-size: .8em;
}
.hours li div .time1 {
border-left: 0px solid #cccccc;
border-right: 1px solid #cccccc;
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 90%);
border-image-slice: 1;
}
.hours li div .time2 {
border-left: 0px solid #cccccc;
border-right: 1px solid #cccccc;
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 1) 90%, rgba(0, 0, 0, 0) 90%);
border-image-slice: 1;
}
.hours li div.last .time2 {
border-left: 0px solid #cccccc;
border-right: 0px solid #cccccc;
}
.timeslots {
width: 2640px;
}
.timeslots li {
border-top: 1px solid #cccccc;
}
.timeslots .timeslot {
height: 70px;
background: #ff0000;
display: block;
}
</style>
<script>
(function() {
var firstHoursLiElWidth = 110;
var hoursItems = 2640;
const halfHourPx = 55;
const timeSlots = document.querySelectorAll('.timeslots li');
for (let i = 0; i < timeSlots.length; i++) {
var element = timeSlots[i].querySelector('.timeslot'),
startDate = element.getAttribute('data-hour-start');
endDate = element.getAttribute('data-hour-end');
let isHalf = false;
let staticStart = startDate;
if (startDate.toString().indexOf('.5') > -1) {
isHalf = true;
staticStart = startDate.toString().replace('.5', '');
}
var hoursInProject = (endDate - startDate);
var startDateEl = document.querySelectorAll(".hours li[data-hour='" + staticStart + "']")[0].getBoundingClientRect().left - 133;
element.style.marginLeft = `${isHalf ? halfHourPx + startDateEl : startDateEl}px`;
element.style.width = `${firstHoursLiElWidth * hoursInProject + (hoursInProject / 1.5)}px`;
}
})();
</script>
</html>
How can I build a grid that I can add rows dynamically and whey will fit the time, and the first column will be sticky, and the rest of the time slots will be horizontal scroll?如何构建一个可以动态添加行并且乳清适合时间的网格，并且第一列将是粘性的，并且时隙的 rest 将是水平滚动？
Can someone please help me?有人可以帮帮我吗？
Thanks.谢谢。
UPDATE 1 Found something fit to my needs, but I can't do it in jQuery:( https://codepen.io/frlinw/pen/JMvXEy更新 1找到了适合我需要的东西，但我不能在 jQuery 中做到：( https://codepen.io/frlinw/pen/JMvXEy
UPDATE 2 I managed to do some improvements in the code, but I'm missing the border between the slots.更新 2我设法对代码进行了一些改进，但我错过了插槽之间的边界。 Any idea how to work around it?知道如何解决它吗？
1 个解决方案
解决方案1
0 已采纳 2021-06-13 05:07:41
I managed to solve the challenge.我设法解决了挑战。
I rebuilt the project completely, made it with divs and flexbox, and filled the slots by using simple JavaScript (instead of using margin-left in the SCSS).我完全重建了项目，使用 div 和 flexbox 完成，并使用简单的 JavaScript 填充插槽（而不是在 SCSS 中使用 margin-left）。
Also, I built the project in React.另外，我在 React 中构建了这个项目。
If anyone is interested, here are the final results:如果有人有兴趣，以下是最终结果：
https://github.com/orassayag/job-interview-exercises/tree/master/jobs/job-13/project https://github.com/orassayag/job-interview-exercises/tree/master/jobs/job-13/project
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML对齐挑战 - HTML alignment challenge
HTML 表挑战 - HTML tables challenge
HTML5 Canvas挑战 - HTML5 Canvas Challenge
jQuery timepicker时隙未禁用 - JQuery timepicker time slots are not disabling
HTML模板上的公牛槽和奶嘴 - HTML Templates Slots and Teats on a bull
另一个HTML / CSS布局挑战 - another HTML/CSS layout challenge
如何根据当前时间禁用时隙 - How to disable time slots according to current time
在JavaScript中根据当前时间禁用时段 - Disable time slots based on current hour in javascript
如何在 HTML 中的模板组件内使用插槽 - How to use slots inside of template components in HTML
带有struts的html和jsp scriptlet中的串联挑战 - concatenation challenge in html and jsp scriptlets with struts
相关标签