javascript - 每次我用 JS 添加一个新的 div 时,网格 div 都会变大
问题描述
每次我将任务添加到我的日历时,我都使用 javascript 添加一个新的 div。目前,每当我添加任务时,div 空间都会变大,日历看起来很尴尬。我对网格还是比较陌生,可以使用一些帮助吗?:)
var button = document.getElementById("save-task")
var closeButton = document.getElementById("close")
var input = document.getElementById("add-new-task")
var startTime = document.getElementById("time-stamp")
var endTime = document.getElementById("time-stamp-finish")
var eventElement = document.querySelectorAll(".event")
var firstEvent = document.getElementById("event-1-1")
var secondEvent = document.getElementById("event-8-1")
var thirdEvent = document.getElementById("event-15-1")
var arrows = document.querySelector('.fas')
var timeInput = document.getElementById("add-time")
var timeBar = document.querySelectorAll(".hours")
var eventDate = document.getElementById("event-date")
var taskEvent = document.createElement('div')
taskEvent.style.background = "#000000"
taskEvent.style.border = "1px solid black"
taskEvent.style.color = "white"
taskEvent.style.padding = "30px"
for (var i = 0; i < eventElement.length; i++) {
eventElement[i].addEventListener('click', () => {
document.getElementById('task-input').classList.toggle('new-task');
console.log(event)
})
}
function removeButton() {
document.getElementById('task-input').classList.toggle('new-task');
}
button.addEventListener('click', () => {
function inputAdd() {
tasksManager.add(input.value)
taskEvent.innerHTML = input.value
}
if (startTime.value === "04:00" && endTime.value === "05:00") {
inputAdd()
firstEvent.appendChild(taskEvent)
secondEvent.style.border = "none"
} else if (startTime.value === "05:00" && endTime.value === "06:00") {
inputAdd()
secondEvent.appendChild(taskEvent)
} else if (startTime.value === "06:00" && endTime.value === "07:00") {
inputAdd()
thirdEvent.appendChild(taskEvent)
}
removeButton()
})
body,
html {
font-family: 'Tomorrow', sans-serif;
}
h1 {
text-align: center;
}
h1 {
animation-duration: 20s;
animation-delay: 0s;
animation-iteration-count: 1;
}
/* The grid */
#day-of-week,
.grid-container-events {
display: grid;
grid-template-columns: repeat(7, 1fr);
cursor: pointer;
}
.day,
.grid-container-events>div {
border: 1px solid grey;
text-align: center;
}
#day-of-week {
padding-left: 57.5px;
}
.grid-container-events>div {
padding: 20px 20px 20px 30px;
cursor: pointer;
}
.new-task {
display: none;
flex-direction: column;
padding: 20px;
}
.fas {
margin-top: 10px;
cursor: pointer;
font-size: 25px;
}
.fas:hover {
transform: scale(1.2);
}
.fa-angle-left {
padding-right: 15px;
}
.full-date {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 30px;
}
#month-today,
#month-seven,
#day-today {
text-align: center;
font-size: 20px;
font-weight: bold;
padding: 10px;
}
.day {
padding: 10px 50px 10px 30px;
}
.hours {
float: left;
}
.hours div {
padding-right: 10px;
padding-bottom: 17.7px;
border-bottom: 2px solid grey;
}
#task-input {
position: absolute;
background-color: black;
border-radius: 20px;
padding: 50px 60px 50px 60px;
float: left;
color: white;
text-align: center;
z-index: 1;
}
#close {
color: white;
font-size: 20px;
background: none;
border: none;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 20px;
outline: none;
margin-left: 250px;
margin-bottom: 30px;
cursor: pointer;
}
#close:hover {
background: white;
color: black;
}
#task-input>div {
padding: 10px;
}
.save-task {
border: 2px solid black;
border-radius: 10px;
padding: 15px;
background: white;
cursor: pointer;
}
.week {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 40px;
}
.week-text,
#year {
padding-top: 5px;
padding-left: 8px;
}
#week {
margin-left: 10px;
background: black;
color: white;
padding: 5px;
}
.side-bar {
float: right;
margin-right: 10px;
border: 2px solid black;
height: 1005px;
width: 380px;
}
<h1 class="animated lightSpeedIn">ProdPlus+ </h1>
<div class="dropdown-menu">
</div>
<div class="full-date">
<i class='fas fa-angle-left' id="prev"></i>
<div id="month-today"></div>
<div id="month-seven"></div>
<div id="day-today"></div>
<div id="date-today"></div>
<i class='fas fa-angle-right' id="next"></i>
</div>
<div class="week">
<div class="week-text">Week</div>
<div id="week"></div>
<div class="week-text">of</div>
<div id="year"></div>
</div>
<div class="new-task" id="task-input">
<button onclick="removeButton()" id="close">x </button>
<p>Did you decide not to suck today? 😁</p>
<div>Task: <input id="add-new-task" type="text"></div>
<div id="add-time">
<label>Time</label>
<select id="time-stamp">
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="05:00">05:00</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
<option value="23:00">23:00</option>
</select>
-
<select id="time-stamp-finish">
<option value="00:00">00:00</option>
<option value="01:00">01:00</option>
<option value="02:00">02:00</option>
<option value="03:00">03:00</option>
<option value="04:00">04:00</option>
<option value="05:00">05:00</option>
<option value="06:00">06:00</option>
<option value="07:00">07:00</option>
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
<option value="20:00">20:00</option>
<option value="21:00">21:00</option>
<option value="22:00">22:00</option>
<option value="23:00">23:00</option>
</select>
</div>
<div id="date-stamp">
Date:
<input type="date" id="event-date" name="bday" max="2030-12-31"><br>
</div>
<button class="save-task" id="save-task" onclick="">Save task</button>
</div>
<div class="side-bar">
<h1>How am I doing this week?</h1>
</div>
<div class="calendar">
<div id="day-of-week">
<div class="day" id="Monday">Monday</div>
<div class="day" id="Tuesday">Tuesday</div>
<div class="day" id="Wednesday">Wednesday</div>
<div class="day" id="Thursday">Thursday</div>
<div class="day" id="Friday">Friday</div>
<div class="day" id="Saturday">Saturday</div>
<div class="day" id="Sunday">Sunday</div>
</div>
<div class="hours">
<div>
<option value="04:00">04:00</option>
</div>
<div>
<option value="05:00">05:00</option>
</div>
<div>
<option value="06:00">06:00</option>
</div>
<div>
<option value="07:00">07:00</option>
</div>
<div>
<option value="08:00">08:00</option>
</div>
<div>
<option value="09:00">09:00</option>
</div>
<div>
<option value="10:00">10:00</option>
</div>
<div>
<option value="11:00">11:00</option>
</div>
<div>
<option value="12:00">12:00</option>
</div>
<div>
<option value="13:00">13:00</option>
</div>
<div>
<option value="14:00">14:00</option>
</div>
<div>
<option value="15:00">15:00</option>
</div>
<div>
<option value="16:00">16:00</option>
</div>
<div>
<option value="17:00">17:00</option>
</div>
<div>
<option value="18:00">18:00</option>
</div>
<div>
<option value="19:00">19:00</option>
</div>
<div>
<option value="20:00">20:00</option>
</div>
<div>
<option value="21:00">21:00</option>
</div>
<div>
<option value="22:00">22:00</option>
</div>
<div>
<option value="23:00">23:00</option>
</div>
<div>
<option value="00:00">00:00</option>
</div>
<div>
<option value="01:00">01:00</option>
</div>
<div>
<option value="02:00">02:00</option>
</div>
<div>
<option value="03:00">03:00</option>
</div>
</div>
<div class="main-grid-container">
<div class="grid-container-events">
<div class="event" id="event-1-1"></div>
<div class="event" id="event-2-2"></div>
<div class="event" id="event-3-3"></div>
<div class="event event-4"></div>
<div class="event event-5"></div>
<div class="event event-6"></div>
<div class="event event-7"></div>
</div>
<div class="grid-container-events">
<div class="event" id="event-8-1"></div>
<div class="event event-9-2"></div>
<div class="event event-10"></div>
<div class="event event-11"></div>
<div class="event event-12"></div>
<div class="event event-13"></div>
<div class="event event-14"></div>
</div>
<div class="grid-container-events">
<div class="event" id="event-15-1"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
<div class="grid-container-events">
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
</div>
</div>
<div id="dates">
</div>
任何帮助,所以每当我添加 div 时,相同的填充仍然会很好
谢谢
解决方案
推荐阅读
- python - 如何用另一个数组中的元素替换数组中的元素?
- angular - 使用角度 8 中的 ng-select 基于动态选择下拉菜单创建动态表单
- javascript - 如何使用 moment.js 格式化 Time Duration
- javascript - 当我在我的 word 插件应用程序中使用 Promise 时出现未定义的错误
- apache-flink - FlinkKafkaConsumer 设置 group.id 消费时无法正常工作
- kubernetes - 如何将命令行参数传递给 kubectl create 命令
- java - 扫描可用 wifi 时出现异常 - java.lang.IllegalStateException:已提交回复
- sqlite - “SET”附近:语法错误,同时尝试设置隔离级别
- windows - 保存/保留在 Windows 10 主机上的 docker 容器中创建的 jupyter 笔记本
- angular - 使用 CustomValueAccessor 在自定义控件中重置反应形式 FormControl / AbstractControl