最近在使用一款upupoo的壁纸软件，感觉还可以，主要是对其中html可设置为壁纸方面情有独钟

前几天在它的网页区发现了一个壁纸，感觉挺好：

感觉内容有点少，今天在工作空余时间就在其中加上了农历，同时设置了每天显示的文字不同；

在壁纸保存的文件夹里，可以直接找到该壁纸的Html文件（这一点我比较喜欢）

打开文件后，在其中加上农历转换js:

  1.     //农历
  2.             var CalendarData=new Array(100);
  3.             var madd=new Array(12);
  4.             var tgString="甲乙丙丁戊己庚辛壬癸";
  5.             var dzString="子丑寅卯辰巳午未申酉戌亥";
  6.             var numString="一二三四五六七八九十";
  7.             var monString="正二三四五六七八九十冬腊";
  8.             var weekString="日一二三四五六";
  9.             var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪";
  10.             var cYear,cMonth,cDay,TheDate;
  11.             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);
  12.             madd[0]=0;
  13.             madd[1]=31;
  14.             madd[2]=59;
  15.             madd[3]=90;
  16.             madd[4]=120;
  17.             madd[5]=151;
  18.             madd[6]=181;
  19.             madd[7]=212;
  20.             madd[8]=243;
  21.             madd[9]=273;
  22.             madd[10]=304;
  23.             madd[11]=334;
  24.  
  25.             function GetBit(m,n){
  26.                 return (m>>n)&1;
  27.             }
  28.             function e2c(){
  29.                 TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);
  30.                 var total,m,n,k;
  31.                 var isEnd=false;
  32.                 var tmp=TheDate.getYear();
  33.                 if(tmp<1900){
  34.                     tmp+=1900;
  35.                 }
  36.                 total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38;
  37.  
  38.                 if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) {
  39.                     total++;
  40.                 }
  41.                 for(m=0;;m++){
  42.                     k=(CalendarData[m]<0xfff)?11:12;
  43.                     for(n=k;n>=0;n--){
  44.                         if(total<=29+GetBit(CalendarData[m],n)){
  45.                             isEnd=true; break;
  46.                         }
  47.                         total=total-29-GetBit(CalendarData[m],n);
  48.                     }
  49.                     if(isEnd) break;
  50.                 }
  51.                 cYear=1921 + m;
  52.                 cMonth=k-n+1;
  53.                 cDay=total;
  54.                 if(k==12){
  55.                     if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){
  56.                         cMonth=1-cMonth;
  57.                     }
  58.                     if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){
  59.                         cMonth--;
  60.                     }
  61.                 }
  62.             }
  63.  
  64.             function GetcDateString(){
  65.                 var tmp="";
  66.                 tmp+=tgString.charAt((cYear-4)%10);
  67.                 tmp+=dzString.charAt((cYear-4)%12);
  68.                 tmp+="(";
  69.                 tmp+=sx.charAt((cYear-4)%12);
  70.                 tmp+=")年 ";
  71.                 if(cMonth<1){
  72.                     tmp+="(闰)";
  73.                     tmp+=monString.charAt(-cMonth-1);
  74.                 }else{
  75.                     tmp+=monString.charAt(cMonth-1);
  76.                 }
  77.                 tmp+="月";
  78.                 tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十"));
  79.                 if (cDay%10!=0||cDay==10){
  80.                     tmp+=numString.charAt((cDay-1)%10);
  81.                 }
  82.                 return tmp;
  83.             }
  84.  
  85.             function GetLunarDay(solarYear,solarMonth,solarDay){
  86.                 //solarYear = solarYear<1900?(1900+solarYear):solarYear;
  87.                 if(solarYear<1921 || solarYear>2020){
  88.                     return "";
  89.                 }else{
  90.                     solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;
  91.                     e2c(solarYear,solarMonth,solarDay);
  92.                     return GetcDateString();
  93.                 }
  94.             }

在body中加一个div来显示农历：

  1. <div id="nong" style="font-size: 30px;"> </div>

在最后调用一下即可：

  1. //农历
  2.             var yy=date.getFullYear();
  3.             var mm=date.getMonth()+1;
  4.             var dd=date.getDate();
  5.             if (yy<100) yy="19"+yy;
  6.  
  7.         document.getElementById('nong').innerHTML = GetLunarDay(yy,mm,dd);

到这里，农历就加完了；

下面来更改每天提示语：

 在原本div上加一个id:

  1. <div class="text" id = "text" ></div>

在js中加入代码：

  1. text = new Array("明天又要上班了呢","新的一周开始了", "新的一天又开始了呢", "过了星期三，翻过一座山", "过了星期四，只剩半天班", "革命最后的胜利","真是美好的一天呢")[date.getDay()];
  2.  
  3. document.getElementById('text').innerHTML = text;

一周内，每天显示的就不一样了！！！

以下是html完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.  
  12.         html, body, .main {
  13.             width: 100%;
  14.             height: 100%;
  15.             font-family: 'STHupo';
  16.             overflow: hidden;
  17.         }
  18.  
  19.         .main {
  20.             background-color: #3CC4FF;
  21.             color: #fff;
  22.             display: flex;
  23.             align-items: center;
  24.             justify-content: center;
  25.             flex-direction: column;
  26.         }
  27.  
  28.         #time, #date, #week {
  29.             /*font-size: 10vw;*/
  30.             display: flex;
  31.             align-items: center;
  32.             justify-content: center;
  33.         }
  34.  
  35.         #time {
  36.             font-size: 16vw;
  37.         }
  38.  
  39.         #date {
  40.             /*font-size: 10vw;*/
  41.             display: flex;
  42.             align-items: center;
  43.             justify-content: center;
  44.         }
  45.  
  46.         .top {
  47.             font-size: 4vw;
  48.             display: flex;
  49.             flex-direction: row;
  50.             align-items: center;
  51.             justify-content: space-around;
  52.             width: 70%;
  53.         }
  54.  
  55.         .wrap {
  56.             width: 90vw;
  57.             height: 90vh;
  58.             background-color: #184E66;
  59.             border-radius: 2vw;
  60.             display: flex;
  61.             flex-direction: column;
  62.             align-items: center;
  63.             justify-content: center;
  64.         }
  65.  
  66.         .text {
  67.             font-size: 4vw;
  68.         }
  69.  
  70.         #s {
  71.             font-size: 8vw;
  72.             margin-left: 1vw;
  73.             margin-bottom: 5vh;
  74.         }
  75.         .timewrap{
  76.             display: flex;
  77.             flex-direction: row;
  78.             justify-content: center;
  79.             align-items: flex-end;
  80.         }
  81.     </style>
  82. </head>
  83. <body>
  84. <div class="main">
  85.  
  86.     <div class="wrap">
  87.         <div class="top">
  88.             <div id="date">
  89.  
  90.             </div>
  91.  
  92.             <div id="nong" style="font-size: 30px;"> </div>
  93.             <div id="week">
  94.  
  95.             </div>
  96.         </div>
  97.  
  98.         <div class="timewrap">
  99.  
  100.             <div id="time">
  101.             </div>
  102.             <div id="s"></div>
  103.         </div>
  104.         <div class="text" id = "text" ></div>
  105.     </div>
  106.  
  107. </div>
  108. </body>
  109. <script>
  110.             //农历
  111.             var CalendarData=new Array(100);
  112.             var madd=new Array(12);
  113.             var tgString="甲乙丙丁戊己庚辛壬癸";
  114.             var dzString="子丑寅卯辰巳午未申酉戌亥";
  115.             var numString="一二三四五六七八九十";
  116.             var monString="正二三四五六七八九十冬腊";
  117.             var weekString="日一二三四五六";
  118.             var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪";
  119.             var cYear,cMonth,cDay,TheDate;
  120.             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);
  121.             madd[0]=0;
  122.             madd[1]=31;
  123.             madd[2]=59;
  124.             madd[3]=90;
  125.             madd[4]=120;
  126.             madd[5]=151;
  127.             madd[6]=181;
  128.             madd[7]=212;
  129.             madd[8]=243;
  130.             madd[9]=273;
  131.             madd[10]=304;
  132.             madd[11]=334;
  133.  
  134.             function GetBit(m,n){
  135.                 return (m>>n)&1;
  136.             }
  137.             function e2c(){
  138.                 TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]);
  139.                 var total,m,n,k;
  140.                 var isEnd=false;
  141.                 var tmp=TheDate.getYear();
  142.                 if(tmp<1900){
  143.                     tmp+=1900;
  144.                 }
  145.                 total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38;
  146.  
  147.                 if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) {
  148.                     total++;
  149.                 }
  150.                 for(m=0;;m++){
  151.                     k=(CalendarData[m]<0xfff)?11:12;
  152.                     for(n=k;n>=0;n--){
  153.                         if(total<=29+GetBit(CalendarData[m],n)){
  154.                             isEnd=true; break;
  155.                         }
  156.                         total=total-29-GetBit(CalendarData[m],n);
  157.                     }
  158.                     if(isEnd) break;
  159.                 }
  160.                 cYear=1921 + m;
  161.                 cMonth=k-n+1;
  162.                 cDay=total;
  163.                 if(k==12){
  164.                     if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){
  165.                         cMonth=1-cMonth;
  166.                     }
  167.                     if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){
  168.                         cMonth--;
  169.                     }
  170.                 }
  171.             }
  172.  
  173.             function GetcDateString(){
  174.                 var tmp="";
  175.                 tmp+=tgString.charAt((cYear-4)%10);
  176.                 tmp+=dzString.charAt((cYear-4)%12);
  177.                 tmp+="(";
  178.                 tmp+=sx.charAt((cYear-4)%12);
  179.                 tmp+=")年 ";
  180.                 if(cMonth<1){
  181.                     tmp+="(闰)";
  182.                     tmp+=monString.charAt(-cMonth-1);
  183.                 }else{
  184.                     tmp+=monString.charAt(cMonth-1);
  185.                 }
  186.                 tmp+="月";
  187.                 tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十"));
  188.                 if (cDay%10!=0||cDay==10){
  189.                     tmp+=numString.charAt((cDay-1)%10);
  190.                 }
  191.                 return tmp;
  192.             }
  193.  
  194.             function GetLunarDay(solarYear,solarMonth,solarDay){
  195.                 //solarYear = solarYear<1900?(1900+solarYear):solarYear;
  196.                 if(solarYear<1921 || solarYear>2020){
  197.                     return "";
  198.                 }else{
  199.                     solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11;
  200.                     e2c(solarYear,solarMonth,solarDay);
  201.                     return GetcDateString();
  202.                 }
  203.             }
  204.  
  205.     var time;
  206.     setInterval(function (args) {
  207.         var date = new Date();//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  208.         Y = date.getFullYear() + '-';
  209.         M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  210.         D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
  211.         // D = date.getDate() + ' ';
  212.         h = (date.getHours() < 10 ? '0' + (date.getHours() + ':') : date.getHours() + ':');
  213.         // h = date.getHours() + ':';
  214.         m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes());
  215.         // m = date.getMinutes() + ':';
  216.         s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
  217.         // s = date.getSeconds();
  218.  
  219.         day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
  220.         text = new Array("明天又要上班了呢","新的一周开始了", "新的一天又开始了呢", "过了星期三，翻过一座山", "过了星期四，只剩半天班", "革命最后的胜利","真是美好的一天呢")[date.getDay()];
  221.         date2 = Y + M + D
  222.         index = h + m
  223.  
  224.         document.getElementById('date').innerHTML = date2;
  225.         document.getElementById('s').innerHTML = s;
  226.         document.getElementById('time').innerHTML = index;
  227.         document.getElementById('week').innerHTML = day;
  228.         document.getElementById('text').innerHTML = text;
  229.  
  230.         //农历
  231.             var yy=date.getFullYear();
  232.             var mm=date.getMonth()+1;
  233.             var dd=date.getDate();
  234.             if (yy<100) yy="19"+yy;
  235.  
  236.         document.getElementById('nong').innerHTML = GetLunarDay(yy,mm,dd);
  237.  
  238.     }, 1000)
  239.  
  240. </script>
  241. </html>

效果图如下：

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

upupoo(网页壁纸)自主修改一：农历的更多相关文章

  1. js获取农历

    上一篇我们对upupoo网页壁纸改造时用到了农历,upupoo(网页壁纸)自主修改一:农历,这里记一下笔记: 获取当前农历的js 主js: //农历 var CalendarData=new Arra ...

  2. 利用WPF建立自己的3d gis软件（非axhost方式）（一）

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(一) 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密码:1te1 地 ...

  3. Python静态网页爬取：批量获取高清壁纸

    前言 在设计爬虫项目的时候,首先要在脑内明确人工浏览页面获得图片时的步骤 一般地,我们去网上批量打开壁纸的时候一般操作如下: 1.打开壁纸网页 2.单击壁纸图(打开指定壁纸的页面) 3.选择分辨率(我 ...

  4. 新浪随机图片壁纸API接口 刷新网页换背景接口

    刷新一次页面换一次图片,可以调用到你的网站背景里面去,多炫酷啊,刷新一下本页看下效果哦. 说明:随机图片壁纸api,调用的是新浪api,速度不用担心,图片资源也很多 电脑动漫图片:http://api ...

  5. 免费的高分辨率图库——re:splashed 可用做网页背景、设计或桌面壁纸

    想找高清图片用作网站背景.设计或桌面壁纸?可以去re:splashed看看.re:splashed 是一个提供免费高分辨率HD图片的网站,有多种分类标签,查找很方便,无需注册和登陆便可下载. 网站名称 ...

  6. Batsing的网页编程规范（HTML/CSS/JS/PHP）

    特别注意!!!我这里的前端编程规范不苟同于Bootstrap的前端规范. 因为我和它的目的不同,Bootstrap规范是极简主义,甚至有些没有考虑到兼容性的问题. 我的规范是自己从编程实践中总结出来的 ...

  7. 使用python编写一个壁纸网站的简单爬虫

    目标网站:http://www.netbian.com/ 目的:实现对壁纸各分类的第一页壁纸的获取 一:分析网站,编写代码: (ps:源代码在文章的最后) 1.获取网站目录部分的一大段代码,下一步再进 ...

  8. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  9. [深入浅出Windows 10]应用实战：Bing在线壁纸

    本章介绍一个使用Bing搜索引擎背景图接口实现的一个应用——Bing在线壁纸,讲解如何使用网络的接口来实现一个壁纸下载,壁纸列表展示和网络请求封装的内容.通过该例子我们可以学习到如何使用网络编程的知识 ...

随机推荐

  1. 任务49：Identity MVC：Model前端验证

    任务49:Identity MVC:Model前端验证 前端验证使用的是jquery的validate的组件 _ValidationScriptsPartial.cshtml 在我们的layout里面 ...

  2. Android应用开发基础篇（12）-----Socket通信（转载）

    转自:http://www.devdiv.com/android_socket_-blog-258060-10594.html 一.概述 网络通信无论在手机还是其他设备上都应用得非常广泛,因此掌握网络 ...

  3. 模拟模板替换功能--js

    概要: 因为之前的项目是angular开发(vue和react也是一样),对其中的双向数据绑定的使用感觉很方便,然后就思考怎么使用到jquery框架中来,适用于 列表生成 知识点: 正则与其反向引用, ...

  4. Vue-i18n实现语言切换

    方法1 Vue — i18n 国际化 全局配置 安 装 1.直接引入js文件 <script src="https://unpkg.com/vue/dist/vue.js"& ...

  5. Codeforces Round #408 (Div. 2) D. Police Stations（最小生成树+构造）

    传送门 题意 n个点有n-1条边相连,其中有k个特殊点,要求: 删去尽可能多的边使得剩余的点距特殊点的距离不超过d 输出删去的边数和index 分析 比赛的时候想不清楚,看了别人的题解 一道将1个联通 ...

  6. [置顶] 一位ACMer过来人的心得

    刻苦的训练我打算最后稍微提一下.主要说后者:什么是有效地训练? 我想说下我的理解.        很多ACMer入门的时候,都被告知:要多做题,做个500多道就变牛了.其实,这既不是充分条件.也不会是 ...

  7. 无法获得VMCI 驱动程序的版本: 句柄无效的解决方法

    关闭虚拟机,找到安装路径,用记事本打开.vmx结尾的文件 将vmci0.present = "TRUE"改为vmci0.present = "FALSE"保存

  8. 贪心 HDOJ 5090 Game with Pearls

    题目传送门 /* 题意:给n, k,然后允许给某一个数加上k的正整数倍,当然可以不加, 问你是否可以把这n个数变成1,2,3,...,n, 可以就输出Jerry, 否则输出Tom. 贪心:保存可能变成 ...

  9. 复习Java和前端、后端框架等。

    以下便是我开始复习时做的笔记.

  10. git导出代码

    1.快速查询 $git archive --format zip --output "./output.zip" master -0 ./output.zip 是生成的文件 mas ...