javascript - 使用 Javascript 的实时日历(不是任何其他语言)-6ren

javascript - 使用 Javascript 的实时日历(不是任何其他语言)

转载作者：行者123 更新时间：2023-11-28 03:33:35

我有一个仅使用 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>

关于javascript - 使用 Javascript 的实时日历(不是任何其他语言)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44596292/

文章推荐： html - ie10选择框显示

文章推荐： c++ - 编译发布

文章推荐： jquery - 在固定宽度DIV中使用拖放表滚动

文章推荐： css - Microsoft Edge 中未显示字体

日历
我想知道是否有一种简单的方法可以为网站制作自上而下的列表日历。我不想使用谷歌日历。我还希望日历像接下来的 5 个事件一样显示并隐藏其余事件，直到显示的 5 个事件已经发生。如果有办法用 jquery
css - Drupal 日历 - 日历 View 在 IE7 中不显示条目
我使用的是 Drupal 日历，它在除 IE7 之外的所有浏览器中都运行良好。在 IE7 中，不会呈现单个日历条目。奇怪的是，如果页面加载缓慢，那么正确着色的表格单元格会出现然后消失。这是我尝试过
javascript - 原型(prototype) JavaScript 日历，可自定义单元格渲染，如 YUI 日历
我已经广泛使用了原型(prototype)，并且不想添加像 YUI 这样的额外框架。我需要一个 JavaScript 日历，它使我能够逐个单元格地自定义日历单元格的呈现。 (用于渲染特定日期的事件、
javascript - Google 日历 API key 不允许通过简单的 GET 请求访问公共(public)日历
通过 Google API 浏览器，我可以使用日历 ID 访问我的公共(public)日历事件列表。所以我知道这是对的 https://developers.google.com/google-app
CakePHP 日历
我是 CakePHP 的新手，想使用这个框架创建一个日历。我遇到了困难，想知道是否有关于如何使用 CakePHP 创建简单日历的教程或指南？最佳答案这里有两个链接:LINK1 (日历助手)和 LI
jquery 日历
我正在寻找一个与 jquery week calendar 具有相同功能的 jquery 日历我浏览了某些日历，但它们不包含jquery周日历的资源这可能是一个愚蠢的问题，但我可以修改jquery
Javascript 日历
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
javascript, 日历
我想问一下我是否可以将日历“移动”到页面的右侧？因为我意识到它只能显示在左手边。我真的不知道如何将它“移动”到右侧...我也不知道如何放入 css 来做到这一点。这是制作日历的代码... //
Javascript 日历
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Java 日历/日期问题
我正在构建一个月份列表，用作 JSP 中表格的标题。我正在做的是比较我从数据库中获得的月份，并一直迭代或“尝试”到那个月。在这种情况下，月份是 11 月问题是我只能从 2012 年 10 月到 2
calendar - 有没有地方提供世界假期？ [日历]
我将开发一个支持多种语言的日历解决方案，但我不确定应该如何根据各个国家/地区的用户需要来管理和显示所有不同的假期信息？有没有地方提供世界假期信息，以便我可以解析和显示？如果没有，您会推荐更好的开发方
带有年份选择和时间选择的 Javascript 日历
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
javascript - 日历，需要一种隐藏周六和周日的方法吗？
我试图让我的应用程序隐藏周末，我的日历存储在一个字符串中，然后打印到innerHTML。我该如何隐藏周六和周日。我的日历打印如下: 周日周一周二周三周四周五周六代码: calendarString
javascript - 日历 - 编辑脚本
日历有可能从星期一开始吗？我在教程中找到了这个，但我的 JS 知识还不够。我改变了一些值但没有成功。 function Calendar(id, year, month) { var elem
iOS 编程 - 日历
我正在创建一个使用 iCal 格式日历的应用程序，很可能由 Google 存储在 Google 日历中。实现这一目标的最佳方法是什么？我真的不想在 iOS 日历应用程序中导入我的日历。我应该解决重
ios - 日历，无论设置如何
在应用程序中，我使用星期几来打开成就。 let date = Date() let dateFormatter = DateFormatter() dateFormatter.dateFormat =
Java 日历 - 设置自定义日期和时间
我正在尝试在java中为日历对象设置自定义日期和时间。我必须创建一个比当前日期多 1 天的日期，并且时间应设置为“X”(例如 05:00:00)。这是我到目前为止所做的: Calendar tomo
java - 日历 <= 另一个日历
while (r.next()) { String rn = r.getString(3); String sqldate = r.getString(2); // database
jQuery 日历 - 突出显示日期
我有一个日历，其中突出显示了一些日期它工作得很好，直到我想突出显示 2013 年 3 月 31 日之后的日期。此后日期就正常显示。有人知道为什么会这样吗？这是我用来突出显示日期的代码 //
java - 闹钟管理器日历
关于报警管理器的问题我有这个代码 Calendar cal = Calendar.getInstance(); cal.add(Calendar.SECOND, 5); Intege

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用 Javascript 的实时日历(不是任何其他语言)