demo2简单的日历制作

javascript 专栏收录该内容
3 篇文章 0 订阅

一周也就只有周末得空,可以来更新一下我的博客了…
这两天学习了一下获取日期的方法,模仿win10系统上的日历的样子做了一个简单的小日历,不过有些功能由于技术有限,未能实现,再接再厉吧…

这是截图的系统样式,我要做的也就跟这个效果差不多
在这里插入图片描述

HTML样式部分
这个里面的样式大家可以根据自己喜欢的样式,改变颜色、形状、大小就可以了…
本人艺术细胞有限,就只能照葫芦画瓢了…

<body>
    <div class="calendar">
        <div class="top1" id="top1"></div>//时间计时
        <div class="top2" id="top2"></div>
        <header>
            <ul>
                <li class="middle" id="middle"></li>
                <li class="last" id="last">︿</li>//点击跳转上月日期
                <li class="next" id="next"></li>//点击跳转下月日期
            </ul>
        </header>
        <ul class="th">//星期
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul id="tbody">
            <!-- 此处为当月的天数 -->
        </ul>
    </div>
</body>

在制作日历的时候需要了解几个重要的点:
1、日期的表现方式
2、获取该时间的第一天是星期几
3、获取该时间的上一个月有多少天
4、获取该时间的月份有多少天
5、时间的秒如何变动(定时器设置)

先解决第一个点,日期的表现方式

如何获取时间,只需要执行下面一条代码就可以了…

var date = new Date();//即可获取目前的时间

然后再声明一些变量去分别获取时间的年份,月份,日期and so on…
    获取日期是date.getDate();获取星期几是date.getDay();这两个很容易弄混的…
再就是date很容易打成data…页面就加载不出来了…我反正是在这上面栽过很过次跟头…页面加载不出来时是一脸懵逼…

var year = date.getFullYear();
var month = date.getMonth() + 1;//月份是从0开始计算的,所以得 + 1
var day = date.getDate();//获取日期
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var week = date.getDay();//获取星期几
month = month < 10 ? "0" + month : month;//当月份为一位数的时候,在前面加0,以下同理..
day = day < 10 ? "0" + day : day;
hour = sec < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
var weeklist = ["日","一","二","三","四","五","六"];//按照大家的习惯,将星期几的阿拉伯数字转成中文大写数字..
week = weeklist[week];
document.write("今天是" + year + "年" + month + "月" + day + "日" + hour + "时" + min + "分" + sec + "秒 星期" + week );//最后将日期打印出来就好了..

接下来解决第二个问题:获取该时间的第一天是星期几?
    假设用户设定了一个时间为:2019-2-28;
    获取该时间的第一天是星期几就只用将28号改为1号就可以了…

var date = new Date("2019-2-28");//用户设定时间
function firstDayWeek(date) {
    var tempDate = new Date("2019-01-01"); //将获取的时间赋值给tempDate
    tempDate.setFullYear(date.getFullYear()); //获取年份2019
    tempDate.setMonth(date.getMonth()); //获取月份2月
    // tempDate.setDate(date.getDate());
    tempDate.setDate(1); //计算2月的第一天是星期几,将获取的日期28改为1;
    return tempDate.getDay(); //返回值tempDate.getDay(),2.1号是星期几
}

第三个问题:获取该时间的上一个月有多少天?
    至于为什么要设定2-28号,是因为2月是个特殊的月份,(在这里与闰年是没有多大关系的)
    设置时间为2019-2-28号,若要获取1月份的天数,将时间改为2月0号,即返回了上个月的最后一天
    若设定时间为2月28号,要去测1月有多少天,若恰好获取今天的日期为31号,那么获取的31号会去替代设定时间的28号,即时间为2月31号,由于2月只有28天,于是就会变成3月3号,根据上一段话,我们又将日期设置为0,那么3月3号变为3月0号,最后求出的上个月的天数将会赋值给2月,一月的天数还是没有求出来,所以可以将当天获取的时间重新写一个每个月都包含的天数,eg:2019-01-01;

function lastMonthDays(date) {
    var tempDate = new Date("2019-01-01"); //为了避免获取的当天时间日期为31号,可替换时间,不影响结果
    tempDate.setFullYear(date.getFullYear()); //获取年份2019
    tempDate.setMonth(date.getMonth());//获取月份2
    tempDate.setDate(0);//02.01-->02.00-->01.31
    return tempDate.getDate();//31
}

第四个问题:获取该时间的月份有多少天?
    这个问题的解决原理跟上面一个问题有着同样的道理

//获取该时间的月份有多少天
function presentMonthDays(date) {
    var tempDate = new Date("2019-01-01");
    tempDate.setFullYear(date.getFullYear());
    tempDate.setMonth(date.getMonth() + 1); //将月份 + 1
    tempDate.setDate(0); //将日期设置为0,获得3月0号-->2月28号
    return tempDate.getDate();//28
}

第五个问题:定时器的设置

var date = new Date();
var result1 = formatDate(date, "hour:min:sec");
top1Div.innerHTML = result1;页面加载出来就要开始计时,否则会出现1s的延时
//此处代码需要写两遍..
setInterval(function() { //设置定时器,一秒钟显示一面
       var date = new Date();
       var result1 = formatDate(date, "hour:min:sec");//这里是将第一个问题封装成了一个函数formatDate();
       top1Div.innerHTML = result1;
}, 1000) //1000代表1秒

问题都解决完了,接下来只需要将代码合起来就可以了…
css部分就不写了…大家可以按照自己喜欢的样式去修饰

<body>
    <div class="calendar">
        <div class="top1" id="top1"></div>
        <div class="top2" id="top2"></div>
        <header>
            <ul>
                <li class="middle" id="middle"></li>
                <li class="last" id="last">︿</li>
                <li class="next" id="next"></li>
            </ul>
        </header>
        <ul class="th">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul id="tbody">
            <!-- 此处为当月的天数 -->
        </ul>
    </div>
</body>
<script src="../js/calendar.js"></script>//此处的js代码是问题2、3、4
<script>
    var top1Div = document.getElementById("top1");
    var top2Div = document.getElementById("top2");
    var lastBtn = document.getElementById("last");
    var middleDiv = document.getElementById("middle");
    var nextBtn = document.getElementById("next");
    var tobody = document.getElementById("tobody");
    var date = new Date();
    setCalender(); //页面一打开就执行函数setCalender()
    lastBtn.onclick = function() {//按下显示上个月日期
        date.setMonth(date.getMonth() - 1);
        setCalender();//月份发生改变,就需要重新调用一次函数
    }
    nextBtn.onclick = function() {//按下显示下个月日期
        date.setMonth(date.getMonth() + 1);
        setCalender();
    }
    var result1 = formatDate(date, "hour:min:sec");
    top1Div.innerHTML = result1;//定时器部分
    function setCalender() {
    setInterval(function() { //设置定时器,一秒钟显示一面
                var date = new Date();
                var result1 = formatDate(date, "hour:min:sec");
                top1Div.innerHTML = result1;
            }, 1000) //1000代表1秒
    var result2 = formatDate(date, "year年month月day日");
    top2Div.innerHTML = result2;       
    var firstDay = firstDayWeek(date);
    // alert(firstDay);年轻人写代码要写一步看一步..
    firstDay = firstDay == 0 ? 7 : firstDay; //在系统中周日为0,所以判断当改月的第一天为星期天的时候,将firstDay设置为7
    var html = "";
    var lastRemainDays = lastMonthDays(date); //求出上个月有多少天,用来填满这个月前几处空格;
    for (var i = firstDay - 1; i >= 1; i--) { //循环 留出上个月天数 次
        var num = lastRemainDays - i + 1; //用上个月的天数减去循环次数
        html += "<li style='color:#999'>" + num + "</li>"; //输出上月天数
    }
    for (var i = 1; i <= (42 - firstDay - currentDays + 1); i++) {
            html += "<li style='color:#999'>" + i + "</li>";
        }
    middleDiv.innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) + "月";
    //date.getMonth + 1 月份是从0开始算的..
    tbody.innerHTML = html;
    }
</script>

最终做出来的效果图:
在这里插入图片描述
由于本人技术有限,没学多久,还没研究出来切换上下月的页面滚动效果,以及农历日期还没写出来,大家可以在自己电脑win10系统的日历上观察一下…有研究出来的小伙伴也可以在评论区教教我,大家共同进步…

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值