whatshot[网页插件] 给首页添加一个显示一年的时间进度条

@Ta 07-02 18:34 27点击

没事看看今年过了多少了, 鼓励自己赶紧学习.

2019/06/24 19:40 更新

2019/06/24 16:00 更新

代码

  1. <!-- Today 插件开始 -->
  2. <!-- Today css代码 -->
  3. <style>
  4.     .container_today {
  5.         margin: 0 auto;
  6.         background: #2f3640;
  7.         padding: 5px;
  8.         border-radius: 0 0 5px 5px;
  9.     }
  10.  
  11.     /* 头部 */
  12.     .header_today {
  13.         text-align: center;
  14.         height: 30px;
  15.         line-height: 30px;
  16.         font-size: 20px;
  17.         position: relative;
  18.     }
  19.     .header_today .year_today {
  20.         color: white;
  21.         position: absolute;
  22.         left: 5px;
  23.     }
  24.     .header_today .per_today {
  25.         color: #E03255;
  26.         font-weight: 900;
  27.     }
  28.     .header_today .detail_today {
  29.         color: #BCF745;
  30.         position: absolute;
  31.         right: 5px;
  32.         top: 0px;
  33.     }
  34.  
  35.     /* 天数 */
  36.     .dots_today .dot_today {
  37.         width: 8px;
  38.         height: 8px;
  39.         border-radius: 50%;
  40.         display: inline-block;
  41.         background: #34645D;
  42.         margin: 0 2px;
  43.     }
  44.     .dots_today .active_today {
  45.         background: #14F7CD;
  46.     }
  47.  
  48.     /* 动画 */
  49.  
  50.     /* chrome */
  51.     @-webkit-keyframes stars{
  52.         0% {
  53.             background: #34645D;
  54.         }
  55.         25% {
  56.             background: #14F7CD;
  57.         }
  58.         50% {
  59.             background: #34645D;
  60.         }
  61.         75% {
  62.             background: #14F7CD;
  63.         }
  64.         100% {
  65.             background: #34645D;
  66.         }
  67.     }
  68.  
  69.     /* firefox */
  70.     @-moz-keyframes stars{
  71.         0% {
  72.             background: #34645D;
  73.         }
  74.         25% {
  75.             background: #14F7CD;
  76.         }
  77.         50% {
  78.             background: #34645D;
  79.         }
  80.         75% {
  81.             background: #14F7CD;
  82.         }
  83.         100% {
  84.             background: #34645D;
  85.         }
  86.     }
  87.  
  88.     .lamp_today {
  89.         -webkit-animation: stars 3s ease 0s infinite;
  90.         -moz-animation: stars 3s ease 0s infinite;
  91.     }
  92. </style>
  93.  
  94. <!-- hu60 内部的JQ -->
  95. <script src="/tpl/jhin/js/jquery-3.1.1.min.js"></script>
  96.  
  97. <!-- Today js代码 -->
  98. <script>
  99.     Today = {
  100.         data: {
  101.             year: new Date().getFullYear(),
  102.             month: new Date().getMonth(),
  103.             day: new Date().getDate(),
  104.             year_sum: 0,
  105.             today_sum: 0,
  106.             per: 0
  107.         },
  108.         init: function (ele) {
  109.             this.data.year_sum = this.getYearDayNum()
  110.             this.data.today_sum = this.getToDay()
  111.             this.data.per = Math.floor(this.data.today_sum / this.data.year_sum * 100) + '%'
  112.  
  113.             this.createLayout(ele)
  114.  
  115.             console.log("%c wzblog(惜梦) %c http://github.com/wzblog and https://blog.wz52.cn/project.html", "color: #fff; background-image: linear-gradient(90deg, rgb(47, 172, 178) 0%, rgb(45, 190, 96) 100%); padding:5px 1px;", "background-image: linear-gradient(90deg, rgb(45, 190, 96) 0%, rgb(255, 255, 255) 100%); padding:5px 0;");
  116.         },
  117.         createLayout: function (ele) {
  118.             // 创建容器
  119.             var container = $('<div></div>').addClass('container_today')
  120.  
  121.             // 创建头部
  122.             var header = $('<div></div>').addClass('header_today')
  123.  
  124.             // 创建年份
  125.             var year = $('<div></div>').addClass('year_today')
  126.  
  127.             // 创建进度
  128.             var per = $('<div></div>').addClass('per_today')
  129.  
  130.             // 创建天数详情
  131.             var detail = $('<div></div>').addClass('detail_today')
  132.  
  133.             // 创建天数盒子
  134.             var dots = $('<div></div>').addClass('dots_today')
  135.  
  136.  
  137.             // 组合布局
  138.             // 插入头部
  139.             year.html(this.data.year)
  140.             header.append(year)
  141.  
  142.             per.html(this.data.per)
  143.             header.append(per)
  144.  
  145.             detail.html(this.data.today_sum + '/' + this.data.year_sum)
  146.             header.append(detail)
  147.  
  148.             container.append(header)
  149.  
  150.             // 插入点
  151.  
  152.             for (var i = 0; i < this.data.year_sum; i++) {
  153.                 var dot
  154.  
  155.                 if (i < this.data.today_sum) {
  156.                     dot = this.createDot(true)
  157.                     if (i == this.data.today_sum - 1) {
  158.                         dot.addClass('lamp_today')
  159.                     }
  160.                 } else {
  161.                     dot = this.createDot()
  162.                 }
  163.  
  164.                 dots.append(dot)
  165.             }
  166.  
  167.             container.append(dots)
  168.  
  169.             // 插入容器
  170.             $(ele).append(container)
  171.         },
  172.         // 创建点
  173.         createDot: function (mark) {
  174.             var dot = $('<a></a>').addClass('dot_today')
  175.  
  176.             if (mark === true) {
  177.                 dot.addClass('active_today')
  178.             }
  179.  
  180.             return dot
  181.         },
  182.         // 获取全年天数
  183.         getYearDayNum: function () {
  184.             var days = 0
  185.             for (var i = 1; i < 13; i++) {
  186.                 var d = new Date(this.data.year, i, 0)
  187.                 days += d.getDate()
  188.             }
  189.             return days
  190.         },
  191.         // 获取从本年1月1日到现在的天数
  192.         getToDay: function () {
  193.             var days = 0
  194.             for (var i = 1; i <= this.data.month; i++) {
  195.                 var d = new Date(this.data.year, i, 0)
  196.                 days += d.getDate()
  197.             }
  198.             days += this.data.day
  199.             return days
  200.         }
  201.     }
  202.  
  203. $(document).ready(function () {
  204.     if (location.pathname == "/q.php/index.index.html") {
  205.         $('.container').prepend('<div class="today" style="margin: 10px 0"></div>')
  206.         Today.init('.today')
  207.     }
  208. })
  209. </script>
  210.  
  211. <!-- Today 插件结束 -->
回复列表(0)
帖子没有回复
添加新回复
回复需要登录
[聊天-微语]胖罗9:给我一些时间