使用rough-stuff/wired-elements实现手绘风格进度环组件教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00428/article/details/148415449

使用rough-stuff/wired-elements实现手绘风格进度环组件教程

wired-elements Collection of custom elements that appear hand drawn. Great for wireframes or a fun look. 项目地址: https://gitcode.com/gh_mirrors/wi/wired-elements

本文将详细介绍如何使用rough-stuff/wired-elements项目中的wired-progress-ring组件创建独特的手绘风格进度环，并实现动态控制功能。

组件概述

wired-progress-ring是rough-stuff/wired-elements库提供的一个Web组件，它能够渲染出具有手绘风格的环形进度条。这种风格特别适合需要非正式、创意或艺术感的Web应用场景。

基础使用

1. 引入组件

首先需要在HTML文件中引入必要的组件：

<script type="module" src="../lib/wired-progress-ring.js"></script>
<script type="module" src="../lib/wired-button.js"></script>

2. 基本属性

最简单的进度环可以通过设置value属性来显示进度：

<wired-progress-ring value="25" hideLabel></wired-progress-ring>

value: 设置当前进度值(0-100)
hideLabel: 隐藏默认显示的进度标签

3. 自定义范围

进度环支持自定义数值范围，而不仅限于0-100：

<wired-progress-ring id="wp2" min="-100" max="100" value="0"></wired-progress-ring>

min: 设置最小值
max: 设置最大值

样式定制

可以通过CSS变量来自定义进度环的外观：

#wp2 {
  --wired-progress-color: red;
}

可用的CSS变量包括：

--wired-progress-color: 进度条颜色
--wired-progress-track-color: 轨道颜色
--wired-progress-thickness: 进度条粗细

动态控制

1. 进度显示方式

<wired-progress-ring id="progress" showLabelAsPercent></wired-progress-ring>

showLabelAsPercent: 以百分比形式显示进度标签

2. 动态更新进度

通过JavaScript可以动态控制进度环的值：

const prog = document.getElementById('progress')
let timer = 0;

// 开始按钮点击事件
document.getElementById('btns').addEventListener('click', () => {
  if (timer) {
    window.clearInterval(timer);
  }
  timer = window.setInterval(() => {
    if (prog.value >= 100) {
      prog.value = 0;
    } else {
      prog.value = prog.value + 1;
    }
  }, 100);
});

// 停止按钮点击事件
document.getElementById('btnr').addEventListener('click', () => {
  if (timer) {
    window.clearInterval(timer);
    timer = 0;
  }
  prog.value = 0;
});

这段代码实现了：