javascript中Date对象应用之简易日历实现

前面的话

简易日历作为javascript中Date对象的常见应用,用途较广泛,本文将详细说明简易日历的实现思路。

效果演示

HTML说明
 使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮
 按照周日到周一的顺序进行星期的排列

<div class="box">
 <header class='control'>
 <input id="conYear" class="con-in" type="number" min="1900" max="2100" step="1"/>
 <input id="conMonth" class="con-in" type="number" min="1" max="12" step="1"/>
 </header>
 <div class="DateBox">
 <header class='week'>
 <div class="week-in">周日</div>
 <div class="week-in">周一</div>
 <div class="week-in">周二</div>
 <div class="week-in">周三</div>
 <div class="week-in">周四</div>
 <div class="week-in">周五</div>
 <div class="week-in">周六</div>
 </header>
 <section class="dayBox" id='dayBox'>
 <div class="day" id="day1">1</div>
 <div class="day">2</div>
 <div class="day">3</div>
 <div class="day">4</div>
 <div class="day">5</div>
 <div class="day">6</div>
 <div class="day">7</div>
 <div class="day">8</div>
 <div class="day">9</div>
 <div class="day">10</div>
 <div class="day">11</div>
 <div class="day">12</div>
 <div class="day">13</div>
 <div class="day">14</div>
 <div class="day">15</div>
 <div class="day">16</div>
 <div class="day">17</div>
 <div class="day">18</div>
 <div class="day">19</div>
 <div class="day">20</div>
 <div class="day">21</div>
 <div class="day">22</div>
 <div class="day">23</div>
 <div class="day">24</div>
 <div class="day">25</div>
 <div class="day">26</div>
 <div class="day">27</div>
 <div class="day">28</div>
 <div class="day">29</div>
 <div class="day" id="day30">30</div>
 <div class="day" id="day31">31</div>
 </section>
 </div>
</div>

CSS说明
对于简易日历的实现,首先确定日历中class="day"的div的排列方式为浮动。这样可以通过改变第一天div的位置,来实现所有同级div都可以跟随移动的效果

body{
 margin: 0;
}
input{
 border: none;
 padding: 0;
}
.box{
 width: 354px;
 margin: 30px auto 0;
}
.DateBox{
 height: 300px;
 border: 2px solid black;
}
.week{
 overflow: hidden;
 border-bottom: 1px solid black;
 line-height: 49px;
}
.week-in{
 height: 49px;
 float: left;
 width: 50px;
 text-align: center;
}
.dayBox{
 overflow: hidden;
}
.day{
 float: left;
 height: 50px;
 width: 50px;
 font:20px/50px '微软雅黑';
 text-align: center;
}
.control{
 overflow: hidden;
}
.con-in{
 height: 50px;
 float: left;
 width: 100px;
 text-align: center;
 font: 20px/50px "微软雅黑";
}

JS说明
简易日历的JS逻辑总共需要5个实现:
【1】需要获取当月的天数,获取当月第一天、第30天、第31天是周几
【2】根据当月第一天的星期,改变第一天的margin-left值,移动第一天到对应的位置;由于浮动的关系,其余天也会跟着移动到对应的位置
【3】根据当月的天数,隐藏多余的天;当然,隐藏之前要先显示在其他月份可能被隐藏的天
【4】如果当月30日是周日,则会新占一行。这时通过改变30日这天的margin值将其移动到第一行(若31日可能会新占一行,也做相似处理)
【5】载入页面后,获取当前的年和月,显示当月日历;当改变年或月时,获取改变后的值,更新日历

//准备:获取当前样式
function getCSS(obj,style){
 if(window.getComputedStyle){
 return getComputedStyle(obj)[style];
 }
 return obj.currentStyle[style];
}

//实现一:获取当月的天数,及当月第一天、第30日、第31日是星期几
function get_data(year,month){
 var result = {};
 var d = new Date();
 //如果是2月
 if(month == 2){
 //如果是闰年
 if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
 result.days = 29;
 //如果是平年
 }else{
 result.days = 28;
 }
 //如果是第4、6、9、11月
 }else if(month == 4 || month == 6 ||month == 9 ||month == 11){
 result.days = 30;
 }else{
 result.days = 31;
 //当月第31天是星期几
 result.day31week = d.getDay(d.setFullYear(year,month-1,31));
 }
 //当月第一天是星期几
 result.day1week = d.getDay(d.setFullYear(year,month-1,1));
 if(month != 2){
 //当月第30天是星期几
 result.day30week = d.getDay(d.setFullYear(year,month-1,30));
 }
 return result;
}

//实现二:根据当月第一天的星期x,设置第一天的margin-left=宽度*x,使其对应到正确的星期位置上
function move_day1(year,month){
 var week1 = get_data(year,month).day1week;
 day1.style.marginLeft = week1%7*parseInt(getCSS(day1,'width'))+ 'px';
}

//实现三:根据当月的天数,来隐藏多余的天数。当然首先要先显示在其他月份被隐藏的天数
function hide_days(year,month){
 //恢复其他月份可能隐藏的天数
 for(var i = 28; i<31; i++){
 dayBox.children[i].style.display = 'block';
 }
 //隐藏当月多余的天数
 var days = get_data(year,month).days;
 for(var i = days;i<31;i++){
 dayBox.children[i].style.display = 'none';
 }
};

//实现四:如果当月30日或31日是星期日,则会新占一行,通过设置margin-top把新占一行的天移动到第一行
function move_day30(year,month){
 //如果当月30日是星期日
 if(get_data(year,month).day30week === 0){
 day30.style.marginTop = parseInt(getCSS(day30,'height')) *(-5) + 'px';
 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';
 day31.style.marginLeft= getCSS(day31,'width');
 return;
 }else{
 day30.style.marginTop = day31.style.marginTop = day31.style.marginLeft ='0';
 }
 //如果当月31日是星期日
 if(get_data(year,month).day31week === 0){
 day31.style.marginTop = parseInt(getCSS(day31,'height')) *(-5) + 'px';
 }else{
 day31.style.marginTop = '0';
 }
}

//实现五:当载入页面时,获取当前年和月,显示当月日历;当改变年或月时,获取改变后的年和月,更新当月日历
var year= conYear.value=new Date().getFullYear();
var month= conMonth.value = new Date().getMonth() + 1;
move_day1(year,month);
hide_days(year,month);
move_day30(year,month);

conYear.onchange = conMonth.onchange = function(){
 var year = conYear.value;
 var month = conMonth.value;
 if(year<1900 || year >2100 ){
 year = conYear.value=new Date().getFullYear();
 }
 if(month<1 || month > 12){
 month = conMonth.value=new Date().getMonth() + 1;
 }
 move_day1(year,month);
 hide_days(year,month);
 move_day30(year,month);
}

源码演示

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

(0)

相关推荐

  • javascript 玩转Date对象(实例讲解)

    前言:最近在做一个日期选择功能,在日期转换的时候经常换到晕,总结一下常用的Date对象的相关用法,方便日后直接查看使用- 1. new Date()的使用方法有: 不接收任何参数:返回当前时间: 接收一个参数x: 返回1970年1月1日 + x毫秒的值. new Date(1, 1, 1)返回1901年2月1号. new Date(2016, 1, 1)不会在1900年的基础上加2016,而只是表示2016年2月1号. 2. 使用new Date(time) 将时间转换成 Date 对象 注意:

  • JavaScript Date对象详解

    本篇主要介绍 Date 日期和时间对象的操作,具体内容如下 目录 1. 介绍:阐述 Date 对象. 2. 构造函数:介绍 Date 对象的构造函数new Date()几种方式. 3. 实例方法:介绍 Date 对象的get.set等实例方法. 4. 静态方法:介绍 Date 对象的静态方法:Date.now(). Date.parse()等. 5. 实际操作:介绍 Date 对象的一些示例:获取倒计时.比较2个Date对象的大小等等. 一. 介绍 1.1 说明 Date对象,是操作日期和时间的

  • 原生JS:Date对象全面解析

    Date对象:基于1970年1月1日(世界标准时间)起的毫秒数 本文参考MDN做的详细整理,方便大家参考MDN 构造函数: 1.new Date(); 依据系统设置的当前时间来创建一个Date对象. 2.new Date(value); value代表自1970年1月1日00:00:00 (世界标准时间) 起经过的毫秒数. 3.new Date(dateString); dateString表示日期的字符串值.该字符串应该能被 Date.parse() 方法识别(符合 IETF-complian

  • javascript中Date对象的使用总结

    JSON 日期转 JS日期,我们知道,日期类型转成JSON之后,返回的数据类似这样: /Date(1379944571737)/ 但是这种日期并不能直接显示,因为根本没有人知道这是什么意思,下面提供一种JSON日期转JS日期的方式. function ConvertJSONDateToJSDate(jsondate) { var date = new Date(parseInt(jsondate.replace("/Date(", "").replace("

  • JavaScript Date对象使用总结

    //全局函数 Date //Date 类的静态方法 Date.parse Date.UTC //Date 对象的建立方法 new Date() new Date(毫秒数) new Date(标准时间格式字符串) new Date(年, 月, 日, 时, 分, 秒, 毫秒) //Date 对象的更多方法 getFullYear (getUTCFullYear) getMonth (getUTCMonth) getDate (getUTCDate) getDay (getUTCDay) getHou

  • Javascript之Date对象详解

    Date对象即日期时间对象,它的主要功能是实现对日期时间的处理 1.创建Date对象 复制代码 代码如下: var myDate = new Date(); 或 复制代码 代码如下: var myDate = new Date("July 21, 1983 01:15:00");//此种方法为自定义日期时间的方式,格式若不对的话为提示Invalid Date Date对象的constructor属性为:Date document.write(myDate.constructor ==

  • javascript中Date对象应用之简易日历实现

    前面的话 简易日历作为javascript中Date对象的常见应用,用途较广泛,本文将详细说明简易日历的实现思路. 效果演示 HTML说明  使用type=number的两个input分别作为年和月的输入控件,这样在高级浏览器下自带调节按钮  按照周日到周一的顺序进行星期的排列 <div class="box"> <header class='control'> <input id="conYear" class="con-i

  • JavaScript 中Date对象的格式化代码方法汇总

    JavaScript默认的时间格式我们一般情况下不会用,所以需要进行格式化,下面说说我总结的JavaScript时间格式化方法. 很多时候,我们可以利用JavaScript中Date对象的内置方法来格式化,如: var d = new Date(); console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间) console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013

  • 详解JavaScript的Date对象(制作简易钟表)

    JS提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法.下面我们简单的 概述一下这个Date类型.        大概看了一下Date类型的方法,下面给出: 上面的方法自己尝试即可,我只简单的演示一下JS正确输出的格式: var today=new Date();//创建一个时间日期对象 document.write("<h4>下面的是世界标准的时间输出:</h4>"); document.write(today+"

  • javascript中Date对象的getDay方法使用指南

    Date对象有个getDay方法,它根据本地时间,返回一个具体日期中一周的第几天.返回值从0~6,分别对应周日~周六 getDay 0 1 2 3 4 5 6 星期几 周日 周一 周二 周三 周四 周五 周六 用到日期相关的需求时需要将getDay返回的值转成星期几,即"这一天"是星期几?比如日历组件中选择日历后返回 "2014-12-22 周一". 这是一段依然在线上运行的代码 复制代码 代码如下: /*  * 根据Date对象返回星期几  *  @param {

  • JavaScript中Date对象的常用方法示例

    getFullYear() 使用 getFullYear() 获取年份. 源代码: </script> <!DOCTYPE html> <html> <body> ​ <p id="demo">Click the button to display the full year of todays date.</p> ​ <button onclick="myFunction()">T

  • 浅谈JavaScript中Date(日期对象),Math对象

    Date对象 1.什么是Date对象? 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒). 语法:var Udate=new Date(); 注:初始值为当前时间(当前电脑系统时间). 2.Date对象常用方法: 3.Date方法实例 复制代码 代码如下: var newTime=new Date();//获取当前时间             var millSecond=Date.now();//当前日期转换成的毫秒数             var fullYear=n

  • JavaScript中判断对象类型的几种方法总结

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

  • 深入理解JavaScript中的对象复制(Object Clone)

    JavaScript中并没有直接提供对象复制(Object Clone)的方法.因此下面的代码中改变对象b的时候,也就改变了对象a. a = {k1:1, k2:2, k3:3}; b = a; b.k2 = 4; 如果只想改变b而保持a不变,就需要对对象a进行复制. 用jQuery进行对象复制 在可以使用jQuery的情况下,jQuery自带的extend方法可以用来实现对象的复制. a = {k1:1, k2:2, k3:3}; b = {}; $.extend(b,a); 自定义clone

  • 跟我学习javascript的Date对象

    本篇主要介绍Date 日期和时间对象的操作. 1. 介绍 1.1 说明 Date对象,是操作日期和时间的对象.Date对象对日期和时间的操作只能通过方法. 1.2 属性 无: Date对象对日期和时间的操作只能通过方法. 2. 构造函数 2.1 new Date() :返回当前的本地日期和时间 参数:无 返回值: {Date} 返回一个表示本地日期和时间的Date对象. 示例: var dt = new Date(); console.log(dt); // => 返回一个表示本地日期和时间的D

随机推荐