根据数字显示进度条长度根据1到5的数值动态显示进度条的长度，可以使用一个函数来计算进度条的宽度，并根据这些值来设置进度条

根据1到5的数值动态显示进度条的长度，可以使用一个函数来计算进度条的宽度，并根据这些值来设置进度条的长度。以下是具体实现：

HTML

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bars</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="progress-container">
    <div class="progress-bar" data-value="1">1</div>
    <div class="progress-bar" data-value="2">2</div>
    <div class="progress-bar" data-value="3">3</div>
    <div class="progress-bar" data-value="4">4</div>
    <div class="progress-bar" data-value="5">5</div>
</div>

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

CSS (styles.css)

css
コードをコピーする
body {
    font-family: Arial, sans-serif;
}

.progress-container {
    width: 100%;
    max-width: 600px;
    margin: 20px auto;
}

.progress-bar {
    position: relative;
    height: 30px;
    margin-bottom: 10px;
    background: linear-gradient(to right, green, white);
    color: black;
    text-align: center;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

JavaScript (script.js)

javascript
コードをコピーする
document.addEventListener("DOMContentLoaded", function() {
    function setProgressBarWidths() {
        const progressBars = document.querySelectorAll('.progress-bar');
        progressBars.forEach(bar => {
            const value = parseInt(bar.getAttribute('data-value'));
            const width = calculateWidth(value);
            bar.style.width = width + 'px';
        });
    }

    function calculateWidth(value) {
        const baseWidth = 20; // Width multiplier in pixels per unit
        return value * baseWidth;
    }

    setProgressBarWidths();
});

解释

HTML:
- progress-container 中包含多个 progress-bar，每个 progress-bar 有一个 data-value 属性，表示进度值（1到5）。
CSS:
- 基本样式定义了进度条的外观，包括高度、背景颜色（渐变）、文本对齐、边框和圆角。
JavaScript:
- DOMContentLoaded 事件监听器确保脚本在 DOM 完全加载后执行。
- setProgressBarWidths 函数选择所有具有 progress-bar 类的元素，并为每个元素计算并设置宽度。
- calculateWidth 函数根据传入的值计算进度条的宽度。这里设定每个单位值为20像素（你可以根据需要调整这个值）。
- setProgressBarWidths 函数被调用来初始化进度条的宽度。

效果

每个进度条的长度根据其 data-value 动态设置。
例如，值为1的进度条长度为20像素，值为5的进度条长度为100像素。