()
| 37 | |
| 38 | // 创建进度圆环 |
| 39 | function createProgressRing() { |
| 40 | if (progressElement) return; |
| 41 | |
| 42 | const params = getCircleParams(); |
| 43 | |
| 44 | // 创建主容器 |
| 45 | progressElement = document.createElement('div'); |
| 46 | progressElement.className = 'reading-progress'; |
| 47 | |
| 48 | // 创建背景圆环 |
| 49 | const ring = document.createElement('div'); |
| 50 | ring.className = 'reading-progress-ring'; |
| 51 | |
| 52 | // 创建SVG 进度环 |
| 53 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); |
| 54 | svg.setAttribute('class', 'reading-progress-svg'); |
| 55 | svg.setAttribute('viewBox', params.viewBox); |
| 56 | |
| 57 | // 创建背景圆 |
| 58 | const bgCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
| 59 | bgCircle.setAttribute('class', 'reading-progress-circle-bg'); |
| 60 | bgCircle.setAttribute('cx', params.center); |
| 61 | bgCircle.setAttribute('cy', params.center); |
| 62 | bgCircle.setAttribute('r', params.radius); |
| 63 | |
| 64 | // 创建进度圆 |
| 65 | progressCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); |
| 66 | progressCircle.setAttribute('class', 'reading-progress-circle'); |
| 67 | progressCircle.setAttribute('cx', params.center); |
| 68 | progressCircle.setAttribute('cy', params.center); |
| 69 | progressCircle.setAttribute('r', params.radius); |
| 70 | |
| 71 | svg.appendChild(bgCircle); |
| 72 | svg.appendChild(progressCircle); |
| 73 | |
| 74 | // 创建中心文字 |
| 75 | progressText = document.createElement('div'); |
| 76 | progressText.className = 'reading-progress-text'; |
| 77 | progressText.textContent = '0%'; |
| 78 | |
| 79 | // 组装元素 |
| 80 | progressElement.appendChild(ring); |
| 81 | progressElement.appendChild(svg); |
| 82 | progressElement.appendChild(progressText); |
| 83 | document.body.appendChild(progressElement); |
| 84 | |
| 85 | // 设置CSS变量（根据屏幕尺寸调整） |
| 86 | updateCircleSize(); |
| 87 | } |
| 88 | |
| 89 | // 更新圆形尺寸 |
| 90 | function updateCircleSize() { |
no test coverage detected