问题遇到的现象和发生背景
想问一下为什么这个日历的日期部分不显示,有具体代码
问题相关代码,请勿粘贴截图
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> </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();
}
运行结果及报错内容
没有报错但是无法显示
我的解答思路和尝试过的方法
上网搜了一下别的日历显示项目,其中有几个项目完全复制粘贴也显示不出来日期部分。
跟书上的代码比对了两三次都是一样的,试过把日期部分的z-index设置10还是不显示。
我想要达到的结果
显示出来日期部分