day02-progress-steps（进度条）

格式化小拓

已于 2023-07-16 20:55:20 修改

阅读量129

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

于 2023-06-29 21:19:42 首次发布

本文链接：https://blog.csdn.net/qq_51523316/article/details/131464539

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day02-progress-steps（进度条）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Steps</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="progress-container">
            <!-- 进度条 -->
            <div class="progress" id="progress"></div>
            <div class="circle active">1</div>
            <div class="circle">2</div>
            <div class="circle">3</div>
            <div class="circle">4</div>
        </div>
        <!-- 点击按钮 -->
        <button class="btn" id="prev" disabled>Prev-上一个</button>
        <button class="btn" id="next">Next-下一个</button>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
    --line-border-fill: #3498db;
    --line-border-empty: #e0e0e0;
    /* ":root" 选择器表示文档的根元素，通常是<html>元素。在根元素上定义的CSS变量可以在整个文档中使用。 */
}

* {
    box-sizing: border-box;
    /* 内减模式 */
}

body {
    background-color: #f6f7fb;
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    text-align: center;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
}

.progress-container::before {
    /* 伪元素用于设置灰色进度条 */
    content: '';
    background-color: var(--line-border-empty);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
    /* 将线条置于数字底部 */
}

.progress {
    /* 用于设置蓝色进度条，通过width */
    background-color: var(--line-border-fill);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 0%;
    z-index: -1;
    transition: 0.5s ease;
    /* 用于配合当宽度变化时，有过渡效果 */
}

.circle {
    background-color: #fff;
    color: #999;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 此处的flex布局用于设置数字居中 */
    border: 3px solid var(--line-border-empty);
    transition: 0.5s ease;
    /* 用于配合当颜色变化时，有过渡效果 */
}

.circle.active {
    border-color: var(--line-border-fill);
    /* 激活状态 */
}

.btn {
    /* 按钮样式 */
    background-color: var(--line-border-fill);
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 30px;
    margin: 5px;
    font-size: 14px;
}

.btn:active {
    transform: scale(0.98);
    /* 它只会在按钮被激活（按下）时生效。这可以为用户提供一种视觉反馈，让他们在按钮按下时感觉到按钮被按下的效果。 */
    /* 需要注意的是，这个样式只适用于拥有".btn"类的元素，并且只在按钮被按下时生效。 */
}

.btn:focus {
    outline: 0;
    /* 当一个带有".btn"类的按钮获得焦点时，移除它的默认外边框样式。 */
}

.btn:disabled {
    /* 当按钮被禁用时，这些样式将会生效。 */
    background-color: var(--line-border-empty);
    cursor: not-allowed;
    /* 将鼠标指针样式设置为"not-allowed"，表示当用户将鼠标悬停在按钮上时，鼠标指针将显示为禁止符号，表示按钮当前不可用。 */
}

script.js

// 重点是控制蓝色进度条的宽度。通过百分比

// 1.获取元素节点
const progress = document.querySelector("#progress");//蓝色进度条
const prev = document.getElementById('prev');
const next = document.getElementById('next');//左右按钮
const circles = document.querySelectorAll('.circle');//圆圈

let currentActive = 1;//当前显示完成圆圈的序号
//2.点击事件 下
next.addEventListener('click', () => {
    currentActive++;
    if (currentActive > circles.length) {
        currentActive = circles.length;
    }
    // 更新蓝色进度条的width和圆圈的active
    circles.forEach((circle, index) => {
        // 注意：index从0开始
        if (index < currentActive) {
            circle.classList.add('active');
        } else {
            circle.classList.remove('active');
        }
    })
    // 获取此时active的个数，用于处理蓝色进度条的比例
    const actives = document.querySelectorAll('.active');
    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';//重点
    // 临界状态的按钮显示效果，即是否可点击
    if (currentActive === 1) {
        prev.disabled = true;//将其禁用
    } else if (currentActive === circles.length) {
        next.disabled = true;
    } else {
        prev.disabled = false;
        next.disabled = false;
    }
})
//点击事件 上
prev.addEventListener('click', () => {
    currentActive--;
    if (currentActive < 1) {
        currentActive = 1;
    }
    // 更新蓝色进度条的width和圆圈的active
    circles.forEach((circle, index) => {
        // 注意：index从0开始
        if (index < currentActive) {
            circle.classList.add('active');
        } else {
            circle.classList.remove('active');
        }
    })
    // 获取此时active的个数，用于处理蓝色进度条的比例
    const actives = document.querySelectorAll('.active');
    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';//重点
    // 临界状态的按钮显示效果，即是否可点击
    if (currentActive === 1) {
        prev.disabled = true;//将其禁用
    } else if (currentActive === circles.length) {
        next.disabled = true;
    } else {
        prev.disabled = false;
        next.disabled = false;
    }
})

格式化小拓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
day02-progress-steps（进度条）

50 天学习 50 个项目 - HTMLCSS and JavaScriptday02-progress-steps（进度条）效果index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录