最近在使用一款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>
效果圖如下:

在這其中,我還使用了電腦管家的一鍵桌面整理,主要是讓桌面看起來整潔,當然這可以更根據自己喜好來更改。
