网页版日历控件（原生js实现）
下载地址：https://download.****.net/download/qq_40591925/10837009
部分JS:
var xuanYear=null;
var xuanMonth=null;;
var xuanDate=null;;
var todayXiang=null;
var xuandayXiang=null;
var BGtH=null;
function starXian(){
var year=new Date().getFullYear();
var month=new Date().getMonth()+1;
todayXiang=null;
todayXiang=calendar.solar2lunar(year,month,new Date().getDate());
/*↓日、六在开头末尾↓*/
//document.getElementById('xsw_date').innerHTML="<div class='tap'><div class='qian' > <div onclick='qianQ()' class='list'><<</div> <div onclick='qian()' class='list'><</div> </div> <div class='zhong'><select name='job' id='selectYear' onchange='select()'></select>年 <select id='selectMonth' onchange='select()'></select>月</div> <div class='hou' > <div onclick='hou()' class='list'>></div> <div onclick='houH()' class='list'>>></div> </div> </div><div class='tou'><div class='touList' style='color:red'>日</div><div class='touList'>一</div><div class='touList'>二</div><div class='touList'>三</div><div class='touList'>四</div><div class='touList'>五</div><div class='touList' style='color:red'>六</div></div><div class='dateMain' id='dateMain'> <div class='dateMain1' id='dateMain1'><div class='dateList' id='dateList'></div></div> <div id='BG'></div> </div><div id='xianQiTa'></div><div id='chaDian' onclick='kaiG(this)'>↓</div>";
/*↑日、六在开头末尾↑*/
document.getElementById('xsw_date').innerHTML="<div class='tap'><div class='qian' > <div onclick='qianQ()' class='list'><<</div> <div onclick='qian()' class='list'><</div> </div> <div class='zhong'><select name='job' id='selectYear' onchange='select()'></select>年 <select id='selectMonth' onchange='select()'></select>月</div> <div class='hou' > <div onclick='hou()' class='list'>></div> <div onclick='houH()' class='list'>>></div> </div> </div><div class='tou'><div class='touList'>一</div><div class='touList'>二</div><div class='touList'>三</div><div class='touList'>四</div><div class='touList'>五</div><div class='touList' style='color:red'>六</div><div class='touList' style='color:red'>日</div></div><div class='dateMain' id='dateMain'> <div class='dateMain1' id='dateMain1'><div class='dateList' id='dateList'></div></div> <div id='BG'></div> </div><div id='xianQiTa'></div><div id='chaDian' onclick='kaiG(this)'>↓</div>";
BGtH = document.getElementById('dateList').clientHeight * 6 +'px';
xianDate(year,month)
//console.log(todayXiang)
}
function xianDate(y,m){
if(y<=1900 ){
y=2099
}
else if(y>=2100){
y=1901
}
console.log(y,m)
selectXian(y,m)
var Tyear=new Date().getFullYear();
var Tmonth=new Date().getMonth()+1;
var Tdate=new Date().getDate();
var dateArr=calendar.chaDate(y,m);
document.getElementById('dateMain1').innerHTML='';
document.getElementById('xianQiTa').innerHTML='';
if(dateArr.sameMonth[0].Animal=='鼠'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/shu.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='牛'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/niu.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='虎'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/hu.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='兔'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/tu.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='龙'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/long.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='蛇'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/se.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='马'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/ma.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='羊'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/yang.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='猴'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/hou.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='鸡'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/ji.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='狗'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/gou.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
if(dateArr.sameMonth[0].Animal=='猪'){
document.getElementById('BG').style='pointer-events: none;position: absolute;width: 100%;background: url(shengXiao/zhu.png) no-repeat center;background-size:cover;opacity: 0.4;left: 0;right: 0;'
document.getElementById('BG').style.height= BGtH
}
var str='';
for(let x=0;x<dateArr.lastMonth.length;x++){
str+=`<div class='dateList shang' onclick='xianDate(${dateArr.lastMonth[x].cYear},${dateArr.lastMonth[x].cMonth})'><div>${dateArr.lastMonth[x].cDay}</div><div class='zi'>${dateArr.lastMonth[x].isFestival==true?dateArr.lastMonth[x].festival:(dateArr.lastMonth[x].isNjieri==true?dateArr.lastMonth[x].Njieri:( dateArr.lastMonth[x].isTerm==true?dateArr.lastMonth[x].Term:(dateArr.lastMonth[x].IDayCn=='初一'?dateArr.lastMonth[x].IMonthCn:dateArr.lastMonth[x].IDayCn)))}</div></div>`;
};
for(let x=0;x<dateArr.sameMonth.length;x++){
str+=`<div class="dateList ${(dateArr.sameMonth[x].cYear==xuanYear && dateArr.sameMonth[x].cMonth==xuanMonth && dateArr.sameMonth[x].cDay==xuanDate)?'xuanZhong':''} ${(dateArr.sameMonth[x].cYear==Tyear && dateArr.sameMonth[x].cMonth==Tmonth && dateArr.sameMonth[x].cDay==Tdate)?'today':''}" onclick='xuanZHong(${dateArr.sameMonth[x].cYear},${dateArr.sameMonth[x].cMonth},${dateArr.sameMonth[x].cDay})'><div>${dateArr.sameMonth[x].cDay}</div><div class='zi'>${dateArr.sameMonth[x].isFestival==true?dateArr.sameMonth[x].festival:(dateArr.sameMonth[x].isNjieri==true?dateArr.sameMonth[x].Njieri:(dateArr.sameMonth[x].isTerm==true?dateArr.sameMonth[x].Term:(dateArr.sameMonth[x].IDayCn=='初一'?dateArr.sameMonth[x].IMonthCn:dateArr.sameMonth[x].IDayCn)))}</div></div>`
};
for(let x=0;x<dateArr.nextMonth.length;x++){
str+=`<div class='dateList xia' onclick='xianDate(${dateArr.nextMonth[x].cYear},${dateArr.nextMonth[x].cMonth})'><div>${dateArr.nextMonth[x].cDay}</div><div class='zi'>${dateArr.nextMonth[x].isFestival==true?dateArr.nextMonth[x].festival:(dateArr.nextMonth[x].isNjieri==true?dateArr.nextMonth[x].Njieri:( dateArr.nextMonth[x].isTerm==true?dateArr.nextMonth[x].Term:(dateArr.nextMonth[x].IDayCn=='初一'?dateArr.nextMonth[x].IMonthCn:dateArr.nextMonth[x].IDayCn)))}</div></div>`;
};
var strC=`<div class="fttor ${(BianHuan==0 || BianHuan%2==0)?'hide':'zai'} " id='fttor'><div class='fttormain'><div class='left'><div class='tiShi'>今天:</div><div>生肖:${todayXiang.Animal}</div> <div>农历:${todayXiang.IMonthCn}${todayXiang.IDayCn}</div> <div>农历节日:${todayXiang.isNjieri==true?todayXiang.Njieri:'无'}</div> <div>节日:${todayXiang.isFestival==true?todayXiang.festival:'无'}</div> </div> <div class='zhong'><div class='today' onclick='today()'>回到今天</div><div class='dianjiH' onclick='dianjiH()'>去到点击</div></div> <div class='right'> <div class='tiShi'>选中:</div><div>生肖:${xuandayXiang!=null?xuandayXiang.Animal:'未选择'}</div> <div>农历:${xuandayXiang!=null?xuandayXiang.IMonthCn:'未选择'}${xuandayXiang!=null?xuandayXiang.IDayCn:''}</div> <div>农历节日:${xuandayXiang!=null?(xuandayXiang.isNjieri==true?xuandayXiang.Njieri:'无'):'未选择'}</div> <div>节日:${xuandayXiang!=null?(xuandayXiang.isFestival==true?xuandayXiang.festival:'无'):'未选择'}</div> </div></div> </div>`;
document.getElementById('dateMain1').innerHTML=str
document.getElementById('xianQiTa').innerHTML=strC
//console.log(dateArr);
}
function selectXian(year,month){
//console.log(year,month)
document.getElementById('selectYear').innerHTML='';
document.getElementById('selectMonth').innerHTML=''
var stryear=''
for(let y=1901;y<=2099;y++){
if(year==y){
stryear+=`<option value ="${y}" selected='selected'>${y}</option>`;
}
else{
stryear+=`<option value ="${y}">${y}</option>`;
}
};
var strmonth='';
for(let m=1;m<=12;m++){
if(month==m){
strmonth+=`<option value ="${m}" selected='selected'>${m}</option>`;
}
else{
strmonth+=`<option value ="${m}">${m}</option>`;
}
};
document.getElementById('selectYear').innerHTML=stryear;
document.getElementById('selectMonth').innerHTML=strmonth;
}
function select(){
//console.log(document.getElementById('selectYear').value,document.getElementById('selectMonth').value)
xianDate(document.getElementById('selectYear').value,document.getElementById('selectMonth').value)
}
function qian(){
var yearQ=document.getElementById('selectYear').value;
var monthQ=document.getElementById('selectMonth').value;
monthQ=parseInt(monthQ)-1;
if(monthQ<=0){
monthQ=12
yearQ=parseInt(yearQ)-1
}
if(yearQ<=1900){
yearQ=2099
}
xianDate(yearQ,monthQ)
}
function qianQ(){
var yearQ=document.getElementById('selectYear').value;
var monthQ=document.getElementById('selectMonth').value;
yearQ=parseInt(yearQ)-1;
if(yearQ<=1900){
yearQ=2099
}
xianDate(yearQ,monthQ)
}
function hou(){
var yearH=document.getElementById('selectYear').value;
var monthH=document.getElementById('selectMonth').value;
monthH=parseInt(monthH)+1;
if(monthH>=13){
monthH=1
yearH=parseInt(yearH)+1
}
if(yearH>=2100){
yearH=1901
}
xianDate(yearH,monthH)
}
function houH(){
var yearH=document.getElementById('selectYear').value;
var monthH=document.getElementById('selectMonth').value;
yearH=parseInt(yearH)+1;
if(yearH>=2100){
yearH=1901
}
xianDate(yearH,monthH)
}
function xuanZHong(y,m,d){
if(xuanYear==y && xuanMonth==m && xuanDate==d){
xuanYear=null;
xuanMonth=null;
xuanDate=null;
xuandayXiang=null;
xianDate(y,m)
}
else{
xuanYear=y;
xuanMonth=m;
xuanDate=d;
xuandayXiang=null;
xuandayXiang=calendar.solar2lunar(y,m,d);
console.log(xuandayXiang)
xianDate(y,m)
}
}
function today(){
xianDate(new Date().getFullYear(),new Date().getMonth()+1)
}
function dianjiH(){
if(xuanYear==null){
alert('没有选择日期！')
}
else{
xianDate(xuanYear,xuanMonth)
}
}
var BianHuan=0;
function kaiG(e){
var div=document.getElementById('fttor')
if(BianHuan%2==0){
xsw_removeClass(div,'hide')
xsw_addClass(div,'zai')
e.innerHTML='↑'
}
else{
xsw_removeClass(div,'zai')
xsw_addClass(div,'hide')
e.innerHTML='↓'
}
BianHuan=BianHuan+1
}
function xsw_addClass(obj, cls){
var obj_class = obj.className,//获取 class 内容.
blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
obj.className = added;//替换原来的 class.
}
function xsw_removeClass(obj, cls){
//console.log(obj,cls)
var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc bcd' -> ' abc bcd '
obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc bcd ' -> ' abc bcd '
removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
obj.className = removed;//替换原来的 class.
}
function xsw_hasClass(obj, cls){
var obj_class = obj.className,//获取 class 内容.
obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
x = 0;
for(x in obj_class_lst) {
if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls
return true;
}
}
return false;
}
starXian();
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="css/index.css" />
<body>
<div class='xsw_date' id='xsw_date'></div>
</body>
<script src="js/riQIX.js"></script>
</html>