js时间进度条怎么做

要制作一个JavaScript时间进度条，可以遵循以下步骤：使用HTML5、CSS和JavaScript创建进度条元素，设置进度条样式，使用JavaScript更新进度条的进度，利用setInterval或requestAnimationFrame函数实现时间更新。首先，我们创建一个简单的HTML模板，然后通过CSS进行样式设置，最后用JavaScript实现功能。

一、创建HTML结构

首先，我们需要在HTML文件中创建进度条的基本结构。这包括一个容器和一个表示进度的内部条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 时间进度条</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

接下来，我们为进度条添加样式，使其在页面上看起来美观。

/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
}
.progress-bar {
    width: 80%;
    height: 30px;
    background-color: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}
.progress {
    height: 100%;
    width: 0;
    background-color: #76c7c0;
    border-radius: 15px 0 0 15px;
    transition: width 0.25s;
}

三、用JavaScript实现功能

最后，我们用JavaScript来动态更新进度条的进度。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.querySelector('.progress');
    const totalDuration = 10000; // 10秒
    let startTime;
    function updateProgress() {
        const currentTime = Date.now();
        const elapsedTime = currentTime - startTime;
        const progressPercentage = Math.min(elapsedTime / totalDuration * 100, 100);
        progressBar.style.width = progressPercentage + '%';
        if (elapsedTime < totalDuration) {
            requestAnimationFrame(updateProgress);
        }
    }
    function startProgress() {
        startTime = Date.now();
        requestAnimationFrame(updateProgress);
    }
    startProgress();
});

四、细化功能和优化

为了使时间进度条更加实用，我们可以添加一些额外的功能，比如暂停和继续、重置进度条、以及在进度条完成时触发特定事件。

1、添加暂停和继续功能

<!-- 在HTML中添加按钮 -->
<div class="controls">
    <button id="pause">Pause</button>
    <button id="resume">Resume</button>
</div>

/* 添加按钮样式 */
.controls {
    margin-top: 20px;
}
button {
    padding: 10px 20px;
    margin: 0 10px;
    cursor: pointer;
}

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.querySelector('.progress');
    const totalDuration = 10000; // 10秒
    let startTime, pausedTime, isPaused = false;
    const pauseButton = document.getElementById('pause');
    const resumeButton = document.getElementById('resume');
    function updateProgress() {
        if (isPaused) return;
        const currentTime = Date.now();
        const elapsedTime = currentTime - startTime;
        const progressPercentage = Math.min(elapsedTime / totalDuration * 100, 100);
        progressBar.style.width = progressPercentage + '%';
        if (elapsedTime < totalDuration) {
            requestAnimationFrame(updateProgress);
        }
    }
    function startProgress() {
        startTime = Date.now();
        requestAnimationFrame(updateProgress);
    }
    pauseButton.addEventListener('click', function() {
        if (!isPaused) {
            pausedTime = Date.now();
            isPaused = true;
        }
    });
    resumeButton.addEventListener('click', function() {
        if (isPaused) {
            startTime += (Date.now() - pausedTime);
            isPaused = false;
            requestAnimationFrame(updateProgress);
        }
    });
    startProgress();
});

五、重置进度条

<!-- 添加重置按钮 -->
<button id="reset">Reset</button>

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.querySelector('.progress');
    const totalDuration = 10000; // 10秒
    let startTime, pausedTime, isPaused = false;
    const pauseButton = document.getElementById('pause');
    const resumeButton = document.getElementById('resume');
    const resetButton = document.getElementById('reset');
    function updateProgress() {
        if (isPaused) return;
        const currentTime = Date.now();
        const elapsedTime = currentTime - startTime;
        const progressPercentage = Math.min(elapsedTime / totalDuration * 100, 100);
        progressBar.style.width = progressPercentage + '%';
        if (elapsedTime < totalDuration) {
            requestAnimationFrame(updateProgress);
        }
    }
    function startProgress() {
        startTime = Date.now();
        requestAnimationFrame(updateProgress);
    }
    pauseButton.addEventListener('click', function() {
        if (!isPaused) {
            pausedTime = Date.now();
            isPaused = true;
        }
    });
    resumeButton.addEventListener('click', function() {
        if (isPaused) {
            startTime += (Date.now() - pausedTime);
            isPaused = false;
            requestAnimationFrame(updateProgress);
        }
    });
    resetButton.addEventListener('click', function() {
        isPaused = false;
        progressBar.style.width = '0%';
        startProgress();
    });
    startProgress();
});

六、实现进度条完成时的事件触发

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const progressBar = document.querySelector('.progress');
    const totalDuration = 10000; // 10秒
    let startTime, pausedTime, isPaused = false;
    const pauseButton = document.getElementById('pause');
    const resumeButton = document.getElementById('resume');
    const resetButton = document.getElementById('reset');
    function updateProgress() {
        if (isPaused) return;
        const currentTime = Date.now();
        const elapsedTime = currentTime - startTime;
        const progressPercentage = Math.min(elapsedTime / totalDuration * 100, 100);
        progressBar.style.width = progressPercentage + '%';
        if (elapsedTime < totalDuration) {
            requestAnimationFrame(updateProgress);
        } else {
            onProgressComplete();
        }
    }
    function startProgress() {
        startTime = Date.now();
        requestAnimationFrame(updateProgress);
    }
    function onProgressComplete() {
        alert('Progress complete!');
    }
    pauseButton.addEventListener('click', function() {
        if (!isPaused) {
            pausedTime = Date.now();
            isPaused = true;
        }
    });
    resumeButton.addEventListener('click', function() {
        if (isPaused) {
            startTime += (Date.now() - pausedTime);
            isPaused = false;
            requestAnimationFrame(updateProgress);
        }
    });
    resetButton.addEventListener('click', function() {
        isPaused = false;
        progressBar.style.width = '0%';
        startProgress();
    });
    startProgress();
});

通过以上步骤，你可以创建一个功能全面的JavaScript时间进度条，并且可以根据需要进行进一步的自定义和优化。