最近在使用一款upupoo的壁紙軟件,感覺還可以,主要是對其中html可設置為壁紙方面情有獨鍾
前幾天在它的網頁區發現了一個壁紙,感覺挺好:
感覺內容有點少,今天在工作空余時間就在其中加上了農歷,同時設置了每天顯示的文字不同;
在壁紙保存的文件夾里,可以直接找到該壁紙的Html文件(這一點我比較喜歡)
打開文件后,在其中加上農歷轉換js:
//農歷 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(); } }
在body中加一個div來顯示農歷:
<div id="nong" style="font-size: 30px;"> </div>
在最后調用一下即可:
//農歷 var yy=date.getFullYear(); var mm=date.getMonth()+1; var dd=date.getDate(); if (yy<100) yy="19"+yy; document.getElementById('nong').innerHTML = GetLunarDay(yy,mm,dd);
到這里,農歷就加完了;
下面來更改每天提示語:
在原本div上加一個id:
<div class="text" id = "text" ></div>
在js中加入代碼:
text = new Array("明天又要上班了呢","新的一周開始了", "新的一天又開始了呢", "過了星期三,翻過一座山", "過了星期四,只剩半天班", "革命最后的勝利","真是美好的一天呢")[date.getDay()]; document.getElementById('text').innerHTML = text;
一周內,每天顯示的就不一樣了!!!
以下是html完整代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } html, body, .main { width: 100%; height: 100%; font-family: 'STHupo'; overflow: hidden; } .main { background-color: #3CC4FF; color: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; } #time, #date, #week { /*font-size: 10vw;*/ display: flex; align-items: center; justify-content: center; } #time { font-size: 16vw; } #date { /*font-size: 10vw;*/ display: flex; align-items: center; justify-content: center; } .top { font-size: 4vw; display: flex; flex-direction: row; align-items: center; justify-content: space-around; width: 70%; } .wrap { width: 90vw; height: 90vh; background-color: #184E66; border-radius: 2vw; display: flex; flex-direction: column; align-items: center; justify-content: center; } .text { font-size: 4vw; } #s { font-size: 8vw; margin-left: 1vw; margin-bottom: 5vh; } .timewrap{ display: flex; flex-direction: row; justify-content: center; align-items: flex-end; } </style> </head> <body> <div class="main"> <div class="wrap"> <div class="top"> <div id="date"> </div> <div id="nong" style="font-size: 30px;"> </div> <div id="week"> </div> </div> <div class="timewrap"> <div id="time"> </div> <div id="s"></div> </div> <div class="text" id = "text" ></div> </div> </div> </body> <script> //農歷 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(); } } var time; setInterval(function (args) { var date = new Date();//時間戳為10位需*1000,時間戳為13位的話不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()); // D = date.getDate() + ' '; h = (date.getHours() < 10 ? '0' + (date.getHours() + ':') : date.getHours() + ':'); // h = date.getHours() + ':'; m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()); // m = date.getMinutes() + ':'; s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds()); // s = date.getSeconds(); day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()]; text = new Array("明天又要上班了呢","新的一周開始了", "新的一天又開始了呢", "過了星期三,翻過一座山", "過了星期四,只剩半天班", "革命最后的勝利","真是美好的一天呢")[date.getDay()]; date2 = Y + M + D index = h + m document.getElementById('date').innerHTML = date2; document.getElementById('s').innerHTML = s; document.getElementById('time').innerHTML = index; document.getElementById('week').innerHTML = day; document.getElementById('text').innerHTML = text; //農歷 var yy=date.getFullYear(); var mm=date.getMonth()+1; var dd=date.getDate(); if (yy<100) yy="19"+yy; document.getElementById('nong').innerHTML = GetLunarDay(yy,mm,dd); }, 1000) </script> </html>
效果圖如下:
在這其中,我還使用了電腦管家的一鍵桌面整理,主要是讓桌面看起來整潔,當然這可以更根據自己喜好來更改。