前端html css js 练习巩固沉淀2

做一个这样的特效相当于步骤一样的样式逻辑

我直接粘贴代码了

<!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>
        @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

        :root {
            --line-border-fill: #3498db;
            --line-border-empty: #383838;

        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: #f1f1f1;
            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 {
            background-color: var(--line-border-fill);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: 4px;
            width: 0%;
            z-index: -1;
            transition: 0.4s ease;
        }

        .circle {
            background-color: #f1f1f1;
            color: #e2e2e2;
            border-radius: 50%;
            height: 30px;
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid var(--line-border-empty);
            transition: 0.4s 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:focus {
            outline: 0;
        }

        .btn:disabled {
            background-color: var(--line-border-empty);
            cursor: not-allowed;
        }
    </style>
</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 claas="btn" id="prev" disabled>prev</button>
        <button claas="btn" id="next">next</button>

    </div>
    <script>
        const progress = document.getElementById('progress')
        const prev = document.getElementById("prev")
        const next = document.getElementById("next")
        const circles = document.querySelectorAll(".circle")
        let currentActive = 1
        next.addEventListener('click', () => {
            currentActive++

            if (currentActive > circles.length) {
                currentActive = circles.length
            }

            update()
        })
        prev.addEventListener('click', () => {
            currentActive--

            if (currentActive < 1) {
                currentActive = 1
            }

            update()
        })

        function update() {
            circles.forEach((circle, idx) => {
                if (idx < currentActive) {
                    circle.classList.add("active")
                }
                else {
                    circle.classList.remove("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
            }
        }
    </script>

</body>

</html>

使用的原生js 开发的

大家可以去看看代码详细阅读一下

一下是重要的js 逻辑代码

  <script>
        const progress = document.getElementById('progress')
        const prev = document.getElementById("prev")
        const next = document.getElementById("next")
        const circles = document.querySelectorAll(".circle")
        let currentActive = 1
        next.addEventListener('click', () => {
            currentActive++

            if (currentActive > circles.length) {
                currentActive = circles.length
            }

            update()
        })
        prev.addEventListener('click', () => {
            currentActive--

            if (currentActive < 1) {
                currentActive = 1
            }

            update()
        })

        function update() {
            circles.forEach((circle, idx) => {
                if (idx < currentActive) {
                    circle.classList.add("active")
                }
                else {
                    circle.classList.remove("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
            }
        }
    </script>