js实现1.点击赞成和反对实现投票,对应的票数累加 2. 点击赞成和返回的投票票数百分比显示在上方横条中3. 有小数的保留小数点后两位
时间: 2024-04-21 08:23:26 浏览: 83
js实现保留两位小数
可以使用 JavaScript 来实现点击赞成和反对进行投票,并对应的票数进行累加。以下是一个简单的实现示例:
HTML 代码:
```html
<div>
<button id="upvoteBtn">赞成</button>
<button id="downvoteBtn">反对</button>
</div>
<div>
<p id="upvoteCount">0</p>
<p id="downvoteCount">0</p>
</div>
<div id="percentageBar"></div>
```
JavaScript 代码:
```javascript
// 获取按钮和计数器元素
const upvoteBtn = document.getElementById('upvoteBtn');
const downvoteBtn = document.getElementById('downvoteBtn');
const upvoteCount = document.getElementById('upvoteCount');
const downvoteCount = document.getElementById('downvoteCount');
const percentageBar = document.getElementById('percentageBar');
// 初始化计数器变量
let upvotes = 0;
let downvotes = 0;
// 更新票数和百分比显示
function updateCounts() {
// 更新赞成票数显示
upvoteCount.textContent = upvotes.toFixed(2);
// 更新反对票数显示
downvoteCount.textContent = downvotes.toFixed(2);
// 计算百分比
const totalVotes = upvotes + downvotes;
const upvotePercentage = (upvotes / totalVotes) * 100;
const downvotePercentage = (downvotes / totalVotes) * 100;
// 更新百分比条宽度
percentageBar.style.width = `${upvotePercentage}%`;
}
// 处理点击赞成按钮事件
upvoteBtn.addEventListener('click', () => {
upvotes++;
updateCounts();
});
// 处理点击反对按钮事件
downvoteBtn.addEventListener('click', () => {
downvotes++;
updateCounts();
});
```
这段代码实现了点击赞成和反对按钮时,对应的票数会累加,并通过计算百分比显示在上方的横条中。票数的小数部分会被保留两位小数。你可以将以上代码复制到一个 HTML 文件中并在浏览器中运行以查看效果。
阅读全文