一、寫在開頭
本項目是從github上摘取，自己練習使用后分享，方便登錄github的小伙伴可以看本篇文章
50項目50天?編輯https://github.com/bradtraversy/50projects50days
https://github.com/bradtraversy/50projects50days有興趣的小伙伴可以自己去github上查看。
二、項目開始
這里展示的進度條效果，鼠標點擊按鈕，進度條開始變化。
對應的，這里我先把代碼貼出，在一點點剖析
html頁面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="index.css"><title>進度條</title>
</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="index.js"></script>
</body></html>css
: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;
}js
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;}}
三、具體解析
html頁面
css
js
四、最后
希望這個案例可以幫助一些剛接觸html、css、JavaScript的小伙伴。學習知識很重要，但是必要的練習是必不可少的。
