脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js日历效果

js+html+css实现简单日历效果

 更新时间：2022年06月20日 08:57:03   作者：好多bug  
这篇文章主要为大家详细介绍了js+html+css实现简单日历效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js+html+css实现简单日历效果的具体代码，供大家参考，具体内容如下

效果：

遇到的问题与解决方法：

1.“日”上移

方法：在“下个月”button后加上<div>&nbsp;</div>防止上移

<div>&nbsp;</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();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 解决js相同的正则多次调用test()返回的值却不同的问题

    解决js相同的正则多次调用test()返回的值却不同的问题

    今天小编就为大家分享一篇解决js相同的正则多次调用test()返回的值却不同的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • IE 下Enter提交表单存在重复提交问题的解决方法

    IE 下Enter提交表单存在重复提交问题的解决方法

    这篇文章主要介绍了IE 下Enter提交表单存在重复提交问题的解决方法,需要的朋友可以参考下
    2014-05-05
  • JavaScript模拟push

    JavaScript模拟push

    这篇文章主要介绍了JavaScript模拟数组合并concat的相关资料,需要的朋友可以参考下
    2016-03-03
  • 关于JavaScript的一些看法

    关于JavaScript的一些看法

    最近在写一个JS代码压缩工具的时候，感受到JS的强大，同时也让我头疼的一阵子（谁叫我是JS菜鸟）。
    2009-05-05
  • 微信小程序动画组件使用解析，类似vue，且更强大

    微信小程序动画组件使用解析，类似vue，且更强大

    这篇文章主要介绍了微信小程序动画组件，类似vue，且更强大使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • javascript中for...of和for..in循环的区别

    javascript中for...of和for..in循环的区别

    JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码

    js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码

    下面小编就为大家带来一篇js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 深入浅析JavaScript中with语句的理解

    深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式。这篇文章主要介绍了JavaScript中with语句的相关知识，感兴趣的朋友一起学习吧
    2016-05-05
  • 使用dynatrace-ajax跟踪JavaScript的性能

    使用dynatrace-ajax跟踪JavaScript的性能

    DynaTrace 致力于分析后台应用性能的表现已经好几年了，最近，他们通过发布dynaTrace Ajax Edition进入了前端性能分析领域. 它是一个运行在IE下的BHO免费工具. 虽然我喜欢Firefox和它下面的所有插件，但我知道基于IE的测试和调试也是很重要的。
    2010-04-04
  • JS下拉缓冲菜单示例代码

    JS下拉缓冲菜单示例代码

    下拉缓冲菜单效果想必大家都有见过吧，在本文使用JS轻松实现下，想学习的朋友可以参考下
    2013-08-08

最新评论