使用Javascript（没有任何其他语言）的实时日历

我有一个使用html和css创建的事件日历的基本设计。事件日期已被赋予不同的背景，并且每当用户将鼠标悬停在其上时，事件都会弹出。我有这一切。我真正的问题是有一个更新自己（日期）而不改变当前设计的实时日历。其他语言将不会用于其他语言。使用Javascript（没有任何其他语言）的实时日历

请帮帮我。

table{ 
 
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
 
\t font-style: italic; 
 
\t font-size: 14px; 
 
\t border-radius: 10px; 
 
} 
 

 
td.effect { 
 
\t width:23px; 
 
\t height:23px; 
 
\t border-radius:50%; 
 
\t border:none; \t } 
 
table, td.header { 
 
\t background: #fff; 
 
    background: -webkit-linear-gradient(#fff, #d3d3d3); 
 
    background: -o-linear-gradient(#fff, #d3d3d3); 
 
    background: -moz-linear-gradient(#fff, #d3d3d3); 
 
    background: linear-gradient(#fff, #d3d3d3); 
 
} 
 
td.event { 
 
\t border-radius:50%; 
 
\t background-color:#A29F9F; 
 
\t border:none; 
 
\t } 
 
\t td.event:hover { 
 
\t \t color:#F7EFEF; 
 
\t \t background-color:#000000; 
 
\t \t \t }

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 
<body></body> 
 
<div style="float:left; margin-left:10px;" ><table cellpadding="0px" cellspacing="1" style="border-radius: 10px;" width="200" height="170" border="2" > 
 
    <tbody> 
 
    <tr align="center"> 
 
     <td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>Event Calendar</strong></td> 
 
    </tr> 
 
\t <tr align="center"> 
 
\t <td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>June 2017</strong></td></tr> 
 
    <tr align="center" bgcolor="black" style="color: #fff; font-style: bold;"> 
 
     <td class="effect" width="15">S</td> 
 
     <td class="effect" width="15">M</td> 
 
     <td class="effect" width="18">T</td> 
 
     <td class="effect" width="18">W</td> 
 
     <td class="effect" width="18">T</td> 
 
     <td class="effect" width="18">F</td> 
 
     <td class="effect" width="18">S</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect"><img style="" src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="event" >01</td> 
 
     <td class="effect" >02</td> 
 
     <td class="effect" >03</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >04</td> 
 
     <td class="effect" >05</td> 
 
     <td class="effect" >06</td> 
 
     <td class="effect" >07</td> 
 
     <td class="effect" >08</td> 
 
     <td class="effect" >09</td> 
 
     <td class="effect" >10</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >11</td> 
 
     <td class="effect" >12</td> 
 
     <td class="effect" >13</td> 
 
     <td class="effect" >14</td> 
 
     <td class="effect" >15</td> 
 
     <td class="effect" >16</td> 
 
     <td class="effect" >17</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >18</td> 
 
     <td class="effect" >19</td> 
 
     <td class="effect" >20</td> 
 
     <td class="effect" >21</td> 
 
     <td class="effect" >22</td> 
 
     <td class="event" title= " This is just an example of hovering effect" >23</td> 
 
     <td class="effect" >24</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >25</td> 
 
     <td class="effect" >26</td> 
 
     <td class="effect" >27</td> 
 
     <td class="effect" >28</td> 
 
     <td class="effect" >29</td> 
 
     <td class="effect" >30</td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 
</html>

来源

2017-06-16 Abrar E Anjum

没有用户采取什么样的行动又是什么的JavaScript吗？例如，当用户点击一个日期时，它会像7月1日和7月23日那样突出显示，就像这个日历一样。或者，如果点击时突出显示日期，它将失去亮点 –

javascript是用于显示当前日期的实时日历，并且日期1和23具有该事件，并且当用户将鼠标悬停在其上时，事件会弹出日期“23”的情况。现在我想让我的日历自动更新当前日期> –

更新：我改变了HTML足以让你可以得到的想法。由于原始示例显示7月日历，今天是6月，我更改了日历上的月份名称，但我没有重新排列网格上的日期。

我在CSS中添加了.today类。我不完全确定这是否是OP所要求的。

dates = ["2017-07-01","2017-07-23","2017-08-08","2017-07-12","2017-06-04","2017-06-29"]; // here are all your selected events 
 

 
curYear = "2017"; // when displaying the calendar, set the year and month of the current calendar 
 
curMo = "06"; 
 

 

 
dl = dates.length; 
 

 
cells = document.getElementsByClassName('effect'), 
 
cl = cells.length; 
 

 

 
for(di=0; di<dl; di++){ 
 
\t darray = dates[di].split("-"); 
 
\t if (curYear == darray[0] && curMo == darray[1]){ 
 
\t \t for(ci=0; ci<cl; ci++) { 
 
\t \t  cur = cells[ci]; 
 
\t \t  if(cur.innerHTML == darray[2]){ 
 
\t \t \t \t cur.className += " event"; // you can take out the '+' if you want 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
dateObj = new Date(); 
 
todayMonth = pad(dateObj.getUTCMonth() + 1); //months from 1-12 
 
todayDay = pad(dateObj.getUTCDate()); 
 
todayYear = dateObj.getUTCFullYear(); 
 

 
if (curYear == todayYear && curMo == todayMonth){ 
 
\t \t for(i=0; i<cl; i++) { 
 
\t \t  cur = cells[i]; 
 
\t \t  if(cur.innerHTML == todayDay){ 
 
\t \t \t \t cur.className += " today"; // you can take out the '+' if you want 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
function pad(x){ // add leading zeros 
 
return (x.length < 2)? "0" + x: x; 
 
}

table{ 
 
\t font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
 
\t font-style: italic; 
 
\t font-size: 14px; 
 
\t border-radius: 10px; 
 
} 
 

 
td.effect { 
 
\t width:23px; 
 
\t height:23px; 
 
\t border-radius:50%; 
 
\t border:none; \t } 
 
table, td.header { 
 
\t background: #fff; 
 
    background: -webkit-linear-gradient(#fff, #d3d3d3); 
 
    background: -o-linear-gradient(#fff, #d3d3d3); 
 
    background: -moz-linear-gradient(#fff, #d3d3d3); 
 
    background: linear-gradient(#fff, #d3d3d3); 
 
} 
 
td.event { 
 
\t border-radius:50%; 
 
\t background-color:#A29F9F; 
 
\t border:none; 
 
\t } 
 
\t td.event:hover { 
 
\t \t color:#F7EFEF; 
 
\t \t background-color:#000000; 
 
\t \t \t } 
 
     td.today { background-color: #9ff; }

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 
<body></body> 
 
<div style="float:left; margin-left:10px;" ><table cellpadding="0px" cellspacing="1" style="border-radius: 10px;" width="200" height="170" border="2" > 
 
    <tbody> 
 
    <tr align="center"> 
 
     <td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>Event Calendar</strong></td> 
 
    </tr> 
 
\t <tr align="center"> 
 
\t <td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>June 2017</strong></td></tr> 
 
    <tr align="center" bgcolor="black" style="color: #fff; font-style: bold;"> 
 
     <td class="effect" width="15">S</td> 
 
     <td class="effect" width="15">M</td> 
 
     <td class="effect" width="18">T</td> 
 
     <td class="effect" width="18">W</td> 
 
     <td class="effect" width="18">T</td> 
 
     <td class="effect" width="18">F</td> 
 
     <td class="effect" width="18">S</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect"><img style="" src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
     <td class="effect" >01</td> 
 
     <td class="effect" >02</td> 
 
     <td class="effect" >03</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >04</td> 
 
     <td class="effect" >05</td> 
 
     <td class="effect" >06</td> 
 
     <td class="effect" >07</td> 
 
     <td class="effect" >08</td> 
 
     <td class="effect" >09</td> 
 
     <td class="effect" >10</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >11</td> 
 
     <td class="effect" >12</td> 
 
     <td class="effect" >13</td> 
 
     <td class="effect" >14</td> 
 
     <td class="effect" >15</td> 
 
     <td class="effect" >16</td> 
 
     <td class="effect" >17</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >18</td> 
 
     <td class="effect" >19</td> 
 
     <td class="effect" >20</td> 
 
     <td class="effect" >21</td> 
 
     <td class="effect" >22</td> 
 
     <td class="effect" title= " This is just an example of hovering effect" >23</td> 
 
     <td class="effect" >24</td> 
 
    </tr> 
 
    <tr align="center"> 
 
     <td class="effect" >25</td> 
 
     <td class="effect" >26</td> 
 
     <td class="effect" >27</td> 
 
     <td class="effect" >28</td> 
 
     <td class="effect" >29</td> 
 
     <td class="effect" >30</td> 
 
     <td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div> 
 
</html>

来源

2017-06-16 19:34:48

但这并不显示当前日期兄弟！ –

@AbrarEAnjum BRO！你的问题非常不清楚。如果您想今天突出显示日期，那么因为今天是六月份，所以无法在七月日历上显示。我稍微改了一下你的HTML，但是我没有用正确的日期来匹配日期。现在突出显示六月和当前日期的日期。我编辑了html，css和Javascript –

正好是bro！这是我的错误，我错了，我做了它“七月”，而不是“六月”，为不便带来的不便... –

使用Javascript（没有任何其他语言）的实时日历

回答

相关问题