.net篇(1)--js写日历

【1】html页面定义日历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 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);
}

}
//把没字的格子折叠起来
for (var i = 0; i < aLi.length; i++) {
if (aLi[i].innerHTML == "") {
aLi[i].style.height = "0px";
}
}

}

.net篇(1)--js写日历相关推荐

Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
vue+js纯手写日历（包含农历，节假日）
vue+js纯手写日历(包含农历,节假日) 使用的js 地址 dataChange.js 插件使用了elementui //完整代码 <template><div><di ...
js ...运算符_「 giao-js 」用js写一个js解释器
前言在这篇文章中,我们将通过 JS 构建我们自己的 JS 解释器,用 JS 写 JS,这听起来很奇怪,尽管如此,这样做我们将更熟悉 JS,也可以学习 JS 引擎是如何工作的! 什么是解释器 (Int ...
在网上看到和篇关于sql server 2005的性能优化篇，觉得写得很好。
在网上看到和篇关于sql server 2005的性能优化篇,觉得写得很好. SQL Server2005扩展函数已经不是一件什么新鲜的事了,但是我看网上的大部分都是说聚合函数,例子也比较浅,那么这里 ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
node js 写按键精灵_带有按键的Node.js Raw模式
node js 写按键精灵 I find the stuff that people are doing with Node.js incredibly interesting. You here ...
js写css字体,js如何写出css动画？js写css动画的方法（代码）
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
Python+selenium自动化-js处理日历控件（修改readonly属性）
前言今天写自动化脚本的时候遇到一个需要更改日期的控件,不想费劲巴拉的去找日历的定位,但是又没办法直接输入我想输的日期时间,想了会儿之后决定用js解决日历控件基本思路:先用js去掉readonly属 ...
用three.js写一个小场景
上次我们用three.js写了一个下雨的动画,主要是用粒子.这次是用three.js搭建了一个小场景. 项目地址依然是:https://github.com/alasolala/threejs-tut ...

.net篇(1)--js写日历

.net篇(1)--js写日历相关推荐

最新文章

热门文章