[英]Live Calendar using Javascript ( not any other language)
我有一个仅使用html和css创建的事件日历的基本设计。 为事件日期指定了不同的背景，并且只要用户将鼠标悬停在该日期上，事件就会弹出。 我有这一切。 我真正的问题是拥有一个实时日历，该日历可以在不更改当前设计的情况下进行自我更新（日期）。 除javascript外，将不使用其他语言。
请帮我。
table{ font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-style: italic; font-size: 14px; border-radius: 10px; } td.effect { width:23px; height:23px; border-radius:50%; border:none; } table, td.header { 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 { border-radius:50%; background-color:#A29F9F; border:none; } td.event:hover { color:#F7EFEF; background-color:#000000; }
<!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> <tr align="center"> <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>
更新：我对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++){ darray = dates[di].split("-"); if ( curYear == darray[0] && curMo == darray[1]){ for(ci=0; ci<cl; ci++) { cur = cells[ci]; if(cur.innerHTML == darray[2]){ cur.className += " event"; // you can take out the '+' if you want } } } } dateObj = new Date(); todayMonth = pad(dateObj.getUTCMonth() + 1); //months from 1-12 todayDay = pad(dateObj.getUTCDate()); todayYear = dateObj.getUTCFullYear(); if ( curYear == todayYear && curMo == todayMonth){ for(i=0; i<cl; i++) { cur = cells[i]; if(cur.innerHTML == todayDay){ cur.className += " today"; // you can take out the '+' if you want } } } function pad(x){ // add leading zeros return (x.length < 2)? "0" + x: x; }
table{ font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-style: italic; font-size: 14px; border-radius: 10px; } td.effect { width:23px; height:23px; border-radius:50%; border:none; } table, td.header { 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 { border-radius:50%; background-color:#A29F9F; border:none; } td.event:hover { color:#F7EFEF; background-color:#000000; } 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> <tr align="center"> <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>
使用Java或任何其他语言加载和执行jquery和javascript脚本
[英]Loading and Executing the jquery and javascript scripts using Java or any other language
浏览器/选项卡使用javascript（或任何其他语言）关闭检测
[英]Browser/tab close detection using javascript (or any other language)
Regex中是否有一组javascript或任何其他语言的组
[英]Is there a group of groups in Regex in javascript or any other language
什么是后代运算符？ 它是在 javascript 中还是在任何其他语言中？
[英]What is a Descendant operator? Is it in javascript Or in any other language?
如何使用 javascript 编辑和创建文本/pdf 文件（如果不可能，则使用任何其他语言）？
[英]How to edit and create a text/pdf file using javascript(if not possible then any other language)?
如何使用javascript或任何其他合格的语言替换特定元素内的文本？
[英]How to replace text inside specific elements using javascript or any other qualified language?
有没有办法使用Javascript或任何其他网络语言捕获浏览器的音频？
[英]Is there a way to capture a browser's audio using Javascript or any other web language?
如何使用 PHP 或任何其他语言将 javascript 变量值保存在文件中？
[英]How can I save javascript variable value in a file using PHP or any other language?
Javascript Testing Framework是关于测试javascript代码还是使用javascript测试以某种其他编程语言编写的任何应用程序？
[英]Is Javascript Testing Framework about testing javascript code or using javascript to test any application written in some other programming language?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.