☰

Avatar Progress Border (Beta)

Modify avatar border to show progress

当前为 2024-10-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Avatar Progress Border (Beta)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Modify avatar border to show progress
  6. // @author       卡洛驰
  7. // @match        *blog.csdn.net/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 目标值
  16.     const targetValues = [10, 100, 1000, 10000, 100000, 10000000];
  17.     // 颜色数组，每两个目标值使用一个颜色
  18.     const colors = ['#badc58', '#22a6b3', '#eb4d4b', '#f9ca24', '#eb4d4b', '#7e4df3', '#262626'];
  19.  
  20.  
  21.     // 获取粉丝数
  22.     const fanCountElement = document.querySelectorAll('.user-profile-head-info-r-c .user-profile-statistics-num')[3];
  23.  
  24.     if (fanCountElement) {
  25.         const currentValue = parseInt(fanCountElement.textContent.replace(/,/g, ''), 10);
  26.  
  27.         // 找到最接近的目标值
  28.         let targetValue = targetValues[0];
  29.         for (let i = 0; i < targetValues.length; i++) {
  30.             if (currentValue < targetValues[i]) {
  31.                 targetValue = targetValues[i];
  32.                 break;
  33.             }
  34.         }
  35.  
  36.         console.log(currentValue, targetValue);
  37.         const progressPercentage = Math.min((currentValue / targetValue) * 100, 100); // 计算进度百分比，最大为100%
  38.  
  39.         // 获取对应的颜色
  40.         const colorIndex = targetValues.indexOf(targetValue);
  41.         const progressColor = colors[colorIndex];
  42.         console.log(colorIndex, progressColor);
  43.  
  44.         // 创建样式
  45.         const style = document.createElement('style');
  46.         style.textContent = `
  47.             .user-profile-head .user-profile-head-info .user-profile-head-info-l .user-profile-head-info-ll .user-profile-avatar[data-v-d1dbb6f8] {
  48.                 position: absolute;
  49.                 top: -12px;
  50.                 width: 102px;
  51.                 height: 102px;
  52.                 border-radius: 50%;
  53.                 background: #fff;
  54.                 border: 4px solid transparent !important; /* 边框颜色设置为透明 */
  55.                 background-image: conic-gradient(
  56.                     ${progressColor} 0% ${progressPercentage}%, /* 进度 */
  57.                     #f0f0f2 ${progressPercentage}% 100% /* 灰色部分表示剩余 */
  58.                 );
  59.                 background-origin: border-box;
  60.                 background-clip: border-box;
  61.             }
  62.  
  63.             .user-profile-avatar img {
  64.                 border-radius: 50%;
  65.                 width: 100%;
  66.                 height: 100%;
  67.                 display: block;
  68.             }
  69.  
  70.             .user-profile-head-info-ll .data-display {
  71.                 position: absolute;
  72.                 top: -40px; /* 悬浮于头像上面10px */
  73.                 left: 50%; /* 水平居中 */
  74.                 transform: translateX(-50%); /* 使其真正居中 */
  75.                 background-color: #33333380; /* 背景色，半透明 */
  76.                 color: white; /* 字体颜色 */
  77.                 padding: 5px 10px; /* 内边距 */
  78.                 border-radius: 5px; /* 圆角边框 */
  79.                 font-size: 14px; /* 字体大小 */
  80.                 text-align: center; /* 文本居中 */
  81.             }
  82.         `;
  83.  
  84.         // 将样式添加到文档头部
  85.         document.head.appendChild(style);
  86.  
  87.         // 创建数据展示模块
  88.         const dataDisplay = document.createElement('div');
  89.         dataDisplay.className = 'data-display';
  90.         dataDisplay.textContent = `${currentValue}/${targetValue}`; // 格式为“23/100”
  91.  
  92.         // 将数据展示模块添加到头像上方
  93.         const avatarElement = document.querySelector('.user-profile-head .user-profile-head-info .user-profile-head-info-l .user-profile-head-info-ll .user-profile-avatar[data-v-d1dbb6f8]');
  94.         avatarElement.appendChild(dataDisplay);
  95.     }
  96. })();