我正在尝试设置此每日计划程序。我正在9am时段工作。我要发生的事情是该人单击时间右侧的框,输入文本,然后单击“保存”按钮以保存文本并将其显示在该时隙中。
我是否可以仅使用HTML来实现这一目标,还是需要实现JS才能使它正常工作?
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea{
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description{
white-space: pre-wrap;
}
.time-block{
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
.gray {
background-color: gray;
}
.red {
background-color: red;
}
.green{
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="libs/moment.min.js"></script>
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Timeblocks go here -->
<!-- 9am -->
<div class="row">
<div class='col-2 hour'> 9am
</div>
<div class="col-8 description red border-bottom">
<input class="border-0 form-control textarea bg-transparent" type="text" placeholder="Default input">
</div>
<div class="col-2 saveBtn">
<button type="submit" class="btn btn-primary mb-2">Save</button>
</div>
</div>
<!-- 10am -->
<div class="row">
<div class='col-2 hour'> 10am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 11am -->
<div class="row">
<div class='col-2 hour'> 11am
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 12am -->
<div class="row">
<div class='col-2 hour'> 12pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 1pm -->
<div class="row">
<div class='col-2 hour'> 1pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 2pm -->
<div class="row">
<div class='col-2 hour'> 2pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 3pm -->
<div class="row">
<div class='col-2 hour'> 3pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 4pm -->
<div class="row">
<div class='col-2 hour'> 4pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
<!-- 5pm -->
<div class="row">
<div class='col-2 hour'> 5pm
</div>
<div class="col-8 description red">
</div>
<div class="col-2 saveBtn">
</div>
</div>
</body>
</html>
<h1>Work Day Scheduler</h1>
<h3>A simple calendar app for scheduling your work day</h3>
<div class="Scheduler"></div>
24h至AM / PM
转换器:const ampm = h => (h%12||12)+(h<12?'AM':'PM');
使用在浏览器内存中。Window.localStorage读取(并存储)您的
LS
对象
const LS = JSON.parse(localStorage.scheduler||'{}'); // String is now an Object
创建并存储作为JS字符串HTML模板
const template_schedule = h => `<div class="Schedule">
<div class="Schedule-time">${ampm(h)}</div>
<textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea>
<div class="Schedule-save">SAVE</div>
</div>`;
并在给定开始时间Element.insertAdjacentHTML
和结束时间from
小时的情况下,使用to
将字符串附加到DOM中:
for (let h=from; h<=to; h++) { EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h)) }
现在是有趣的部分。上的保存!可以通过在文本区域之外单击“保存”元素或其他任何位置来使文本区域模糊。因此,它将在任何情况下都有效。 (通过使用CSStextarea模糊
:focus
和相邻的同级组合器+
显示透明的“ SAVE”文本)const save = ev => {
const h = ev.target.getAttribute('data-h'); // Get the hour
LS[h] = ev.target.value; // Update Object
localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string
};
EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => {
el.addEventListener('blur', save);
});
实时示例:由于StackOverflow沙盒,实时代码段iframe和localStorage将不起作用-转到此jsFiddle DEMO
const from = 9; // use 24h format here const to = 17; // use 24h format here // Use window.localStorage to retrieve and store your data object as string const LS = JSON.parse(localStorage.scheduler||'{}'); // now an Object const EL_scheduler = document.querySelector('.Scheduler'); const ampm = h => (h%12||12)+(h<12?'AM':'PM'); const template_schedule = h => `<div class="Schedule"> <div class="Schedule-time">${ampm(h)}</div> <textarea class="Schedule-desc" data-h="${h}">${LS[h]||''}</textarea> <div class="Schedule-save">SAVE</div> </div>`; // Populate Scheduler for (let h=from; h<=to; h++) { EL_scheduler.insertAdjacentHTML('beforeend', template_schedule(h)) } // Logic to save the data: // On textarea blur Event - save the data by reading the data-h value const save = ev => { const h = ev.target.getAttribute('data-h'); // Get the hour LS[h] = ev.target.value; // Update Object localStorage.scheduler = JSON.stringify(LS); // Store into localStorage as string }; EL_scheduler.querySelectorAll('.Schedule-desc').forEach(el => { el.addEventListener('blur', save); });
/*QuickReset*/ *{margin:0;box-sizing:border-box;} body {font: 16px/1.4 sans-serif; color:#555;} h1, h3 {text-align:center; font-weight:300;} .Scheduler { width: calc(100% - 40px); max-width: 500px; margin: 1em auto; } .Schedule { border-top: 1px dashed #aaa; display: flex; padding: 2px 0; } .Schedule > *{ padding: 0.5em 0.8em; } .Schedule-time { width: 70px; text-align: right; } .Schedule-desc { flex: 1; font: inherit; min-height: 70px; resize: vertical; background: #eee; border: none; border-right: 1px solid #555; } .Schedule-desc:focus { outline: none; background: #cbe8ef; } .Schedule-desc:focus+.Schedule-save{ color: #fff; /* Show the SAVE text on textarea :focus */ } .Schedule-save { color: transparent; background: #06AED5; border-radius: 0 1em 1em 0; display: flex; align-items: center; user-select: none; }
<h1>Work Day Scheduler</h1> <h3>A simple calendar app for scheduling your work day</h3> <div class="Scheduler"></div>