< head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >业余草jquery日历待办事项 title > < link rel = "stylesheet" href = "css/master.css" type = "text/css" media = "screen" charset = "utf-8" /> < script src = "js/jquery-1.3.min.js" type = "text/javascript" > script > < script src = "js/coda.js" type = "text/javascript" > script > head > < body > < h1 >业余草jquery日历待办事项 h1 > < 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(), //获取日期中的年份 m = today.getMonth(), //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1) d = today.getDate(), //获取日期中的日(方便在建立日期表格时高亮显示当天) firstday = new Date(y, m, 1), //获取当月的第一天 dayOfWeek = firstday.getDay(), //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推) 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("< h1 >" + y + "年" + (m + 1) + "月" + " h1 >< table cellspacing = '0' >"); //打印表格第一行(显示星期) document.write("< tr >< th >日 th >< th >一 th >< th >二 th >< th >三 th >< th >四 th >< th >五 th >< th >六 th > tr >"); var arr = [ 6, 8, 16,18, 26, 28 ]; //有待办事件的日期 for(i = 0; i < str_nums ; i += 1) { //二维数组创建日期表格 document.write('
'); for(k = 0; k < 7 ; k++) { var idx = 7 * i + k; //为每个表格创建索引,从0开始 var date = idx - dayOfWeek + 1; //将当月的1号与星期进行匹配 //索引小于等于0或者大于月份最大值就用空表格代替 (date <= 0 || date > days_per_month[m]) ? date = ' ': date = idx - dayOfWeek + 1; if($.inArray(date, arr)>-1){ document.write('< td class = "date_has_event" >' + date + '< div class = "events" >< ul >' +'< li >< span class = "title" >待办事件1 span >< span class = "desc" >业余草： span >' +' li >< li >< span class = "title" >待办事件2 span >< span class = "desc" >业余草： span >' +' li > ul > div > td >'); }else if(date == d){ document.write('< td class = "today" >' + date + ' td >'); //高亮显示当天 }else{ document.write('< td >' + date + ' td >'); } } document.write(' tr >'); } document.write(' table >'); script > body > html >
如果觉得《待办事项下拉html代码 HTML5 + jQuery 实现日历待办事项demo》对你有帮助，请点赞、收藏，并留下你的观点哦！
