好多bug 2022-03-09 12:57 采纳率: 50%
浏览 40
已结题

日历项目界面出不来具体日期

问题遇到的现象和发生背景

想问一下为什么这个日历的日期部分不显示,有具体代码

问题相关代码,请勿粘贴截图

html页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2.2电子日历的设计与实现</title>
        <link rel="stylesheet" type="text/css" href="css/calendar.css"/>
        <script src="js/calendar.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body onload="showDate()">
        <h3>电子日历的设计与实现</h3>
        <hr >
        <div id="calendar">
            <!-- 状态栏 -->
            <div>
                <button onclick="lastMonth()">上个月</button>
                <div id="month"></div>
                <button onclick="nextMonth()">下个月</button>
                <div>&nbsp;</div> 
            </div>
            
            <div>
                <div class="everyday"></div>
                <div class="everyday"></div>
                <div class="everyday"></div>
                <div class="everyday"></div>
                <div class="everyday"></div>
                <div class="everyday"></div>
                <div class="everyday"></div>
            </div>
            
            <div id="day"></div>
        </div>
    </body>
</html>

css部分:


div{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}
#calendar{
    width: 400px;
    margin: auto;
}
button{
    width: 25%;
    float: left;
    height: 40px;
}
#month{
    width: 50%;
    float: left;
}
.everyday{
    width: 14%;
    float: left;
}

js部分

var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var day=today.getDate();
var allday=0;

function count(){
    if (month !=2){
        if ((month==4)||(month==6)||(month==9)||(month==11)){
            allday=30;
        }else{
            allday=31;
        }
    }else{
        if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
            allday=29;
        }else{
            allday=28;
        }
    }
}

function showMonth(){
    var year_month=year+"年"+month+"月";
    document.getElementById("month").innerHTML=year_month;
}

function showDate(){
    showMonth();
    count();
    
    var firstdate=new Date(year,month-1,1);
    
    var xq=firstdate.getDay();
    
    var daterow=document.getElementById("day");
    daterow.innerHTML='';
    
    if (xq !=0){
        for (var i=0;i<xq;i++){
            var dayElement=document.createElement('div');
            dayElement.className='everyday';
            daterow.appendChild(dayElement);
        }
    }
    
    for (var j=1;j<=allday;j++){
        var dayElement=document.createElement('div');
        dayElement.className='everyday';
        dayElement.innerHTML=j+'';
        
        if(j==day){
            dayElement.style.color='red';
        }
        dayElement.appendChild(dayElement);
    }
}

function lastMonth(){
    if (month>1){
        month-=1;
    }else{
        month=12;
        year-=1;
    }
    showDate();
}

function nextMonth(){
    if (month<12){
        month+=1;
    }else{
        month=1;
        year+=1;
    }
    showDate();
}

运行结果及报错内容

img

没有报错但是无法显示

我的解答思路和尝试过的方法

上网搜了一下别的日历显示项目,其中有几个项目完全复制粘贴也显示不出来日期部分。
跟书上的代码比对了两三次都是一样的,试过把日期部分的z-index设置10还是不显示。

我想要达到的结果

显示出来日期部分


  • 写回答

4条回答 默认 最新

  • 代码的灵魂是bug! 2022-03-09 13:39
    关注

    js代码中showDate()方法有一句代码写错了,dayElement.appendChild(dayElement);应该是daterow.appendChild(dayElement);

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月11日
  • 已采纳回答 3月9日
  • 创建了问题 3月9日

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络,如何解决?
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构,按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题