`
xuantian868
  • 浏览: 31241 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

画出一年的日历

J# 
阅读更多
<html>
<head>
    <title></title>
    <script>
    	function getDayAry(y,m){
    		
    		
    	 var mvArray = [];
			  var dayOfFirstDay = new Date(y, m, 1).getDay();//0:天;1:一;2:二;6:星期六
			  var daysOfMonth = new Date(y, m + 1, 0).getDate();
			  //alert(dayOfFirstDay+","+daysOfMonth);
			  for (var i = 0; i < 42; i++) {
			    mvArray[i] = "&nbsp;";
			  }
			  for (var i = 0; i < daysOfMonth; i++){
			    mvArray[i + dayOfFirstDay] = i + 1;
			  }
			  //alert(mvArray);
  			return mvArray;	
  			
    	}	
    	function draw(){
    	
    		var str="<table cellpadding='3' cellspacing='1'><tr>";
    		for(var L=0;L<12;L++){
    				var ary=getDayAry(2009,L);
    				var m=L>9?(L+1):("0"+(L+1));
    				//alert(m);
    			if(L%3==0&&L!=0){
    				str=str+"</tr><tr>";	
    			}
    			 str=str+"<td>";
    			 str=str+"<table><tr><td colspan='7' align='center'>"+(L+1)+"月</td></tr><tr><td>天</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>";
		    		str=str+"<tr>";
		    		for(var i=0;i<ary.length;i++){
		    			
		    			
		    			if(i%7==0&&i!=0){
		    				str=str+"</tr><tr>";	
		    			}	
		    			if(ary[i]!="&nbsp;"){
		    				str=str+"<td><input type='checkbox' name='dayChk' value='2009"+m+ary[i]+"' week='"+(i%7)+"'>"+ary[i]+"</td>";	
		    			}else{
		    				str=str+"<td>"+ary[i]+"</td>";	
		    			}
		    			
		    		}
    				str=str+"</table>";
    			 str=str+"</td>";
    			 
    		}
    		str=str+"</tr></table>";
    		alert(str);
    		document.getElementById("div1").innerHTML=str;
    	}
    	
    	function chkAll(d){
    		//alert(d);
    		var chkAll=document.getElementById("chkAll"+d);    		
    		var chks=document.getElementsByTagName("input");
    		var flag=chkAll.checked;
    		alert(chks.length);
    		for(var j=0;j<chks.length;j++){
    			if(chks[j].type=="checkbox"&&chks[j].week==d){
							chks[j].checked=flag;
					}	
    		}
    		
    	}
    	
    	function getP(){
    		//得到页面上所有的input元素
    		var chks=$('input');
    		alert(chks.length);//得到所有input元素的个数    		
    	}
    </script>
</head>
<body onload="draw()">
						星期六<input type="checkbox" onclick="chkAll(6)" id="chkAll6">
						星期天<input type="checkbox" onclick="chkAll(0)" id="chkAll0">
            <input type="text" value="aaaaaaaa" id="tx1">
            <div id="div1"></div>
            
</body>
</html>


设置某个checkbox处于选中状态checked
设置某个checkbox处于不可编辑状态checked
年也可以设置为选择的,这里暂时写成2009.
分享到:
评论

相关推荐

    js酒店价格日历_js门票价格日历_javascript价格日历

    详细请参考驴妈妈 酒店和门票的价格日历。 index.html 入口文件 data.php 包含一个价格日历生成类和 一些实例 product.php ajax产品的json格式 style 样式和js文件 说明: 此程序中js是驴妈妈上的,我做了些修改,...

    手机滚动展示一年的价格日历

    在开发一个手机滚动展示一年价格的日历应用时,我们需要关注多个关键知识点,这些知识点涵盖了界面设计、数据处理、用户交互等多个方面。以下是针对这个项目的一些详细说明: 首先,我们要实现的是一个模仿iOS日历...

    ios-Calendar-swift.zip

    同时,使用`UIPresentationController`创建弹窗效果,可以实现从底部滑出或全屏显示的动画。 2. **Core Data**:尽管描述中没有明确提及,但万年历可能使用了Core Data来存储用户的选择或者日历相关的数据,以便在...

    年日历实现,维护工作日和休息日,初始化法定节假日

    在IT行业中,构建一个年日历系统是一项常见的需求,尤其对于企业管理、项目规划以及时间跟踪等应用场景至关重要...通过合理的数据结构和交互设计,我们可以构建出一个功能强大、易用的年日历应用,满足各种场景的需求。

    可折叠的日历控件Calendar

    在传统的日历视图中,用户通常只能看到一个月或一年的视图,而可折叠日历允许用户通过展开或折叠来查看更长或更短的时间跨度。这种控件设计不仅节省了屏幕空间,还提供了更好的用户体验,使得查看和管理日程变得更为...

    JavaScript编写的三个漂亮日历

    JavaScript是一种广泛应用于网页和应用程序开发的脚本语言,尤其在创建动态、交互式的网页内容方面具有强大能力。...学习和掌握这些知识,不仅能够制作出美观的日历,还能进一步提高JavaScript开发技能。

    jQuery全年日历工作考勤表代码.zip

    1. **日历显示**:利用amazeUI.js的日历组件,可以轻松展示一个月或者一年的日历视图。日历中的每一天都是一个可交互的元素,可以通过CSS样式来区分工作日、休息日以及节假日。 2. **考勤标记**:在特定日期上添加...

    jQuery实现的日历

    2. **HTML结构**:创建日历所需的HTML结构,通常包括一个容器元素,用于展示月份和日期,以及可能的导航按钮(上一个月、下一个月、上一年、下一年)。 3. **CSS样式**:为了使日历看起来美观,需要编写CSS来定义...

    结合swiper插件做的手机端可滑动日历

    在移动应用开发中,日历组件是一个非常常见且实用的功能,尤其在事件管理、时间安排...尽管本例中的代码可能由于作者的技术限制而显得有些混乱,但通过不断学习和实践,可以逐步改进并构建出更加高效和健壮的日历组件。

    java小程序(日历记事等功能)

    2. **日历视图**: 日历视图可以显示一个月或一年的日程,用户可以在此添加、编辑和删除记事。实现这一功能可能需要自定义组件或使用现有的开源库,如JCalendar。 3. **记事管理**: 记事数据通常存储在一个列表或...

    滑动控件显示一整年日历

    滑动控件显示一整年日历是一种常见的UI设计...以上就是滑动控件显示一整年日历的相关技术细节,通过这些知识点的组合应用,可以构建出高效、易用的日历显示功能。在实际开发过程中,还需要根据具体需求进行调整和优化。

    Calendar年日历

    这类应用通常具有用户友好的界面,允许用户方便地查看和管理一年内的日期,包括节假日、纪念日和其他重要事件。在Android平台上,这种年日历功能可能是一个独立的应用程序,或者是系统内置日历应用的一个扩展功能。 ...

    js日历控件.rar

    5. **循环与条件判断**:在生成日历的过程中,需要使用循环(for或while)遍历一个月或一年的日期,并根据日期的属性(如星期几、是否为当前月的日期等)进行条件判断,以决定日期元素的显示方式。 6. **用户体验...

    年历 周历 日历

    对于年历和周历的显示,可能需要编写函数来生成一年或一周的日历视图。 6. **用户界面设计**:良好的用户界面设计是关键,包括清晰的布局、直观的交互以及一致的视觉风格。设计师可能会参考现有的移动日历应用,以...

    2020年全年日历PPT模板.pptx

    2020年全年日历PPT模板提供了一种便捷的方式,帮助用户快速创建具有吸引力的日历布局,以便规划和展示一年的活动、项目或者工作计划。 在制作2020年全年日历PPT模板时,有几个关键知识点是必须掌握的: 1. **设计...

    C写了一个简单的1900-2100日历

    - 循环结构:for和while循环将用于遍历每一年、每个月和每一天。 - 函数定义:为了组织代码,可能会定义多个函数,如打印月份、计算闰年等。 2. **日期计算**: - 年份判断:根据公历规则,1900年不是闰年,而...

    一款不错的安卓日历控件实现效果

    首先,这个项目的核心在于自定义的日历视图控件(MyCalendarView),它提供了基本的日历功能,包括显示当前月份的日期矩阵,以及切换至上一年、上一月、下一年和下一月的能力。开发者通过监听这些按钮的点击事件,...

    android 自定义GridView实现时间日程表课程表、实现上一年下一年、上个月下个月等功能

    根据当前时间,找出对应的单元格并进行高亮处理,例如改变背景色或字体颜色。 5. **兼容性**:为了确保应用在不同版本的Android系统上都能正常运行,需要考虑API级别的兼容问题。可以使用`android.support.v7....

    春夏秋冬四季2015年ios风格ppt日历模板.rar

    5. **创意内容规划**:对于企业或个人来说,可以借鉴这个模板来规划一年的活动、工作计划或营销策略,根据不同的季节调整内容。 6. **适应性设计**:理解如何使设计适应不同的场合和受众,如商业报告、教学课件、...

    2020年中国风日历模板

    1. **2020年日历**:2020年是公历中的一个普通年,拥有365天,按照中国农历,这一年包含了春节、元宵节、清明节、端午节、中秋节等传统节日。设计2020年日历时,应考虑这些特殊日期,并结合中国元素进行标注,如用...

Global site tag (gtag.js) - Google Analytics