upupoo(网页壁纸)自主修改一：农历

 

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

最近在使用一款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>

效果图如下：

在这其中，我还使用了电脑管家的一键桌面整理，主要是让桌面看起来整洁，当然这可以更根据自己喜好来更改。

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄