php - 在进度条之外显示投票进度条的百分比

Question

我正在使用此代码进行网络作业：
http ://csstechniques.blogspot.sg/2007/05/super-simple-css-bars.html

但是我如何显示进度条外栏的百分比，如下所示：？

我尝试了很多方法，这让我发疯。我也用谷歌搜索过，但大多数结果都是使用 jQuery 得出的，我不应该将其用于我的作业（仅 CSS、HTML 和 PHP）。

非常感谢您的帮助。

Answer 1

你的html是这样的：

<div class="progress-container">
  <div style="width:95%"></div>
</div>

您将需要其他元素来显示百分比文本，如下所示：

<div class="progress-container">
  <div style="width:95%"></div>
</div>
<p class="percentage-text">
  <span class="percentage-number">95</span>%
</p>

然后您可以查询百分比数字元素并使用 JavaScript 更改文本，如下所示：

var number = 95; // this is the same number you are using to change the graph.
var perc = document.querySelector(".percentage-number");
perc.innerHTML = number;

查看MDN 文档中的querySelector、querySelectorAll、getElementById、getElementsByTagName 等。这将对您有很大帮助。顺便说一句，querySelector 和 querySelectorAll 仅适用于现代浏览器（包括 IE8+）。这就是人们使用 jQuery 来做这些事情的原因之一。