/************************ 运行区域 *********************/

var nowDate = new Date().getTime();

var newDate = nowDate;

var tdArr = $('.td');

/*循环更新 时分秒*/

setInterval(showHMS,50);

/*显示日历内容*/

new Format(newDate).YMD();

new Calender(newDate).showDate();

/*给按钮绑定控制器改变日期  ***核心***  */

$('#yearDown,#yearUp,#monthUp,#monthDown').bind('click',function(){

var strBtn = $(this).attr('id');

newDate = ChangeDate(strBtn,newDate);

new Calender(newDate).showDate();

new Format(newDate).YMD();

});

//************************ 函数区域 **********************/

//显示时分秒

function showHMS(){

$('.timeDate').html(new Format(new Date()).HMS);

}

//格式化日期

function Format(date){                     // 外部传入的 date 参数应该是一个 毫秒数

if(!date){ date = new Date(); }          // 如果没有实参date 默认初始值为当前日期

else{ date = new Date(date);}            // 此时参数 date 是一个日期

this.year = date.getFullYear();

this.month = date.getMonth();

//this.day = date.getDate();

this.hours = function(){

var h = date.getHours();

h=h<10? '0'+h:h;

return h

};

this.minute = function(){

var m = date.getMinutes();

m = m<10? '0'+m:m;

return m

};

this.second = function(){

var s = date.getSeconds();

s = s<10? '0'+s:s;

return s

};

this.am = this.hours()>=12? '下午':'上午';

this.week=function(){

var w = ['sun','mon','wed','tue','thu','fri','sat'];

w = w[date.getDay()];

return w

};

this.YMD = function(){

$('.mainDate').html(this.year+'年'+(this.month+1)+'月');

};

this.HMS = this.am+' '+this.hours()+':'+this.minute()+':'+this.second();

}

//日历对象构造

function Calender(date){                          // 传入一个毫秒数

this.dateArr = function(){

var fstDay = date - (new Date(date).getDate()-1)*86400000;

var i = new Date(fstDay).getDay();

var nextDay = fstDay;

var nextDayArr = [];

var prevDay = fstDay;

nextDayArr.push(fstDay);

for(var j=0;j

if( 0 == i){ return nextDayArr }

else {

var prevDayArr = [];

for(var k=i;k>0;k--){prevDayArr.push( prevDay -= 86400000 );}

//拼接数组 得到当前日期日历盘的所有日期毫秒数

return prevDayArr.reverse().concat(nextDayArr);

}

};

this.showDate = function(){

var arrDate = this.dateArr();

var fstDay = date - (new Date(date).getDate()-1)*86400000;

var i = new Date(fstDay).getDay();

var d = monthDate(date);

for(var x=0;x<42;x++){

tdArr[x].style.backgroundColor =

(arrDate[x] == nowDate ? '#00bfff' : '' );

tdArr[x].style.color =

x  (i+d-1) ? '' : '#00bfff';

if(arrDate[x] == nowDate) {tdArr[x].style.color ='#fff5ee' }

tdArr[x].innerHTML = new Date(arrDate[x]).getDate();

}

}

}

//更改年月  日历数组控制器

function ChangeDate(btnStr,date){

var month = monthDate(date);

var day = new Date(date).getDate();

var bool = new Calender(date).dateArr()[0] >= 86400000;

if (true == bool) {

switch (btnStr) {

case 'monthUp':   date += (month-day+1) * 86400000;break;

case 'monthDown': date -= day * 86400000;break;

case 'yearUp':    date = month == 28 ? date + 86400000 * 365 : date + 86400000 * 366;break;

case 'yearDown':  date = month == 28 ? date - 86400000 * 365 : date - 86400000 * 366;break;

default :alert('ERROR CLICK!!!');break;

}

} else {alert('ERROR: FIRST PAGE OF THE WHOLE CALENDER!!!');}

return date;                          //返回主要的 毫秒数

}

//根据特殊月份 返回不同的月份天数

function monthDate(date) {

var month = new Date(date).getMonth() + 1;

var bool = this.specialYear(date);

if ('true' == bool){

return month == 2 ? 29 :

month == 4 ? 30 : month == 6 ? 30 :

month == 9 ? 30 : month == 11 ? 30 : 31

}

else {

return month == 2 ? 28 :

month == 4 ? 30 : month == 6 ? 30 :

month == 9 ? 30 : month == 11 ? 30 : 31

}

}

//是否是闰年

function specialYear(date){

var year = new Date(date).getFullYear();          //传入毫秒数 确认年份

return (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0) ? 'true' : 'false';

}

/*  html */

日一二三四五六

html日历菜鸟,菜鸟第一次发代码 -- JS日历相关推荐

  1. 大家好!我是屁孩君儿子,今天给大家带来一个2020:【例4.5】第几项的题目(第一次发代码,很紧张!)代码如下

    #include<bits/stdc++.h> using namespace std; int main() {int n,m,sum=0,i;cin>>m;for(i=0; ...

  2. 日历控件的android代码,Android日历控件PickTime代码实例

    Android日历控件PickTime代码实例 发布时间:2020-10-03 16:05:51 来源:脚本之家 阅读:86 作者:手撕高达的村长 最近做项目,需要设置用户的生日,所以做这样一个功能. ...

  3. 身为菜鸟的我写了一个日历查询程序

    身为菜鸟的我写了一个日历查询程序 这个程序能完成的功能: 1.输入年份得到年历 2.输入年月得到月历 3.输入年月日得到距今多少天并显示今天的日期,是否为公历节日,显示输入日期是星期几. 以下是程序代 ...

  4. JS日历控件集合----附效果图、源代码

    在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...

  5. JS日历控件优化(增加时分秒)

    JS日历控件优化  在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy-mm- ...

  6. java显示日历 插件_JavaWeb项目FullCalendar日历插件使用的示例代码

    本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 生成日历主界面 FullC ...

  7. 原生js日历选择器插件开发实例教程

    在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...

  8. 百度的Js日历,值得一看

    转自: http://www.codefans.net/jscss/code/1715.shtml (有Demo) 本JavaScript日历是从百度网站里整理出来的,费了很大劲,因为感觉这个日历简直 ...

  9. html时间选择器时分秒,原生js日历日期控件带时分秒日期选择器

    特效描述:原生js日历日期 时分秒日期选择器.时分秒日期选择 代码结构 1. 引入JS 2. HTML代码 [注意事项] 一.请千万勿移动laydate中的目录结构,它们具有完整的依赖体系.使用时,只 ...

最新文章

  1. 汽车与智能家居互联时代 语音控制很关键
  2. js 数组 实现 完全树_JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧
  3. SP Session
  4. AI:2020年6月22日北京智源大会演讲分享之09:00-09:50 全体大会《AI精度与隐私的博弈》
  5. 用JavaScript实现2+2=5的奥秘
  6. 【OpenCV 例程200篇】66. 图像滤波之低通/高通/带阻/带通
  7. php的开始和结束标记建议使用的是,php的开始和结束标记建议使用的是?
  8. CNCF Serverless工作流社区携手华为云FunctionGraph,开拓Serverless编排新时代
  9. mysql rr gap nextkey_mysql中的各种锁把我搞糊涂啦~
  10. 计算机网络物理层之数字传输系统
  11. php设计模式 -- 迭代器模式
  12. note同步不及时 one_续航800仅卖23万,比亚迪唐DM为啥却卖不过理想ONE?
  13. Database Design Best Practice (2)
  14. Ubuntu 20.10 wine、微信、QQ安装教程
  15. vue 下载pdf文件
  16. 鸿蒙支持ps4手柄吗,完美兼容PS4手柄!iPhone也能畅玩PS4,教程在此
  17. Android 稳定性面试一文通
  18. 从招式与内功谈起——设计模式概述(一)
  19. Oier们的幸运数字
  20. Who owns my data(2019/4/16)

热门文章

  1. 为什么使用累积分布函数处理后像素值会均匀分布_亿万级数据处理的高效解决方案
  2. iPhone 14仅两款Pro版搭载A16芯片 另外两款继续使用A15
  3. 苹果考虑3月8日或前后发布5G iPhone SE
  4. 腾讯第一季度总收入1353亿元 净利润478亿元
  5. 贾跃亭“站台”!乐视高调宣布回归:60余款新品发布,还将发布超级手机
  6. 人人影视字幕组因盗版视频被查 涉案金额1600余万元
  7. 小米卢伟冰回应“低价误国”言论:华为是中国企业“低价”战略的榜样
  8. 5G商用正式启动:最全套餐资费详情都在这里了
  9. 十一全国电影票房近8亿元 创春节档以来单日大盘新高
  10. 令人窒息!iPhone充电时自燃烧毁房子,到底是谁的锅?