js获取时间、节假日、节气
2024-05-16 17:16:43
整理之前写的一个登录页面，包含js获取时间、节假日、节气，根据一天中各个时间段显示问候语，登陆背景也会根据节假日和24节气更换背景，为你的项目添加更多可能
一、一天中根据时间变换问候语
html
<div class="welcomeMsg"><span id="welcomeMsg"></span><span id="timeClock"></span></div>js
welcomeMsg();
tick();
function welcomeMsg(){now = new Date(),hour = now.getHours();if(hour == 23 || hour < 6){$("#welcomeMsg").html("别熬夜了，该睡觉了！");}else if(hour < 9){$("#welcomeMsg").html("早上好，开始美好的一天！");}else if(hour < 12){$("#welcomeMsg").html("上午好，加油工作！");}else if(hour < 13){$("#welcomeMsg").html("中午好，吃好休息好！");}else if(hour < 18){$("#welcomeMsg").html("下午好，继续努力工作！");}else if(hour < 23){$("#welcomeMsg").html("晚上好，放松心情！");}
}
//选择当前时间
function showLocale(objD){var str,colorhead,colorfoot;var yy = objD.getYear();if(yy<1900) yy = yy+1900;var MM = objD.getMonth()+1;if(MM<10) MM = '0' + MM;var dd = objD.getDate();if(dd<10) dd = '0' + dd;var hh = objD.getHours();if(hh<10) hh = '0' + hh;var mm = objD.getMinutes();if(mm<10) mm = '0' + mm;var ss = objD.getSeconds();if(ss<10) ss = '0' + ss;var ww = objD.getDay();if ( ww==0 );if ( ww > 0 && ww < 6 ) colorhead="<font class=\"white\">";if ( ww==6 ); colorhead1="<font class=\"nowtime\">";if (ww==0) ww="周日";if (ww==1) ww="周一";if (ww==2) ww="周二";if (ww==3) ww="周三";if (ww==4) ww="周四";if (ww==5) ww="周五";if (ww==6) ww="周六";colorfoot="</font>"str = colorhead1+ hh + ":" + mm + ":" + ss +colorhead1 + colorfoot;return(str);
}function tick()
{var today;today = new Date();//当前日期时间document.getElementById("timeClock").innerHTML = showLocale(today);window.setTimeout("tick()", 1000);
}效果如下：
二、根据节假日、节气变化背景
html
<div class="wrap"></div>css
.wrap{ position:fixed; top:0; right:0; bottom:0; left:0; background: #000 left center no-repeat; background-attachment: fixed; background-size: cover;
}js
var localpath = '../images/bg/';
changeBackground(localpath);
function changeBackground(localpath){var festivals={'2/14': localpath+'qingren.jpg',//情人节'3/8': localpath+'funv.jpg',//妇女节'3/12': localpath+'zhishu.jpg',//植树节'4/1': localpath+'yuren.jpg',//愚人节'4/22': localpath+'diqiu.jpg',//地球日'5/1': localpath+'laodong.jpg',//劳动节'5/4': localpath+'qingnian.jpg',//青年节'5/12': localpath+'hushi.jpg',//护士节'6/1': localpath+'ertong.jpg',//儿童节'7/1': localpath+'jiandang.jpg',//建党节'8/1': localpath+'jianjun.jpg',//建军节'9/10': localpath+'jiaoshi.jpg',//教师节'10/1': localpath+'guoqing.jpg',//国庆'10/2': localpath+'guoqing.jpg',//国庆'10/3': localpath+'guoqing.jpg',//国庆'11/1': localpath+'wansheng.jpg',//万圣节'12/24': localpath+'shengdan.jpg',//圣诞节'12/25': localpath+'shengdan.jpg',//圣诞节'12/30': localpath+'yuandan.jpg',//元旦'1/1': localpath+'yuandan.jpg',//元旦'腊月三十': localpath+'chuxi.jpg',//除夕'正月初一': localpath+'chunjie.jpg',//春节'二月初二': localpath+'longtaitou.jpg',//龙抬头'五月初五': localpath+'duanwu.jpg',//端午节'七月初七': localpath+'qixi.jpg',//七夕节'七月十五': localpath+'zhongyuan.jpg',//中元节'八月十五': localpath+'zhongqiu.jpg',//中秋节'九月初九': localpath+'chongyang.jpg',//重阳节'腊月初八': localpath+'laba.jpg',//腊八节'腊月二十三': localpath+'xiaonian.jpg',//小年'立春': localpath+'lichun.jpg',//节气'雨水': localpath+'yushui.jpg',//节气'惊蛰': localpath+'jingzhe.jpg',//节气'春分': localpath+'chunfen.jpg',//节气'清明': localpath+'qingming.jpg',//节气'谷雨': localpath+'guyu.jpg',//节气'立夏': localpath+'lixia.jpg',//节气'小满': localpath+'xiaoman.jpg',//节气'芒种': localpath+'mangzhong.jpg',//节气'夏至': localpath+'xiazhi.jpg',//节气'小暑': localpath+'xiaoshu.jpg',//节气'大暑': localpath+'dashu.jpg',//节气'立秋': localpath+'liqiu.jpg',//节气'处暑': localpath+'chushu.jpg',//节气'白露': localpath+'bailu.jpg',//节气'秋分': localpath+'qiufen.jpg',//节气'寒露': localpath+'hanlu.jpg',//节气'霜降': localpath+'shuangjiang.jpg',//节气'立冬': localpath+'lidong.jpg',//节气'小雪': localpath+'xiaoxue.jpg',//节气'大雪': localpath+'daxue.jpg',//节气'冬至': localpath+'dongzhi.jpg',//节气'小寒': localpath+'xiaohan.jpg',//节气'大寒': localpath+'dahan.jpg',//节气};now = new Date(),hour = now.getHours();var background = festivals[(now.getMonth()+1)+'/'+now.getDate()]; //节日var background1 = festivals[showCal()]; //农历节日var background2 = festivals[getjq(now.getFullYear(),now.getMonth()+1,now.getDate())]; //节气if(background == undefined){if(background1 == undefined){if(background2 == undefined){//非节假日、非节气日的早中晚背景if(hour >=7 && hour <=11){background = localpath+'morning.jpg';}else if(hour >=12 && hour <=17){background = localpath+'afternoon.jpg';}else {background = localpath+'evening.jpg';}}else{background = background2;}}else{background = background1;}}$('.wrap').css('background-image', 'url('+background+')');
}下面是获取农历和节气的方法
/*获取当前农历*/
function showCal(){ var D=new Date(); var yy=D.getFullYear(); var mm=D.getMonth()+1; var dd=D.getDate(); var ww=D.getDay(); var ss=parseInt(D.getTime() / 1000); if (yy<100) yy="19"+yy; return GetLunarDay(yy,mm,dd);
}
//定义全局变量
var CalendarData=new Array(100);
var madd=new Array(12);
var tgString="甲乙丙丁戊己庚辛壬癸";
var dzString="子丑寅卯辰巳午未申酉戌亥";
var numString="一二三四五六七八九十";
var monString="正二三四五六七八九十冬腊";
var weekString="日一二三四五六";
var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪";
var cYear,cMonth,cDay,TheDate;
CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x71695,0x6CA,0xB55,0x50AB5,0x4DA,0xA5B,0x30A57,0x52B,0x8152A,0xE95,0x6AA,0x615AA,0xAB5,0x4B6,0x414AE,0xA57,0x526,0x31D26,0xD95,0x70B55,0x56A,0x96D,0x5095D,0x4AD,0xA4D,0x41A4D,0xD25,0x81AA5,0xB54,0xB6A,0x612DA,0x95B,0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96,0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95,0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95);
madd[0]=0;
madd[1]=31;
madd[2]=59;
madd[3]=90;
madd[4]=120;
madd[5]=151;
madd[6]=181;
madd[7]=212;
madd[8]=243;
madd[9]=273;
madd[10]=304;
madd[11]=334;
function GetBit(m,n){ return (m>>n)&1;
}
//农历转换
function e2c(){ TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]); var total,m,n,k; var isEnd=false; var tmp=TheDate.getYear(); if(tmp<1900){ tmp+=1900;
}
total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38; if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) { total++;
}
for(m=0;;m++){ k=(CalendarData[m]<0xfff)?11:12; for(n=k;n>=0;n--){ if(total<=29+GetBit(CalendarData[m],n)){ isEnd=true; break; } total=total-29-GetBit(CalendarData[m],n); } if(isEnd) break;
}
cYear=1921 + m;
cMonth=k-n+1;
cDay=total;
if(k==12){ if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){ cMonth=1-cMonth; } if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){ cMonth--; }
}
}
function GetcDateString(){ var tmp=""; /*显示农历年：（ 如：甲午(马)年 ）*//*tmp+=tgString.charAt((cYear-4)%10); tmp+=dzString.charAt((cYear-4)%12); tmp+="("; tmp+=sx.charAt((cYear-4)%12); tmp+=")年 ";*/if(cMonth<1){ tmp+="(闰)"; tmp+=monString.charAt(-cMonth-1); }else{ tmp+=monString.charAt(cMonth-1); } tmp+="月"; tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十")); if (cDay%10!=0||cDay==10){ tmp+=numString.charAt((cDay-1)%10); } return tmp;
} function GetLunarDay(solarYear,solarMonth,solarDay){ //solarYear = solarYear<1900?(1900+solarYear):solarYear; if(solarYear<1921 || solarYear>2020){ return ""; }else{ solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11; e2c(solarYear,solarMonth,solarDay); return GetcDateString(); }
}// 节气
function getjq(yyyy,mm,dd){mm = mm-1;var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);var solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至");var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));var tmp2 = tmp1.getUTCDate();var solarTerms = "";if (tmp2==dd)solarTerms = solarTerm[mm*2+1];tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));tmp2= tmp1.getUTCDate();if (tmp2==dd) solarTerms = solarTerm[mm*2];return solarTerms;
}js获取时间、节假日、节气相关推荐
- js获取传统节假日_js判断节假日的代码分享
js判断节假日实例代码 效果展示: /************************************************************* * 判断某天是不是工作日 * * @ ...
- js获取传统节假日_在js中如何判断节假日
因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?其实实现代码很简单的.下面我给大家分享js判断节假日实例代码,需要的朋友参考下吧 效果展示: /********************** ...
- js获取时间年月日时间戳等方法
var myDate = new Date();//获取系统当前时间 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整 ...
- js 获取时间对象代码
/** * 获取时间对象 */ function getDateObj(addDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+addD ...
- js获取传统节假日_js 两个时间之间工作日的计算问题（包含节假日）
后端用vue写点前端代码,也是罪过...嗷嗷嗷 行吧 项目需求描述:需要对时间控件里面的两个时间计算出相隔多少个工作日(包含节假日),由于节假日每年都不确定.保证项目能够正常使用,录用了2018年和 ...
- vue使用moment.js获取时间
一.安装/引用插件moment.js npm install moment --saveimport moment from "moment" 二.使用 注:需要 年月日 的朋友只 ...
- js获取时间（yyyy-MM-dd HH:mm:ss）
/** * 获取当前时间 * * @return 返回时间类型 yyyy-MM-dd HH:mm:ss */ function sysTime(){ var myDate = ...
- js获取时间的年，月，日，季度，年份的代码收集和改编
****/** ** 获得当前时间*/**** function getCurrentDate() {return new Date() }/*** **获得该月的天数*** @param year年 ...
- 使用js获取时间并页面赋值
var date = new Date();date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth( ...
- js获取时间(本周、本季度、本月..)
/** * 获取本周.本季度.本月.上月的开端日期.停止日期 */ var now = new Date(); //当前日期 var nowDayOfWeek = now.getDay(); //今天 ...
最新文章
- 金蝶K/3 BOS产品培训教案
- Linux下的多线程编程
- java 正则 空格_Java中关于空格的正则表达式
- Flash Builder 4中文快速入门PDF
- libiconv android,iconv库 android ndk可运行
- python标准库模块——json库的用法
- 制造业各细分行业数据库（2000-2019年）
- vue 打包出现的问题解决
- CSS响应式布局--三栏布局实例演示及优缺点详解
- Android各种模拟器使用笔记
- 哈工大（HIT）计算机网络 翻转课堂 实验 mooc答案 总结
- 小程序中如何关注公众号
- Hi3531 平台开发,Hi3532 平台开发
- 语音如何转文字？建议收藏这些方法
- 修正逆解文章——六轴UR机械臂正逆运动学求解_MATLAB代码（标准DH参数表）
- jdbc.properties 系统找不到指定路径问题
- 曹则贤：量子力学从来不是什么革命，而是经典物理学的自然延续
- 使用百度云的图像识别
- Java作业之数组排序篇
- c语言 printf分栏输出,excel表格分栏打印输出的两种巧妙方法_excel教程