要在个人网站上实现一个简单的进度条效果，你可以使用HTML、CSS和JavaScript

本文链接：https://blog.youkuaiyun.com/blog_programb/article/details/107207931

本文介绍如何在个人网站上实现一个简单的进度条效果，利用HTML、CSS和JavaScript创建一个可动态更新的进度条。示例中详细说明了HTML结构、CSS样式以及JavaScript代码，包括增加和重置进度的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要在个人网站上实现一个简单的进度条效果，你可以使用HTML、CSS和JavaScript。下面是一个基本的示例，展示了如何创建一个简单的进度条，并使用JavaScript来动态更新它的进度。

HTML部分 (index.html):

html

简单进度条

<button onclick="incrementProgress()">增加进度</button>  
<button onclick="resetProgress()">重置进度</button>  

<script src="script.js"></script>

CSS部分 (styles.css):

css
.progress-bar-container {
width: 100%;
background-color: #f3f3f3;
border-radius: 20px;
overflow: hidden;
}

.progress-bar {
height: 20px;
background-color: #4CAF50;
width: 0%;
text-align: center;
line-height: 20px;
color: white;
border-radius: 20px;
}
JavaScript部分 (script.js):

javascript
var progressBar = document.getElementById(“progressBar”);
var progress = 0;

function incrementProgress() {
if (progress < 100) {
progress += 10; // 每次增加10%的进度
progressBar.style.width = progress + ‘%’;
progressBar.innerHTML = progress + ‘%’; // 显示当前进度百分比
}
}

function resetProgress() {
progress = 0;
progressBar.style.width = progress + ‘%’;
progressBar.innerHTML = progress + ‘%’;
}
在这个示例中，我们创建了一个包含进度条的容器（.progress-bar-container），并在其中放置了实际的进度条（.progress-bar）。进度条的宽度通过JavaScript动态设置，以显示不同的进度。

我们还添加了两个按钮，一个用于增加进度，另一个用于重置进度。当点击“增加进度”按钮时，incrementProgress 函数会被调用，进度会增加10%，并更新进度条的宽度和显示的百分比。当点击“重置进度”按钮时，resetProgress 函数会被调用，进度会被重置为0%。

你可以根据需要调整CSS样式和JavaScript逻辑，以适应你的个人网站设计和功能需求。
在这里插入图片描述

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>HTML5实现简单进度条效果</title>
 <script type="text/javascript">
        var i = 0;
        var res = 0;
        var context = null;
        var total_width = 300;
        var total_height = 34;
        var initial_x = 20;
        var initial_y = 20;
        var radius = total_height/2;
        window.onload = function() {
   
            var elem = document.getElementById('myCanvas');
            if (!elem || !elem.getContext) {
   
                return;
            }

            context = elem.getContext('2d');
            if (!context) {
   
                return;
            }

            // set font
            context.font = "16px Verdana";

            // Blue gradient for progress bar
            var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);
            progress_lingrad.addColorStop(0, '#4DA4F3');
            progress_lingrad.addColorStop(0.4, '#ADD9FF');
            progress_lingrad.addColorStop(1, '#9ED1FF');
            context.fillStyle = progress_lingrad;

            //draw();
            res = setInterval(draw, 30);
        }

        function draw() {
   
            i+=1;
            // Clear everything before drawing
            context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);
            progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);
            progressBarRect(context, initial_x, initial_y, i