我有一個使用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>
沒有用戶採取什麼樣的行動又是什麼的JavaScript嗎?例如,當用戶點擊一個日期時,它會像7月1日和7月23日那樣突出顯示,就像這個日曆一樣。或者,如果點擊時突出顯示日期,它將失去亮點 –
javascript是用於顯示當前日期的實時日曆,並且日期1和23具有該事件,並且當用戶將鼠標懸停在其上時,事件會彈出日期「23」的情況。現在我想讓我的日曆自動更新當前日期> –