js点击赞成和反对实现投票,对应的票数累加点击赞成和返回的投票票数百分比显示在上方横条中
时间: 2024-03-01 13:16:07 浏览: 59
你可以使用JavaScript来实现点击赞成和反对的投票功能,并将票数累加后的百分比显示在上方横条中。下面是一个简单的实现示例:
HTML部分:
```html
<div id="votes">
<button id="upvote" onclick="upvote()">赞成</button>
<button id="downvote" onclick="downvote()">反对</button>
</div>
<div id="results">
<div id="progress-bar"></div>
<div id="percentage"></div>
</div>
```
JavaScript部分:
```javascript
let upvotes = 0;
let downvotes = 0;
function upvote() {
upvotes++;
updateResults();
}
function downvote() {
downvotes++;
updateResults();
}
function updateResults() {
const totalVotes = upvotes + downvotes;
const upvotePercentage = (upvotes / totalVotes) * 100;
const progressBar = document.getElementById("progress-bar");
progressBar.style.width = upvotePercentage + "%";
const percentage = document.getElementById("percentage");
percentage.innerText = upvotePercentage.toFixed(2) + "%";
}
```
在这个示例中,我们使用两个变量 `upvotes` 和 `downvotes` 来追踪赞成和反对的票数。当用户点击“赞成”或“反对”按钮时,对应的票数会增加,并通过调用 `updateResults` 函数来更新结果显示。
`updateResults` 函数首先计算出总票数 `totalVotes` 和赞成票的百分比 `upvotePercentage`。然后,它通过修改进度条的宽度和百分比文本的内容来更新结果显示。
请注意,这只是一个基本示例,你可以根据你的需求进行自定义和扩展。
阅读全文