.net篇(1)--js写日历
【1】html頁面定義日歷div
<div id="calendar" style="width: 100%;"></div>
【2】
$("#calendar").html();
分兩種情況：
全年日歷或選擇某一個月份單獨顯示
if (month_select == "0") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? showCalendar0(year, ?items, ResultList, FalseArr, TrueArr, NoArr);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? else if (month_select != "0") {
? ? ? ? ? ? ? ? ? ? ? ? ? ? showCalendar1(year, month_select, items, ResultList, FalseArr, TrueArr, NoArr);
? ? ? ? ? ? ? ? ? ? ? ? }
【3】全年日歷
showCalendar0(year, ?items, ResultList, FalseArr, TrueArr, NoArr);
function showCalendar0(select_year, ?items, ResultList, FalseArr, TrueArr, NoArr) {
? ? var content = "";
? ??
? ? ? ? for (var i = 0; i < 12; i++) {
? ? ? ? ? ? content += "<div style='float:left;width:25%;border-right:1px solid #dadada' > <div class='c_header'><h1></h1><ol><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ol></div><ul class='c_body' id='ul" + i + "'>";
? ? ? ? ? ? for (var j = 0; j < 42; j++) {
? ? ? ? ? ? ? ? content += "<li></li>";
? ? ? ? ? ? }
? ? ? ? ? ? content += "</ul></div>";
? ? ? ? }
? ??
??
? ? debugger;
? ? $("#calendar").html(content);
? ? var oCal = document.getElementById("calendar");//id='calendar'的對象
? ? var oTitle = oCal.getElementsByTagName("h1");//得到h1標簽元素
? ? var oUl = oCal.getElementsByTagName("ul");//得到ul標簽元素
? ? var addIDArray = new Array();//17
? ? addIDArray.length = 0;//17
? ? //根據傳入的年份重新算時間
? ? var oDate = new Date();//當前時間的日期對象
? ? oDate.setYear(select_year);//setYear()用于設置年份
? ? var iYear = oDate.getFullYear();
? ? //得到年 ? ? ? ? ? ? ? ? ? ? ? ?
? ? var bLeap = false;//是否是閏年
? ? if (iYear % 4 == 0 && iYear % 100 !== 0 || iYear % 400 == 0) bLeap = true;
? ? var addIDArray = new Array();
? ??
? ? ? ? for (var m = 0; m < 12; m++) {
? ? ? ? oDate.setMonth(m);//設置月份（0-11，12個月）
? ? ? ? oDate.setDate(1);//設置一個月的某一天（1-31）
? ? ? ? var iMonth = oDate.getMonth();
? ? ? ? //得到月
? ? ? ? var iDay = oDate.getDay();
? ? ? ? //得到星期幾
? ? ? ? var iSum = 0;?? ?//存本月天數
? ? ? ? oTitle[m].innerHTML = iYear + "年" + (iMonth + 1) + "月"; //第一個h1標簽元素（*年*月）
? ? ? ??
? ? ? ? switch (iMonth + 1) {
? ? ? ? ? ? case 1:
? ? ? ? ? ? case 3:
? ? ? ? ? ? case 5:
? ? ? ? ? ? case 7:
? ? ? ? ? ? case 8:
? ? ? ? ? ? case 10:
? ? ? ? ? ? case 12:
? ? ? ? ? ? ? ? iSum = 31;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 4:
? ? ? ? ? ? case 6:
? ? ? ? ? ? case 9:
? ? ? ? ? ? case 11:
? ? ? ? ? ? ? ? iSum = 30;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? if (bLeap) iSum = 29;
? ? ? ? ? ? ? ? else iSum = 28;
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? ?var aLi = oUl[m].getElementsByTagName("li"); //得到第（m+1）個所有li標簽元素
? ? ? ??
? ? ? ? //初始化一下
? ? ? ? for (var i = 0; i < aLi.length; i++) {//
? ? ? ? ? ? aLi[i].innerHTML = "";//清除內容
? ? ? ? ? ? aLi[i].style.height = "40px";
? ? ? ? ? ? aLi[i].className = "";
? ? ? ? }
? ? ? ? var month = m < 9 ? "-0" + (m + 1) : "-" + (m + 1);
? ? ? ? for (var i = 1; i <= iSum; i++) {
? ? ? ? ? ? var day = i < 10 ? "-0" + i : "-" + i;
? ? ? ? ? ? var addID = iYear + month + day;
? ? ? ? ? ? addIDArray.push(addID);//17 ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? aLi[iDay].setAttribute("id", "a" + addID);?
? ? ? ? ? ? $("#a" + addID).html(i);
? ? ? ? ? ? for (var f in FalseArr) {
? ? ? ? ? ? ? ? if (addID == FalseArr[f]) {
? ? ? ? ? ? ? ? ? ? //['#90ED7D', '#FFBC75', '#999EFF'],
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#FFBC75");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? for (var t in TrueArr) {
? ? ? ? ? ? ? ? if (addID == TrueArr[t]) {
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#90ED7D");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? for (var n in NoArr) {
? ? ? ? ? ? ? ? if (addID == NoArr[n]) {
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#999EFF");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //17
? ? ? ? ? ? for (var r in ResultList) {
? ? ? ? ? ? ? ? if (addID == ResultList[r]["MonitorTime"]) {
? ? ? ? ? ? ? ? ? ? var strdiv;
? ? ? ? ? ? ? ? ? ? var strdiv = ""
? ? ? ? ? ? ? ? ? ? strdiv += "<div class='tip' id='tip" + addID + "'>" + addID + "<br/>";
? ? ? ? ? ? ? ? ? ? if (items == "AQI") {
? ? ? ? ? ? ? ? ? ? ? ? strdiv += "預測：" + ResultList[r]["fAQI"] + ";實測：" + ResultList[r]["dAQI"];
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (items == "AirLevel") {
? ? ? ? ? ? ? ? ? ? ? ? strdiv += "預測：" + ResultList[r]["fLevel"] + ";實測：" + ResultList[r]["dLevel"];
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? strdiv += "</div>";
? ? ? ? ? ? ? ? ? ? $("#a" + addID).append(strdiv);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }//17
? ? ? ? ? ? //showdata(addID);
? ? ? ? ? ? iDay++;//得到這天是周幾，依次往后加
? ? ? ? }
? ? ? ? for (var i = 0; i < addIDArray.length; i++) {
? ? ? ? ? ? var liID = "#a" + addIDArray[i];
? ? ? ? ? ? var divID = "#tip" + addIDArray[i];
? ? ? ? ? ? $(liID).mouseover(function (e) {
? ? ? ? ? ? ? ? var aid = $(e.target)[0].id;
? ? ? ? ? ? ? ? var tipid = $("#" + aid + " div")[0].id;
? ? ? ? ? ? ? ? $("#" + tipid).show();
? ? ? ? ? ? ? ? //$(divID).css("display", "block");
? ? ? ? ? ? });
? ? ? ? ? ? $(liID).mouseout(function (e) {
? ? ? ? ? ? ? ? var aid = $(e.target)[0].id;
? ? ? ? ? ? ? ? var tipid = $("#" + aid + " div")[0].id;
? ? ? ? ? ? ? ? $("#" + tipid).hide();
? ? ? ? ? ? ? ? //$(divID).css("display", "none");
? ? ? ? ? ? });
? ? ? ? }
? ? }
? ? //把沒字的格子折疊起來
? ? for (var i = 0; i < aLi.length; i++) {
? ? ? ? if (aLi[i].innerHTML == "") {
? ? ? ? ? ? aLi[i].style.height = "0px";
? ? ? ? }
? ? }
}
【4】某一個月份日歷
//單個月份日歷
function showCalendar1(select_year, month, items, ResultList, FalseArr, TrueArr, NoArr) {
? ? var content = "";
? ? if (month == "0") {
? ? ? ? for (var i = 0; i < 12; i++) {
? ? ? ? ? ? content += "<div style='float:left;width:25%;border-right:1px solid #dadada' > <div class='c_header'><h1></h1><ol><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ol></div><ul class='c_body' id='ul" + i + "'>";
? ? ? ? ? ? for (var j = 0; j < 42; j++) {
? ? ? ? ? ? ? ? content += "<li></li>";
? ? ? ? ? ? }
? ? ? ? ? ? content += "</ul></div>";
? ? ? ? }
? ? }
? ? else if (month != "0") {
? ? ? ? content += "<div style='float:left;width:100%;border-right:1px solid #dadada' > <div class='c_header'><h1></h1><ol><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ol></div><ul class='c_body' id='ul" + month + "'>";
? ? ? ? for (var j = 0; j < 42; j++) {
? ? ? ? ? ? content += "<li></li>";
? ? ? ? }
? ? ? ? content += "</ul></div>";
? ? }
? ? debugger;
? ? $("#calendar").html(content);
? ? var oCal = document.getElementById("calendar");//id='calendar'的對象
? ? var oTitle = oCal.getElementsByTagName("h1");//得到h1標簽元素
? ? var oUl = oCal.getElementsByTagName("ul");//得到ul標簽元素
? ? var addIDArray = new Array();//17
? ? addIDArray.length = 0;//17
? ? //根據傳入的年份重新算時間
? ? var oDate = new Date();//當前時間的日期對象
? ? oDate.setYear(select_year);//setYear()用于設置年份
? ? var iYear = oDate.getFullYear();
? ? //得到年 ? ? ? ? ? ? ? ? ? ? ? ?
? ? var bLeap = false;//是否是閏年
? ? if (iYear % 4 == 0 && iYear % 100 !== 0 || iYear % 400 == 0) bLeap = true;
? ? var addIDArray = new Array();
? ? var Mbegin = 0;
? ? var Mend = 12;
? ? if (month != "0") {
? ? ? ? Mbegin = month - 1;
? ? ? ? Mend = month;
? ? }
? ? for (var m = Mbegin; m < Mend; m++) {
? ? ? ? oDate.setMonth(m);//設置月份（0-11，12個月）
? ? ? ? oDate.setDate(1);//設置一個月的某一天（1-31）
? ? ? ? var iMonth = oDate.getMonth();
? ? ? ? //得到月
? ? ? ? var iDay = oDate.getDay();
? ? ? ? //得到星期幾
? ? ? ? var iSum = 0;?? ?//存本月天數
? ? ? ? if (month == "0")
? ? ? ? { oTitle[m].innerHTML = iYear + "年" + (iMonth + 1) + "月"; }//第一個h1標簽元素（*年*月）
? ? ? ? else if (month != "0")
? ? ? ? { oTitle[0].innerHTML = iYear + "年" + (iMonth + 1) + "月"; }
? ? ? ? switch (iMonth + 1) {
? ? ? ? ? ? case 1:
? ? ? ? ? ? case 3:
? ? ? ? ? ? case 5:
? ? ? ? ? ? case 7:
? ? ? ? ? ? case 8:
? ? ? ? ? ? case 10:
? ? ? ? ? ? case 12:
? ? ? ? ? ? ? ? iSum = 31;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 4:
? ? ? ? ? ? case 6:
? ? ? ? ? ? case 9:
? ? ? ? ? ? case 11:
? ? ? ? ? ? ? ? iSum = 30;
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case 2:
? ? ? ? ? ? ? ? if (bLeap) iSum = 29;
? ? ? ? ? ? ? ? else iSum = 28;
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? if (month == "0")
? ? ? ? { var aLi = oUl[m].getElementsByTagName("li"); }//得到第（m+1）個所有li標簽元素
? ? ? ? else if (month != "0")
? ? ? ? { var aLi = oUl[0].getElementsByTagName("li"); }
? ? ? ? //初始化一下
? ? ? ? for (var i = 0; i < aLi.length; i++) {//
? ? ? ? ? ? aLi[i].innerHTML = "";//清除內容
? ? ? ? ? ? aLi[i].style.height = "40px";
? ? ? ? ? ? aLi[i].className = "";
? ? ? ? }
? ? ? ? var month = m < 9 ? "-0" + (m + 1) : "-" + (m + 1);
? ? ? ? for (var i = 1; i <= iSum; i++) {
? ? ? ? ? ? var day = i < 10 ? "-0" + i : "-" + i;
? ? ? ? ? ? var addID = iYear + month + day;
? ? ? ? ? ? addIDArray.push(addID);//17 ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? aLi[iDay].setAttribute("id", "a" + addID);
? ? ? ? ? ? $("#a" + addID).html(i);
? ? ? ? ? ? for (var f in FalseArr) {
? ? ? ? ? ? ? ? //['#90ED7D', '#FFBC75', '#999EFF'],
? ? ? ? ? ? ? ? if (addID == FalseArr[f]) {
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#FFBC75");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? for (var t in TrueArr) {
? ? ? ? ? ? ? ? if (addID == TrueArr[t]) {
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#90ED7D");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? for (var n in NoArr) {
? ? ? ? ? ? ? ? if (addID == NoArr[n]) {
? ? ? ? ? ? ? ? ? ? $("#a" + addID).css("backgroundColor", "#999EFF");
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? //17
? ? ? ? ? ? for (var r in ResultList) {
? ? ? ? ? ? ? ? if (addID == ResultList[r]["MonitorTime"]) {
? ? ? ? ? ? ? ? ? ? var strdiv;
? ? ? ? ? ? ? ? ? ? var strdiv = ""
? ? ? ? ? ? ? ? ? ? strdiv += "<div class='tip' id='tip" + addID + "'>" + addID + "<br/>";
? ? ? ? ? ? ? ? ? ? if (items == "AQI") {
? ? ? ? ? ? ? ? ? ? ? ? strdiv += "預測：" + ResultList[r]["fAQI"] + ";實測：" + ResultList[r]["dAQI"];
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if (items == "AirLevel") {
? ? ? ? ? ? ? ? ? ? ? ? strdiv += "預測：" + ResultList[r]["fLevel"] + ";實測：" + ResultList[r]["dLevel"];
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? strdiv += "</div>";
? ? ? ? ? ? ? ? ? ? $("#a" + addID).append(strdiv);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }//17
? ? ? ? ? ? //showdata(addID);
? ? ? ? ? ? iDay++;//得到這天是周幾，依次往后加
? ? ? ? }
? ? ? ? for (var i = 0; i < addIDArray.length; i++) {
? ? ? ? ? ? var liID = "#a" + addIDArray[i];
? ? ? ? ? ? var divID = "#tip" + addIDArray[i];
? ? ? ? ? ? $(liID).mouseover(function (e) {
? ? ? ? ? ? ? ? var aid = $(e.target)[0].id;
? ? ? ? ? ? ? ? var tipid = $("#" + aid + " div")[0].id;
? ? ? ? ? ? ? ? $("#" + tipid).show();
? ? ? ? ? ? ? ? //$(divID).css("display", "block");
? ? ? ? ? ? });
? ? ? ? ? ? $(liID).mouseout(function (e) {
? ? ? ? ? ? ? ? var aid = $(e.target)[0].id;
? ? ? ? ? ? ? ? var tipid = $("#" + aid + " div")[0].id;
? ? ? ? ? ? ? ? $("#" + tipid).hide();
? ? ? ? ? ? ? ? //$(divID).css("display", "none");
? ? ? ? ? ? });
? ? ? ? }
? ? }
? ? //把沒字的格子折疊起來
? ? for (var i = 0; i < aLi.length; i++) {
? ? ? ? if (aLi[i].innerHTML == "") {
? ? ? ? ? ? aLi[i].style.height = "0px";
? ? ? ? }
? ? }
}
總結
以上是生活随笔為你收集整理的.net篇(1)--js写日历的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 公式编辑器Axmath+公式识别器Sim
- 下一篇： 褒贬义词词典