javascript - 使用 javascript 无需手动编辑代码即可更新公告板

Question

有没有一种方法可以在不手动编辑代码的情况下更新用 HTML 和 CSS 编码的公告板。我的公告板将发布有关即将发生的事件或维护的更新。如果我手动执行此过程，我将检查我的 outlook 电子邮件，如果有更新，我将手动将其放入源代码中，然后保存。

下面是我的公告板的示例代码

#maincontainer {
width: 70%;
height: 55em;
background-color: #0175c9;
margin-left: 1.5%;
}

#upcomingActivitiesTitle {
text-align: center;
color: white;
font-size: 25pt;
font-family: arial;
letter-spacing: 2px;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
position: relative;
top: 10%;
}

#container {
width: 90%;
height: 35em;
margin-left: 5%;
overflow: hidden;
position: relative;
top: 15%;
}

#subcontainer {
position: relative;
width: 100%;
height: 25em;
margin: auto;
}

#patching {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 20pt;
}

#patchingDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}

#networkMaintenance {
width: 80%;
margin: auto;
background-color: #234090;
padding: 0.1em;
color: white;
text-align: center;
font-family: arial;
font-size: 20pt;
}

#networkMaintenanceDesc {
width: 80%;
margin: auto;
color: white;
font-family: arial;
}

#container #subcontainer {
  animation: slide 17s 2s infinite;
}

@keyframes slide {
  0% {margin-top: 0;}
  10% {margin-top: -10em;}
  20% {margin-top: -17em;}
  30% {opacity: 1;}
  40% {margin-top: -33em;}
  41% {opacity: 0;}
  61% {opacity: 0;}
  62% {opacity: 1;}
  63% {margin-top: 33em;}
  80% {margin-top: 20em;}
  90% {margin-top: 10em;}
  100% {margin-top: 0;}

}

<div id="maincontainer">
      <div id="upcomingActivitiesTitle">Upcoming Activities</div>
      <div id="container">
         <div id="subcontainer">
            <br/>
            <br/> 
            <div id="patching">Network Maintenance</div>
            <div id="patchingDesc"> 
               <b>June 17, 1:00AM to June 18, 1:00AM UTC - Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance</b></div>
            <br/> 
            <div id="networkMaintenance">Network Maintenance 2</div>
            <div id="networkMaintenanceDesc"> 
               <b></b>This June 17, 3:00AM to 6:00AM UTC - Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance</div>
            <br/> 
            <div id="networkMaintenance">Network Maintenance 3</div>
            <div id="networkMaintenanceDesc"> 
               <b>This June 17, 1:00AM to 2:00AM UTC - Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance Network Maintenance </b></div>
         </div>
      </div> 
   </div>

Answer 1

如果您的意思是您想让用户向您提交某种更新并自动显示在您的网站上，我建议您使用 MYSQL 数据库来保存所有即将发生的事件，并将它们显示在您的页面上。

我会创建一个表单，在提交时用日期、标题和事件描述填充数据库中的一个表。然后，您可以将其以指定格式输出到您网站的另一部分。