javascript - js简单日历,点击下一月往页面中添加下一月的<li>标签和日期时,怎么清楚上一月的所有li
本文介绍了javascript - js简单日历,点击下一月往页面中添加下一月的<li>标签和日期时,怎么清楚上一月的所有li的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
calendar{width:210px;margin:100px auto; overflow:hidden;border:1px solid #000; padding:20px; position:relative}
title{ text-align:center; margin-bottom:10px}
calendar #pre{ position:absolute;top:20px;left:10px;}
calendar #next{ position:absolute;top:20px;right:10px;}
calendar .week{height:30px; line-height:20px;border-bottom:1px solid #000; margin-bottom:10px}
calendar .week li{ float:left;width:30px;height:30px; text-align:center; list-style:none;}
calendar .dateUl{ overflow:hidden; clear:both}
calendar .dateUl li{float:left;width:30px;height:30px; text-align:center; line-height:30px;list-style:none;}
calendar .dateUl li.ccc{ color:#ccc;}
calendar .dateUl li.red{ background:#F90; color:#fff;}
calendar .dateUl li.sun{ color:#f00;}
</style>
<script>
window.onload=function(){
var calendar=document.getElementById('calendar');
var day_list=document.getElementById('date_list');
var pre=document.getElementById('pre');
var next=document.getElementById('next');
var iNow=0;//当天
var has_l=day_list.getElementsByTagName('li');
function dateFn(){
//必要的数据
var allDays=0; //本月一个有多少天
var firstDay_week=0; //本月第一天是星期几
var today=0 //今天的多少号
var oDate=new Date();
today=oDate.getDate(); //今天多少号
// 算出本月第一天是星期几
oDate.setMonth(oDate.getMonth()+iNow,1); //必须将日期设置成小于28日的数,否则遇到2月28日的情况,会跳到3月
firstDay_week=oDate.getDay(); // 0-6 星期天是0
//雷区----------------------------------
//oDate.setMonth(oDate.getMonth()+iNow);
//oDate.setDate(1);//把日期设置到第一天
//算出本月的所有天数
oDate.setMonth(oDate.getMonth()+1,0); //到下个月的第0天,就是本月的最后一天
allDays=oDate.getDate()+1;
//此处补充500字------------------------------------
if(firstDay_week==0) firstDay_week=7;
//插入空白
for(var i=1; i<firstDay_week; i++){
var li=document.createElement('li');
day_list.appendChild(li);
}`请输入代码`
//var has_l=day_list.getElementsByTagName('li');
//插入本月的天
for(var i=1; i<allDays; i++){
var li=document.createElement('li');
li.innerHTML=i;
day_list.appendChild(li);
};
//判断颜色--------------------------------------------
var aLi=day_list.children;
for(var i=0; i<aLi.length; i++){
if(aLi[i].innerHTML<today){
aLi[i].className='ccc';
}else if(aLi[i].innerHTML==today){
aLi[i].className='red';
}else if(i%7==5 || i%7==6){
aLi[i].className='sun';
};
};
//改日期标题
var title=document.getElementById('title');
title.innerHTML=oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月';
}
dateFn();
//上月下月
var oPre=document.getElementById('pre');
var oNext=document.getElementById('next');
oNext.onclick=function(){
iNow++;
dateFn();
};
oPre.onclick=function(){
iNow--;
dateFn();
};
};
</script>
</head>
<body>
<div id="calendar">
<h4 id="title">2013年10月</h4>
<a href="javascript:;" id="pre" class="a1">上月</a>
<a href="javascript:;" id="next" class="a2">下月</a>
<ul class="week">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li>七</li>
</ul>
<ul id="date_list" class="dateUl"></ul>
</div>
</body>
</html>
请输入代码
解决方案
简单点的做法是直接清楚父级ul。
更好的做法是做成分页。
这篇关于javascript - js简单日历,点击下一月往页面中添加下一月的<li>标签和日期时,怎么清楚上一月的所有li的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文