一旦通过，我如何使用JavaScript代码删除日历项？

问题描述 投票：-2回答：1

我使用这个HTML代码来显示我的事件

<style>
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
</style>
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017</p> </b>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018</p> </b>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018</p> </b>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018</p> </b>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

如何使用Javascript使其删除日期后的日期？所以在2017年12月25日中午12点，12月22日的活动将被删除并消失。我使用新的Google协作平台，并想知道这是如何工作的。

javascript calendar today-extension
1个回答
0
投票

给出当前标记的最简单代码比它需要的更复杂，但是使用querySelectorAll和一些数组方法，你可以这样做：

const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.map(({element}) => element.parentElement)
.forEach(x => {
  x.nextElementSibling.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.nextElementSibling.remove();
  x.nextElementSibling.remove();
  x.remove();
});
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</marquee>

如果你将每个“日期”包装在div中，它会变得更容易

const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
Array.from(document.querySelectorAll('marquee>div>p>b'), element => ({
  element, 
  date: dateFromString(element.innerHTML.split(', ')[1])
}))
.filter(x => x.date < Date.now())
.forEach(({element}) => element.parentElement.parentElement.remove());
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/01/2018 </b></p>
<p>No School - Winter Break - New Year</p>
<p></p> <br>
</div><div>
<p><b>Tuesday, 01/02/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Wednesday, 01/03/2018 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div>
<p><b>Monday, 01/15/2018 </b></p>
<p>No School - Martin Luther King Day/MU Day</p>
<p></p> <br>
</div>
</marquee>

如果你向每个div添加一些有用的信息会更容易 - 例如

data-date='12/22/2017'


const dateFromString = s => {
  const [m,d,y] = s.split('/').map(v => parseInt(v, 10));
  return new Date(y, m - 1, d, 0, 0, 0);
};
document.querySelectorAll('marquee>div').forEach(element => {
    if (dateFromString(element.dataset.date) < Date.now()) {
        element.remove();
    }
});
.html-marquee {
  height:300px;
  width:160px;
  background-color:#ffffff;
  font-family:Arial;
  font-size:14px;
  color:#005cb9;
  border-width:4;
  border-style:solid;
  border-color:#ffffff;
}
<marquee class="html-marquee" direction="up" behavior="scroll" scrollamount="4">
<div data-date='12/22/2017'>
<p><b>Friday, 12/22/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/25/2017'>
<p><b>Monday, 12/25/2017 </b></p>
<p>No School - Winter Break - Christmas</p>
<p></p> <br>
</div><div data-date='12/26/2017'>
<p><b>Tuesday, 12/26/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/27/2017'>
<p><b>Wednesday, 12/27/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/28/2017'>
<p><b>Thursday, 12/28/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div><div data-date='12/29/2017'>
<p><b>Friday, 12/29/2017 </b></p>
<p>No School - Winter Break</p>
<p></p> <br>
</div>
</marquee>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.