整理之前写的一个登录页面，包含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;
}
8058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
