使用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（沒有任何其他語言）的實時日曆

回答

相關問題