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>

   <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>

请输入代码

为什么我的浏览器完全没渲染特殊字。

好难，我不会

不用清除吧，按照月份的规律适当隐藏最后几天是不是好点？

已经找到方法了，正确的方法是，在oNext.onclick和oPre.onclick两个事件里，都加上day_list.innerHTML=''，每次点击的时候，往ul中添加新月份日期的li时先将ul原先有的li清空，这样新月份日期的li就不会与原有的重合了

oNext.onclick=function(){

iNow++;
dateFn();

};

oPre.onclick=function(){

iNow--;
dateFn();

};

简单点的做法是直接清楚父级ul。

更好的做法是做成分页。

【热门文章】