写了个三个月的日历
来源：互联网 发布：淘宝上的积分在哪里看 编辑：程序博客网 时间：2024/04/29 08:13
效果图：
HTML文件:
<!DOCTYPE html><html><head lang="en"> <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/Schedule.css"></head><body><div class="top-nav"> <ul> <li> <a> <p><span class="glyphicon glyphicon-menu-left"></span><span>日程安排</span></p> </a> </li> </ul></div><div class="topHeight"></div><div class="schedule"> <div class="scheduleMonth"> <h4 id="tHeader_0"></h4> <table id="tableList_0"> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <div class="scheduleMonth"> <h4 id="tHeader_1"></h4> <table id="tableList_1"> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> <div class="scheduleMonth"> <h4 id="tHeader_2"></h4> <table id="tableList_2"> <tr> <th>周日</th> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div></div><div class="scheduleXx"> <h5>任务信息</h5></div><div id="taskMain_1"> <ul> </ul></div><script src="js/jquery-2.1.3.min.js"></script><script src="js/Schedule.js"></script></body></html>
css样式
.topHeight{ width: 100%; height: 54px;}a:focus { color: #000000; text-decoration: underline;}@media(device-height:667px) and (-webkit-min-device-pixel-ratio:2){ /* 兼容iphone6 */ .top-nav{ height: 45px!important; } .topHeight{ height: 50px!important; } .top-nav a p{ padding-top: 12px!important; font-size: 16px!important; } .taskSearchShow{ width: 30px!important; height: 30px!important; } .top-nav ul li img{ width: 30px!important; }}@media(device-height:736px) and (-webkit-min-device-pixel-ratio:3){ /* 兼容iphone6Plu*/ .top-nav{ height: 45px!important; } .topHeight{ height: 50px!important; } .top-nav a p{ padding-top: 12px!important; font-size: 16px!important; } .taskSearchShow{ width: 30px!important; height: 30px!important; } .top-nav ul li img{ width: 30px!important; }}/*.showSchedule{*/ /*position: fixed;*/ /*display: none;*/ /*z-index: 1;*/ /*width: 90%;*/ /*height: 300px;*/ /*background: rgba(255, 255, 255, 0);*//*}*/.top-nav{ background-color: #222222; box-shadow: 1px 1px 1px #003e71; height: 50px; position: fixed; z-index: 6; width: 100%;}.top-nav a{ /*width: 80px;*/ color: #fff; font-weight: 600; font-size: 15px;}.top-nav a:hover{ text-decoration: none;}.top-nav a p{ width: 120px; padding: 12px 2px;}.top-nav a p span:first-child{ margin-top: 1px;}.top-nav ul{ list-style: none; -webkit-padding-start: 0px;}.top-nav ul li{ float: left;}.top-nav ul li img{ width: 20px; float: right; right: 9px; top:7px; position: fixed;}/*表单*/h4{ -webkit-margin-before: 0.33em; -webkit-margin-after: 0.33em; width: 265px; text-align: center;}table{ border: 0; border-collapse: separate; border-spacing: 0px; border-color: grey;}td{ border-right: 1px solid #474747; border-bottom: 1px solid #474747; padding: 10px; text-align: center; cursor: pointer;}th{ font-size: 12px; font-weight: 400; text-align: center;}td:first-child{ border-left: 1px solid #000000;}.tdBG{ background: #d7d9db;}.tdBGB{ background: #d7d9db !important;}/*表单end*/.schedule{ text-align: center; height: 300px; overflow: hidden; overflow-y: auto; border-bottom: 1px solid #ddd;}.scheduleMonth{ margin-left: 10%;}.monthBg{ background: #66faaa; color: #fff;}.thisMonth{ background: #d84750 !important; color: #fff;}.nTodayBg{ background: #f99f4c; color: #fff;}.scheduleXx{ width: 100%; border-bottom: 2px solid #d84750;}.scheduleXx h5{ margin-top: 5px; margin-bottom: 5px; padding: 3px;}#taskMain_1{ margin-bottom: 10px;}#taskMain_1 ul{ list-style: none; -webkit-padding-start: 0px;}#taskMain_1 ul li{ padding-left: 5px; height: 63px; border-bottom: 1px solid #ddd;}.taskMain_1_list h5{ -webkit-margin-before: 0; padding-top: 10px;}.taskMain_1_list img{ width: 31px;}.taskMain_1_list p{ font-size: 11px; color: #afafaf; height: 17px; width: 100%;}.taskMain_1_list p img{ width: 14px;}.taskMain_1_list p span{ min-width: 100px!important; text-align: left; padding-right: 10%; /*float: right;*/}a{ color: #000;}a:hover{ color: #000; text-decoration: none;}.divFinish{ /*position: absolute;*/ float: right; /*left: 295px;*/ z-index: 3;}js脚本：/** * Created by Administrator on 2015/7/28. */$(function(){ //当前月 var currentDate = new Date();//当前月的日期 var currentYear=currentDate.getFullYear();//当前年 var currentMonth=(currentDate.getMonth()+1);//当前年 currentDate.setDate(1);//当前月第一天 var firstWeekday=currentDate.getDay();//一周的节点// alert(currentMonth); currentDate.setMonth(currentDate.getMonth() + 1); var currentLastDate = new Date(currentDate - 3600000*24);//本月的最后一天// alert(currentDate.getMonth()); $("#tHeader_1").append(currentYear+"年"+currentMonth+"月"); $("#tableList_1").addClass("Month_"+currentMonth);// alert(currentDate.getDate()); //当前月end //上一个月 var beforeDate=new Date(); beforeDate.setFullYear(currentYear,(currentMonth-2),1);//上月的日期// beforeDate.setMonth(beforeDate.getMonth()); var beforeDateWeekday=beforeDate.getDay();//一周的节点 beforeDate.setMonth(beforeDate.getMonth() + 1); //alert(beforeDateWeekday) var beforeLastDate = new Date( beforeDate- 3600000*24);//上月的最后一天 $("#tHeader_0").append(beforeDate.getFullYear()+"年"+beforeDate.getMonth()+"月"); $("#tableList_0").addClass("Month_"+beforeDate.getMonth()); //上一个月end //上上一个月 var beforeBeforeDate =new Date(); beforeBeforeDate.setFullYear(currentYear,(currentMonth-2),1);//上上月的日期 var beforeBeforeLastDate = new Date( beforeBeforeDate - 3600000*24);//上月的最后一天 //上上一个月end //下个月 var nextDate =new Date();//上月的日期 nextDate.setFullYear(currentYear,currentMonth,1);//下月的日期 var nextDateWeekday=nextDate.getDay();//一周的节点 nextDate.setMonth(nextDate.getMonth() +1); // alert(nextDateWeekday) var nextLastDate = new Date( nextDate- 3600000*24);//上月的最后一天 $("#tHeader_2").append(nextDate.getFullYear()+"年"+nextDate.getMonth()+"月"); $("#tableList_2").addClass("Month_"+nextDate.getMonth()); //下个月end showMessage(0,beforeBeforeLastDate,beforeDateWeekday,beforeLastDate);//上一个月 showMessage(1,beforeLastDate,firstWeekday,currentLastDate);//当前月 showMessage(2,currentLastDate,nextDateWeekday,nextLastDate);//下一个月 $(".schedule").scrollTop($(".scheduleMonth").height());//锁定位置 $.post(conn,{GID:GID,TASKUSERID:TASKUSERID},function(data){ //localStorage.taskGroupTaskList_0 = data; data=setTranscoding(data); console.log(data); for(var m=0;m<data.body.rows.length;m++){ var getData=data.body.rows[m]; var Month=getData.ENDDATE.split("-")[1].replace(/0/g,''); var DateNow=getData.ENDDATE.split("-")[2].replace(/0/g,''); if( $(".Month_"+Month+" .td_"+DateNow).hasClass("tdBG")){ //$(".tdBG").addClass("tdBGB"); $(".Month_"+Month+" .td_"+DateNow).addClass("monthBg"); $(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE); $(".tdBG").removeClass("monthBg"); }else{ $(".Month_"+Month+" .td_"+DateNow).addClass("monthBg"); $(".Month_"+Month+" .td_"+DateNow).addClass("Z"+getData.ENDDATE); } //console.log(getData.ENDDATE.split("-")[1].replace(/0/g,'')); //console.log(getData.ENDDATE.split("-")[2]); } }); //今天 var nToday= new Date();// alert("月："+(nToday.getMonth()+1)+"，囸："+nToday.getDate()) $(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).addClass("nTodayBg"); $(".nTodayBg").addClass("thisMonth"); if($(".Month_"+(nToday.getMonth()+1)+" .td_"+nToday.getDate()).hasClass("tdBG")){ $(".tdBG").addClass("tdBGB"); $(".tdBG").removeClass("thisMonth"); $(".tdBG").removeClass("nTodayBg"); } //console.log(nToday.getDate()); //今天end //$(".schedule td").bind("touchstart",function(e){ $(".schedule td").bind("click",function(e){ // e.preventDefault(); //console.log($(this).attr("class")); //console.log($(this).attr("class").split("Z")[1]); $("td").removeClass("thisMonth"); $(this).addClass("thisMonth"); $("#taskMain_1 ul").empty(); if(undefined!=$(this).attr("class").split("Z")[1]){ var END_DATE=$(this).attr("class").split("Z")[1].replace(/ thisMonth/g,''); //console.log(END_DATE); $.post(conn+"",{END_DATE:END_DATE,GID:GID,TASKUSERID:TASKUSERID},function(Schedule){ }); } }); $(".top-nav a:eq(0) p").bind("touchstart",function(e) { e.preventDefault(); timeOutEvent1 = setTimeout(function(){ if(g==3){ location.replace(localStorage.taskGroupUrl+"&g="+g); } clearTimeout(timeOutEvent1);//清除定时器 },100); //location.replace(document.referrer); }); //body: Object //rows: Array[3] //0: Object //ENDDATE: "2015-07-31" //STATUS: "0"// alert(beforeDateWeekday);// alert(beforeLastDate.getDate());// 当前月});/* @num div的下表 @beforeLastDate 上一个月的最后一天 @firstWeekday 第一天星期几的位置 @currentLastDate 这个月的最后一天 */function showMessage(num,beforeLastDate,firstWeekday,currentLastDate){ $("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").append("1"); $("#tableList_"+num+" tr:eq(1) td:eq("+firstWeekday+")").addClass("td_1"); var BeforeLastDate=beforeLastDate.getDate(); if(firstWeekday>0){ for(var i=1;i<=firstWeekday;i++){ $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").append(BeforeLastDate); $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("tdBG"); $("#tableList_"+num+" tr:eq(1) td:eq("+(firstWeekday-i)+")").addClass("td_"+BeforeLastDate); BeforeLastDate--; } } var k=2; for(var j=(firstWeekday+1);j<=7;j++){ $("#tableList_"+num+" tr:eq(1) td:eq("+j+")").append(k); $("#tableList_"+num+" tr:eq(1) td:eq("+j+")").addClass("td_"+k); k++; }// alert(currentLastDate.getDate()) var m=Math.ceil((currentLastDate.getDate()-(6-firstWeekday))/7); for(var k=0;k<m;k++){ $("#tableList_"+num).append("<tr></tr>"); } var temp=parseInt($("#tableList_"+num+" tr:eq(1) td:eq(6)").text()); for(i=2;i<(m+2);){ for (var j = 0; j < 7; j++){ if(temp<currentLastDate.getDate()) { temp++; $("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='td_"+temp+"'>" + temp + "</td>");// if(temp<6) $("#tableList tr:eq(" + i+ ")").append("<td class='tdBG td_"+i+"'>" + temp + "</td>"); temp1=1; } else{ $("#tableList_"+num+" tr:eq(" + i+ ")").append("<td class='tdBG td_"+temp1+"'>" + temp1 + "</td>"); temp1++; } if(j==6){ i++; } } } $("#tableList_"+num+" tr:eq(1) td").css({"border-top": "1px solid #474747"});// 当前月end}//var timeOutEvent=0;//定时器//function gTouchStart(){// timeOutEvent = setTimeout("longPress()",500);// return false;//};//function longPress(){// timeOutEvent = 0;//}//function gtouchend(){// clearTimeout(timeOutEvent);//清除定时器// if(timeOutEvent!=0){// }// return false;//};//function gtouchmove(){// clearTimeout(timeOutEvent);// timeOutEvent = 0;//};
0 0
- 写了个三个月的日历
- 写了个python生成日历的东东
- 我也写了个日历控件
- 我也写了个日历控件
- 自己写了个JS日历控件与大家分享
- 出来三个月了，随便写点什么
- 写了三个月的网站，拿出来献丑了。欢迎大家多扔板砖！
- 博客写了有两三个月了，，访问量终于到了10000~~~谈一下自己的感想
- 写了一个日历点击的动画效果
- 用jQuery写个简单的日历组件
- 三个月了！
- c#写的日历
- C++写的日历
- Calendar类学习，自己写了个日历查询小程序，供大家学习参考
- java写了个日历，其中遇到坑爹小问题（JTable）
- 梦幻的又过了三个月
- 三个月的实习教会了我什么？
- 写了一个个人桌面日历
- autoCode代码生成器
- C#调用C++方法，C#使用c++方法返回类或结构体
- Path Sum II
- 数据结构-图的创建与遍历
- Android Studio使用教程
- 写了个三个月的日历
- [工具类]基于easyui的页面等待提示层,即mask
- CSS优先级
- 模拟实现请求分页虚存页面替换
- 组件的使用（四）DatePickerDialog和TimePickerDialog的使用
- HDU 5407 CRB and Candies（数论+yy）
- android给View设置上下左右边框
- 用PL/SQL语言编写一程序，实现按部门分段统计各个工资段的职工人数、以及各部门的工资总额
- MySQL安装图解_学习笔记
