前端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>
相关推荐
奋斗的小羊羊28 分钟前
HTML5关键知识点之多种视频编码工具的使用方法
前端·音视频·html5
前端呆猿34 分钟前
深入解析HTML5中的object-fit属性
前端·css·html5
再学一点就睡34 分钟前
实现大文件上传全流程详解(补偿版本)
前端·javascript·面试
你的人类朋友2 小时前
【Node&Vue】什么是ECMAScript?
前端·javascript·后端
路灯下的光2 小时前
用scss设计一下系统主题有什么方案吗
前端·css·scss
l_tian_tian_2 小时前
SpringClound——网关、服务保护和分布式事务
linux·服务器·前端
一只小风华~3 小时前
CSS @media 媒体查询
前端·css·媒体
shix .3 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug4 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴4 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript