精华内容
下载资源
问答
  • HTML 日历

    2020-04-14 17:50:26
    HTML实现日历编写 输出效果展示 HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...

    HTML实现日历编写

    输出效果展示

    在这里插入图片描述

    HTML代码
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>test</title>
        <style>
          table {
                    width: 500px;
                    margin: auto;
                    text-align: center;
                    border: 2px solid pink;
          }     
          th,
          td {
              border: 2px solid pink;
              padding:5px
          }  
          .today {
              color: red;
          }
        </style>
        <script>
                //判断当前年份是否是闰年(闰年2月份有29天,平年2月份只有28天)
                function isLeap(year) {
                    return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
                }
                var i, k,
                    //获取今日日期
                    today = new Date(), 
                    //获取年份
                    y = today.getFullYear(), 
                    //获取月份(注意:月份从0开始计算,获取的值比正常月份少1)
                    m = today.getMonth(), 
                    //获取日期中的日(方便在建立日期表格时高亮显示当天)
                    d = today.getDate(), 
                    //获取当月的第一天
                    firstday = new Date(y, m, 1), 
                     //判断第一天是星期几(返回[0-6]中的一个,0代表星期天,1代表星期一,以此类推)
                    dayOfWeek = firstday.getDay(),
                    //创建月份数组
                    days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), 
                     //确定日期表格所需的行数
                    str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);
                document.write("<table cellspacing='0'><tr><td colspan ='7'>" + y + "年" + (m + 1) + "月" + "</td></tr>");
                 //打印表格第一行(显示星期)
                document.write("<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>");
                //二维数组创建日期表格
                for(i = 0; i < str_nums; i += 1) { 
                    document.write('<tr>');
                    for(k = 0; k < 7; k++) {
                    	 //为每个表格创建索引,从0开始
                        var idx = 7 * i + k;
                        //将当月的1号与星期进行匹配
                        var date = idx - dayOfWeek + 1; 
                        //索引小于等于0或者大于月份最大值就用空表格代替
                        (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; 
                         //高亮显示当天
                        date == d ? document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');
                    }
                    document.write('</tr>');
                }
                document.write('</table>');
            </script>
      </head>
      <body>
      <script src="./js/jquery-3.4.1.min.js"></script>
      </body>
    </html>
    
    展开全文
  • Html日历代码

    2017-06-21 21:00:12
    Html日历代码
  • HTML日历源代码

    2016-03-07 21:24:11
    HTML日历源代码
  • 简易html日历

    2018-11-18 20:28:43
    简易html js日历代码
  • 基于Python 3HTML日历生成器。 生成给定年份的单个日历月或一组12个日历月。 调整leap年和系统文件分隔符的差异。
  • html 日历控件

    2014-12-08 12:54:56
    HTML实现的一款简单的日历控件,简单易用
  • javaweb html 日历页面

    2021-04-25 17:23:34
    基于bootstrap 修改fullcalendar.js 实现全页面简约大方日历dome 可自定义添加内容
  • 使用html日历

    2014-07-17 20:31:53
    如何使用html创建日历的源代码,更好的使用
  • 超校准HTML日历热图 描述 交互式R日历热图的名副其实的Mary Poppins。 为什么? 真的不需要Vue或React 对相似的github日历事物不感兴趣 希望能够使用数据框并使小部件为我执行数据整理 想要在列中使用裸名或带...
  • javascript实现的一个日历效果,下载直接运行即可,纯javascript原生实现,简易的日历效果
  • 基于语义的 html 日历 要在控制台中运行应用程序类型: node .\bin\www 示例:C:\Users\Denis\Desktop\shacal-calendar>node .\bin\www 将 MongoDB 设置为服务后运行它:net start MongoDB 并停止它:...
  • 日历与时钟控件的引用html,用于javascript入门与提高的学习与参考
  • CSS+HTML日历制作

    2014-11-19 16:35:29
    用css 和html实现简单的日历制作,代码简单易懂
  • html日历小插件

    2012-06-13 17:16:27
    非常好用的JS日历控件,应用环境为ASP、JSP等等WEB开发。可以自己设定日期范围。
  • jin-calendar是html日历的一句来源 如何使用 将css&javascript导入到jQuery,bootstrap和jin-calendar库 <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css" > <link ...
  • html日历的制作

    2019-12-18 20:01:28
    需前往网站下载FullCalendar.js套件,下载后将fullcalendar文件夹及lib文件夹里的文件复制到html文件所在的文件夹即可。 <! DOCTYPE html> <html> <head> <link href='fullcalendar/...

    需前往网站下载FullCalendar.js套件,下载后将fullcalendar文件夹及lib文件夹里的文件复制到html文件所在的文件夹即可。

    <! DOCTYPE html>
    <html>
    <head>
    <link  href='fullcalendar/fullcalendar/fullcalendar.css'  rel='stylesheet'  />
    <link  href='fullcalendar/fullcalendar/fullcalendar.print.css'  rel='stylesheet'media='print'  />
    <script  src='fullcalendar/lib/jquery.min.js'></script>
    <script  src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
    <script  src='fullcalendar/fullcalendar/fullcalendar.min.js'></script>
    <script>
    
    	$(doucument).ready(function( )   {
    	
    		$('#calendar').fullCalendar( {
    	  	      editable: true,
     		     aspectRatio: 3,
    	defaultView:"agendaWeek",
    	height:600,
    	draggable:ture,
    	weekends: ture,
    	sloMinutes:30,
    	allDayText:"整日".
    	minTime:'9',
    	maxTime:'18',
    	monthNames:['一月‘,’二月‘,‘三月’,’四月‘,’五月‘,’六月‘,’七月‘,’八月‘,’九月‘,’十月‘,’十一月‘,’十二月‘],
    	monthNamesShort:[ '1月’,2月‘,’3月‘,’4月‘,’5月‘,’6月‘,’7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’],
    	dayNames:[‘星期日’,‘星期一’,‘星期二’,‘星期三’,‘星期四’,’星期五‘,‘星期六’],
    	header:{
    		left:  'month,agendaWeek,agendaDay',
    		center:'title',
    		right:'prevYear,prev,today,next,nextYear'
    	},
    	buttonText:{
    		prevYear:'去年',
    		nextYear:'明年‘,
    		today:'今天’,
    		month'月‘,
    		week:'周’,
    		day:'日‘
    	},
    	dayNamesShort:['周日’,‘周一’,‘周二’,‘周三’,‘周四’,‘周五’,‘周六’],
    	titleFormat:{
    		month:'MMMM yyyy',
    		week:"MMM d[yyyy]{'-'[  MMM]  d   yyyy}",
    		day:    'dddd,  MMM   d,  yyyy'
    	},
    	weekMode:'fixed'
              });
    
    
        });
    
    
    </script>
    <style>
    
    
    	body  { 
    		margin-top:  40px;
    		text-align:center;
    		font-size:14px;	
    		font-family:"Lucida  Grande“,Helvetica,Arial,Verdana,sans-serif;
    		}
    
    
    	#calendar{	
    	width:900px;
    	margin:  0  auto;
    	}
    </style>
    </head>
    <body>
    <div  id='calendar'></div>
    </body>
    </html> 
     	
    
    展开全文
  • 纯js+html日历

    2011-08-29 20:39:17
    用javascript+html编写的网页日历。我是在学习的过程中逐步学习并在网上查找资源编写的可供大家一起学习。绝对好东西
  • 为给定的周范围和给定的周数生成一个具有给定周的日矩阵,并在给定的周数内将每一行偏移一周。 如果也给出了文件名,则将生成一个 html 文件
  • 一个不错的html日历组件,有多种皮肤。并且有示例代码..
  • html日历(多样式)

    2010-12-15 15:39:09
    多种日历样式,存HTML代码。可以直接观看
  • Html日历控件

    万次阅读 2009-11-23 17:14:00
    /*新建一个html,把代码拷贝进去,就可以看到效果*/ 万年历查询农历; 阳历; 月历; 节日; 时区; 节气; 八字; 干支; 生肖; gregorian solar; chinese lunar; calendar;" name=keywords>...

     /*新建一个html,把代码拷贝进去,就可以看到效果*/

     

    展开全文
  • 手把手教你做html日历

    千次阅读 2015-12-21 09:10:03
    废话少说,直接上代码:<!DOCTYPE html> <html> 示例 <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script> </head> <bod

    这里写图片描述

    废话少说,直接上代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title>示例</title>
            <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
        </head>
    
        <body>
            <script type="text/javascript">
                var $$ = function(id) {
    				return "string" == typeof id ? document.getElementById(id) : id;
    			};
    			var Class = {
    				create: function() {
    					return function() {
    						this.initialize.apply(this, arguments);
    					}
    				}
    			}
    			Object.extend = function(destination, source) {
    				for (var property in source) {
    					destination[property] = source[property];
    				}
    				return destination;
    			}
    			var Calendar = Class.create();
    			Calendar.prototype = {
    				initialize: function(container, options) {
    					this.Container = $$(container); //容器(table结构)
    					this.Days = []; //日期对象列表
    					this.SetOptions(options);
    					this.Year = this.options.Year;
    					this.Month = this.options.Month;
    					this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
    					this.onSelectDay = this.options.onSelectDay;
    					this.onToday = this.options.onToday;
    					this.onFinish = this.options.onFinish;
    					this.Draw();
    				},
    				//设置默认属性
    				SetOptions: function(options) {
    					this.options = { //默认值
    						Year: new Date().getFullYear(), //显示年
    						Month: new Date().getMonth() + 1, //显示月
    						SelectDay: null, //选择日期
    						onSelectDay: function() {}, //在选择日期触发
    						onToday: function() {}, //在当天日期触发
    						onFinish: function() {} //日历画完后触发
    					};
    					Object.extend(this.options, options || {});
    				},
    				//上一个月
    				PreMonth: function() {
    					//先取得上一个月的日期对象
    					var d = new Date(this.Year, this.Month - 2, 1);
    					//再设置属性
    					this.Year = d.getFullYear();
    					this.Month = d.getMonth() + 1;
    					//重新画日历
    					this.Draw();
    				},
    				//下一个月
    				NextMonth: function() {
    					var d = new Date(this.Year, this.Month, 1);
    					this.Year = d.getFullYear();
    					this.Month = d.getMonth() + 1;
    					this.Draw();
    				},
    				//画日历
    				Draw: function() {
    					//用来保存日期列表
    					var arr = [];
    					//用当月第一天在一周中的日期值作为当月离第一天的天数
    					for (var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++) {
    						arr.push("&nbsp;");
    					}
    					//用当月最后一天在一个月中的日期值作为当月的天数
    					for (var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++) {
    						arr.push(i);
    					}
    					var frag = document.createDocumentFragment();
    					this.Days = [];
    					while (arr.length > 0) {
    						//每个星期插入一个tr
    						var row = document.createElement("tr");
    						//每个星期有7天
    						for (var i = 1; i <= 7; i++) {
    							var cell = document.createElement("td");
    							cell.innerHTML = "&nbsp;";
    							if (arr.length > 0) {
    								var d = arr.shift();
    								cell.innerHTML = d;
    								if (d > 0) {
    									this.Days[d] = cell;
    									//判断是否今日
    									if (this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())) {
    										this.onToday(cell);
    									}
    									//判断是否选择日期
    									if (this.SelectDay && this.IsSame(new Date(this.Year, this.Month - 1, d), this.SelectDay)) {
    										this.onSelectDay(cell);
    									}
    								}
    							}
    							row.appendChild(cell);
    						}
    						frag.appendChild(row);
    					}
    					//先清空内容再插入(ie的table不能用innerHTML)
    					while (this.Container.hasChildNodes()) {
    						this.Container.removeChild(this.Container.firstChild);
    					}
    					this.Container.appendChild(frag);
    					this.onFinish();
    				},
    				//判断是否同一日
    				IsSame: function(d1, d2) {
    					return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
    				}
    			};
    		</SCRIPT>
    		<style type="text/css">
    			.Calendar {
    				font-family: Verdana;
    				font-size: 12px;
    				background-color: palegreen;
    				text-align: left;
    				margin: 0 auto;
    				width: 90%;
    				height: 620px;
    				padding: 10px;
    				line-height: 1.5em;
    				border: 1px solid red;
    			}
    			.Calendar a {
    				color: #1e5494;
    			}
    			.Calendar table {
    				width: 100%;
    				border: 1px;
    				border-collapse: collapse; //相邻的相邻边被合并
    			}
    			.Calendar table thead {
    				color: blueviolet;
    			}
    			.Calendar table tr {
    				height: 90px;
    			}
    			.Calendar table td {
    				border: 1px solid blue;
    				font-size: 11px;
    				padding: 1px;
    			}
    			.Calendar table tr.tou {
    				height: 40px;
    				text-align: center;
    			}
    			#idCalendarPre {
    				cursor: pointer;
    				float: left;
    				padding-right: 5px;
    			}
    			#toyear {
    				color: green;
    				font-size: 29px;
    				text-align: center;
    				padding-bottom: 15px;
    			}
    			#idCalendarNext {
    				cursor: pointer;
    				float: right;
    				padding-right: 5px;
    			}
    			#idCalendar {
    				margin-top: 50px;
    			}
    			#idCalendar td.onToday {
    				//今天的颜色
    				font-weight: bold;
    				color: red;
    			}
    			#idCalendar td.onSelect {
    				//要选择的颜色
    				font-weight: bold;
    				color: blue;
    			}
    			.AAA{
    				background-color: green;
    			}
    		</style>
    		<div class="Calendar">
    			<div id="idCalendarPre">&lt;&lt;</div>
    			<div id="idCalendarNext">&gt;&gt;</div>
    			<div id="toyear"><span id="idCalendarYear">2008</span><span id="idCalendarMonth">8</span></div>
    			<table border="1px" cellpadding="0" cellspacing="0">
    				<thead>
    					<tr class="tou">
    						<td class="AAA">星期日</td>
    						<td>星期一</td>
    						<td>星期二</td>
    						<td>星期三</td>
    						<td>星期四</td>
    						<td>星期五</td>
    						<td>星期六</td>
    					</tr>
    				</thead>
    				<tbody id="idCalendar">
    				</tbody>
    			</table>
    		</div>
    		<script language="JavaScript">
    			var cale = new Calendar("idCalendar", {
    				SelectDay: new Date().setDate(10), //要选择的日期,可注释
    				//			    onSelectDay: function(o){ o.className = "onSelect"; },   //增加 类
    				onToday: function(o) {
    					o.className = "onToday";
    				},
    				onFinish: function() {
    					$$("idCalendarYear").innerHTML = this.Year;
    					$$("idCalendarMonth").innerHTML = this.Month; //表头年份
    					// 		            var flag = [10,15,20];     //判断选择是不是指定日期
    					//			        for(var i = 0, len = flag.length; i < len; i++){
    					//			            this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
    					//			        }
    				}
    			});
    			$$("idCalendarPre").onclick = function() {
                    cale.PreMonth();
                }
                $$("idCalendarNext").onclick = function() {
                        cale.NextMonth();
                    }
                    //点击表格里面的值
                var tb = document.getElementById('idCalendar');
                tb.onclick = function(e) {
                    //              alert(e.target.innerHTML);     //输出鼠标所点击的格子里面的值
                    //               alert(typeof e.target.innerHTML);    //看一下输出是什么类型
                    if (e.target.innerHTML == "&nbsp;") alert('空');
                    if (e.target.innerHTML !== "&nbsp;")  {
                        var num=e.target.innerText;
                        alert(e.target.innerHTML+":"+e.target.nodeName); 
                        //遍历表格
                          var arr=new Array();
                         for(var i=0;i<tb.rows.length;i++)
                         {
                            for(var j=0;j<tb.rows[i].cells.length;j++)
                            {
                                if(num==tb.rows[i].cells[j].innerText)
                                {
                                    alert(true);
                                }
    
                            }
                         }
    
    
    
                    }
    
                }
    
            </SCRIPT>
        </body>
    
    </html>
    展开全文
  • HTMLCAL 生成带有格式化月历的 HTML 文件,对网页很有用。 您可以选择月份的范围、输出文件的名称以及要包含的星期几。 日历使用嵌入式 CSS 样式表进行格式化,因此很容易对日历的外观进行全局更改。 当我教授 ...
  • js+html 日历和天气预报

    热门讨论 2008-12-03 17:17:04
    本人从网上搜到的一些东西, 经过整合,成了现在的样子。 我是把直接它放在了C:\windows下,然后 在桌面上右键 属性->桌面->自定义桌面->web->新建->C:\windows\wannianli.html 就Ok了! 很实用。
  • //日历打印 function getWeek(date) { //获取星期 return new Array("日", "一", "二", "三", "四", "五", "六")[new Date(date).getDay()]; } function addDays(date,count) { 添加日期 var dd = new Date...
  • 日历控件带各种节日显示,很好用的哦!!!!!!!!!!!!!!!
  • 一个仿苹果风格的漂亮html日历

    千次阅读 2008-09-09 15:18:00
    无意找到个js日历,蛮漂亮的,有点苹果的感觉,下面是个示例 calendar示例 /** * 得到当前时间 yyyy-MM-dd HH:mm:ss 格式 */ function getCurrentTime() { var dateObj = new Date(); 
  • 日历.html

    2008-06-16 10:16:37
    日历.html日历.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,586
精华内容 25,434
关键字:

html日历