html日历菜鸟,菜鸟第一次发代码 -- JS日历
/************************ 运行区域 *********************/
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日历相关推荐
- 大家好!我是屁孩君儿子,今天给大家带来一个2020:【例4.5】第几项的题目(第一次发代码,很紧张!)代码如下
#include<bits/stdc++.h> using namespace std; int main() {int n,m,sum=0,i;cin>>m;for(i=0; ...
- 日历控件的android代码,Android日历控件PickTime代码实例
Android日历控件PickTime代码实例 发布时间:2020-10-03 16:05:51 来源:脚本之家 阅读:86 作者:手撕高达的村长 最近做项目,需要设置用户的生日,所以做这样一个功能. ...
- 身为菜鸟的我写了一个日历查询程序
身为菜鸟的我写了一个日历查询程序 这个程序能完成的功能: 1.输入年份得到年历 2.输入年月得到月历 3.输入年月日得到距今多少天并显示今天的日期,是否为公历节日,显示输入日期是星期几. 以下是程序代 ...
- JS日历控件集合----附效果图、源代码
在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为重要. 尽管ASP.NET也集成了日历控件,但是其集成的代码量很大,你可以做一个测试,当你在页面使用一个日历控件时,在发 ...
- JS日历控件优化(增加时分秒)
JS日历控件优化 在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下: 1. 在原基础上 支持 yyyy-mm- ...
- java显示日历 插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 生成日历主界面 FullC ...
- 原生js日历选择器插件开发实例教程
在web开发过程中经常会碰到需要选择日期的功能,一般的操作都是在文本框点击,然后弹出日历选择框,直接选择日期就可以在文本框显示选择的日期.开发好之后给用户使用是很方便,但如果每一个日历选择器都要临时开 ...
- 百度的Js日历,值得一看
转自: http://www.codefans.net/jscss/code/1715.shtml (有Demo) 本JavaScript日历是从百度网站里整理出来的,费了很大劲,因为感觉这个日历简直 ...
- html时间选择器时分秒,原生js日历日期控件带时分秒日期选择器
特效描述:原生js日历日期 时分秒日期选择器.时分秒日期选择 代码结构 1. 引入JS 2. HTML代码 [注意事项] 一.请千万勿移动laydate中的目录结构,它们具有完整的依赖体系.使用时,只 ...
最新文章
- 汽车与智能家居互联时代 语音控制很关键
- js 数组 实现 完全树_JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧
- SP Session
- AI:2020年6月22日北京智源大会演讲分享之09:00-09:50 全体大会《AI精度与隐私的博弈》
- 用JavaScript实现2+2=5的奥秘
- 【OpenCV 例程200篇】66. 图像滤波之低通/高通/带阻/带通
- php的开始和结束标记建议使用的是,php的开始和结束标记建议使用的是?
- CNCF Serverless工作流社区携手华为云FunctionGraph,开拓Serverless编排新时代
- mysql rr gap nextkey_mysql中的各种锁把我搞糊涂啦~
- 计算机网络物理层之数字传输系统
- php设计模式 -- 迭代器模式
- note同步不及时 one_续航800仅卖23万,比亚迪唐DM为啥却卖不过理想ONE?
- Database Design Best Practice (2)
- Ubuntu 20.10 wine、微信、QQ安装教程
- vue 下载pdf文件
- 鸿蒙支持ps4手柄吗,完美兼容PS4手柄!iPhone也能畅玩PS4,教程在此
- Android 稳定性面试一文通
- 从招式与内功谈起——设计模式概述(一)
- Oier们的幸运数字
- Who owns my data(2019/4/16)
热门文章
- 为什么使用累积分布函数处理后像素值会均匀分布_亿万级数据处理的高效解决方案
- iPhone 14仅两款Pro版搭载A16芯片 另外两款继续使用A15
- 苹果考虑3月8日或前后发布5G iPhone SE
- 腾讯第一季度总收入1353亿元 净利润478亿元
- 贾跃亭“站台”!乐视高调宣布回归:60余款新品发布,还将发布超级手机
- 人人影视字幕组因盗版视频被查 涉案金额1600余万元
- 小米卢伟冰回应“低价误国”言论:华为是中国企业“低价”战略的榜样
- 5G商用正式启动:最全套餐资费详情都在这里了
- 十一全国电影票房近8亿元 创春节档以来单日大盘新高
- 令人窒息!iPhone充电时自燃烧毁房子,到底是谁的锅?