js+html+css实现简单日历效果
作者：好多bug
这篇文章主要为大家详细介绍了js+html+css实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js+html+css实现简单日历效果的具体代码，供大家参考，具体内容如下
效果：
遇到的问题与解决方法：
1.“日”上移
方法：在“下个月”button后加上<div> </div>防止上移
<div> </div>
2.打完代码后不显示日期，但按钮切换月份可用
方法：最后一行那里，在父元素才可以用，替换为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);《《《《《源代码：
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;
//4，6，9，11月份为30天
}else{
allday=31;
//其他月份为31天（不包括2月）
}
}else{
//如果是2月份需要判断当前是否为闰年
if (((year%4)==0&&(year%100)!=0)||(year%400)==0){
allday=29;
//闰年的2月份是29天
}else{
allday=28;
//非闰年的2月份是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();
//动态添加HTML元素
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);
daterow.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();
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。