模拟日历记事本

最新推荐文章于 2021-06-14 12:09:09 发布

weixin_30877227

最新推荐文章于 2021-06-14 12:09:09 发布

阅读量454

点赞数

文章标签： java 移动开发 xhtml

原文链接：http://www.cnblogs.com/humiaoicm/archive/2012/11/11/2765519.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试JSON</title>
<link rel="stylesheet" type="text/css" href="../css/rest.css"/>
<style>
.list{ width:250px; float:left; border:1px solid #CCC; margin-left:20px; margin-top:20px;}
.list h3{ font-size:16px; color:#666; border-bottom:1px solid #ccc; padding:3px 10px;}
.listUl{
	height:180px;/*设置每个小方框的高度*/
	overflow:auto;
}
.listTxt{line-height:22px; font-size:12px; color:#999; padding:0 20px;}
#main{ width:1100px; margin:0 auto;}
</style>
<script type="text/javascript" language="javascript" src="../js/jQuery-1.7.1.js"></script>
<script type="text/javascript" language="javascript" src="../js/data.js"></script>
<script type="text/javascript" language="javascript">
function addListHtml(){
	//a就是年的集合
	var buf='';
	var yearBuf='',monthBuf='',dayBuf='';
	for(var i=0;i<a.length;i++){
		var b=a[i].con;//月份的集合
		
		for(var j=0;j<b.length;j++){
			var c=b[j].con;//天的集合
			
			for(var k=0;k<c.length;k++){
				var d=c[k].con;//数据的集合
				buf += '<div class="list"><h3>'
					+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
				buf += '<ul class="listUl">';
				
				for(var m=0;m<d.length;m++){
					buf += '<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
				}
				buf+='</ul></div>'
			}
		}
	}
	$("#main").append(buf);
	var list=$(".list");
	if(list.length>minCount){
		list.hide();
		for(var i=list.length-minCount;i<list.length;i++){
			list.eq(i).show();
		}
	}
}
$(function(){
	addListHtml();
	addYear();
	$("select[name=year]").bind({
		change:function(){
			addMonth($(this).val());
		}
	});
	$("select[name=month]").bind({
		change:function(){
			addDay($("select[name=year]").val(),$(this).val())
		}
	})
	$("input[name=search]").click(function(){doSearch()});
});
function addYear(){
	var yearBuf='<option value="">==请选择年==</option>';
	for(var i=0;i<a.length;i++){
		yearBuf +='<option value="'+a[i].year+'">'+a[i].year+'</option>';
	}
	$("select[name=year]").html(yearBuf);
};
function addMonth(obj){
	var monthBuf='<option value="">==请选择月==</option>';
	for(var i=0;i<a.length;i++){
		if(a[i].year==obj){
			var b=a[i].con;
			for(var j=0;j<b.length;j++){
				monthBuf +='<option value="'+b[j].month+'">'+b[j].month+'</option>';
			}
		}
	}
	$("select[name=month]").html(monthBuf);
}
function addDay(obj1,obj2){
	var dayBuf='<option value="">==请选择日==</option>';
	for(var i=0;i<a.length;i++){
		if(a[i].year==obj1){
			var b=a[i].con;
			for(var j=0;j<b.length;j++){
				if(b[j].month==obj2){
					var c=b[j].con;//天的集合
					for(var k=0;k<c.length;k++){
						dayBuf +='<option value="'+c[k].day+'">'+c[k].day+'</option>';
					}
				}
			}
		}
	}
	$("select[name=day]").html(dayBuf);
}
function doSearch(){
	var errorMsg=''
	if($("select[name=year]").val()==''){
		errorMsg="请选择年份";
		alert(errorMsg);
		return false;
	}
	if($("select[name=month]").val()==''){
		errorMsg="请选择月份";
		alert(errorMsg);
		return false;
	}
	
	var searchyear=$("select[name=year]").val();
	var searchmonth=$("select[name=month]").val();
	var searchday=$("select[name=day]").val();
	
	var searchBuf='';
	for(var i=0;i<a.length;i++){
		if(a[i].year==searchyear){
			var b=a[i].con;
			for(var j=0;j<b.length;j++){
				if(b[j].month==searchmonth){
					var c=b[j].con;//天的集合
					if(searchday!=''){
						//当有天的条件的时候
						for(var k=0;k<c.length;k++){
							if(c[k].day==searchday){
								var d=c[k].con;//数据的集合
								searchBuf += '<div class="list"><h3>'+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
								searchBuf += '<ul class="listUl">';
								for(var m=0;m<d.length;m++){
									searchBuf +='<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
								}
							}
						}
					}else{
						for(var k=0;k<c.length;k++){
							var d=c[k].con;//数据的集合
							searchBuf += '<div class="list"><h3>'+a[i].year+'年'+b[j].month+'月'+c[k].day+'日</h3>';
							searchBuf += '<ul class="listUl">';
							
							for(var m=0;m<d.length;m++){
								searchBuf += '<li class="listTxt">'+(m+1)+'、'+d[m]+'</li>';
							}
							searchBuf+='</ul></div>'
						}
					}
				}
			}
		}
	}
	$("#main").html(searchBuf);
}
</script>
</head>

<body>
	<div class="search">
    	<select name="year">
        	<option value="">==请选择年==</option>
        </select>
        <select name="month">
        	<option value="">==请选择月==</option>        	
        </select>
        <select name="day">
        	<option value="">==请选择日==</option>        	
        </select>
        <input name="search" type="button" value="搜索" />
    </div>
	<div id="main" class="clearFix">
    
    </div>
</body>
</html>

//配置信息
var minCount=30;//日历显示最小的个数
//数据信息
var a=[
	{"year":"2012","con":[
		{"month":"1","con":[
			{"day":"1","con":[
				"【上午】领导A参领导A参领导A参领导A参领导A参领导A参观",
				"【上午】领导A参观",
				"【下午】领导A参观"
			]}
		]},
		{"month":"2","con":[
			{"day":"1","con":[
				"【上午】领导A参观",
				"【上午】领导A参观",
				"【下午】领导A参观"
			]}
		]}
	]}
]

转载于:https://www.cnblogs.com/humiaoicm/archive/2012/11/11/2765519.html

weixin_30877227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟日历记事本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...
复制链接

扫一扫