使用JS实现一个自动变色的进度条

最新推荐文章于 2023-04-11 15:17:09 发布

小松果

最新推荐文章于 2023-04-11 15:17:09 发布

阅读量952

点赞数 3

分类专栏： JavaScript 文章标签： javascript js css

本文链接：https://blog.csdn.net/weixin_44939800/article/details/105011553

版权

本文展示了如何使用JavaScript和CSS实现一个动态变色的进度条。点击按钮，进度条会增加并伴随颜色变化；点击重置按钮，进度条则会恢复到初始状态。

摘要由CSDN通过智能技术生成

## 标题：使用JS实现一个自动变色的进度条

- 运行结果截图
- 源码

最近刚学到JS中变色龙效果和进度条的实现案例，在这里记录分享一下，这里点击暂停的按钮写成重置功能，有大神路过顺手指点下。

运行结果截图

运行结果图:
在这里插入图片描述
点击长(zhang)长(chang)按钮进度条开始增加并附带变色效果，点击重置按钮进度条清零。

源码

这里的效果是实现变色龙+进度条

// 实现变色龙+进度条效果
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #da {
   
            display: flex;
            margin: 100px auto;
            justify-content: space-around;
            align-items: center;
        }

        #big {
   
            width