为电子邮件创建进度条

Question

我创建了一个通过调整宽度来改变的进度条。它看起来像这样：

进度条码：

<tr>

<td valign="top" class="textContent" style="background-color:#65b9a6;text-    align:center;color:#FFFFFF;font-size:20px;padding-top:5px;padding-bottom:5px;" >

100%

</td>

</tr>

<tr>

<td valign="top" class="textContent" style="font-                           size:16px;color:#616161;padding-top:10px;" >

</td>

</tr>

我真的很喜欢上面进度条的外观和感觉，但是我正在寻找一种通过 API 调整进度条进度的方法，我认为可以使用下面的代码来完成，因为它可以根据进度如：https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_progress

有没有办法合并这两个代码来创建更好的进度条？

Answer 1

不知道你在问什么。如果你想修改一个动作的进度条，你可以在每次你想更新进度时运行这个 JavaScript 代码：

document.getElementById("elementName").style.width = "100";

（其中elementName是分配给绿色部分的ID名称，"100"是进度条的宽度）

如果你有文本，你可以像这样更新它：

document.getElementById("elementName").innerHTML = "Text";

（其中elementName是分配给文本元素的ID名称，"Text"是您希望它显示的文本）

如果你使用progress 元素，你可以像这样更新它：

document.getElementById("elementName").value = "100";

（其中elementName 是分配给progress 元素的id 的名称，"100" 是相对于您的HTML 中分配的max 值完成的数量。）

如果您希望它是一个在静态时间内填充的静态动画，您可以使用 CSS 对其进行动画处理：

#elementName {
    animation: progressFill 1s;
}

@keyframes progressFill {
    from {width: 0%;}
    to {width: 100%;}
}

(其中#elementName是分配给绿色部分的id的名称，progressFill是动画所需的名称，1s是动画的长度。当然，这是假设width: 0%; 和 width: 100%; 提供所需的结果。）

我希望这会有所帮助。