javascript - 如何在进度条百分比中添加菱形标记?
问题描述
我想在下面添加菱形标记来表示百分比。
我无法添加它。由于进度条的颜色也应该改变,例如,如果它是 70%,那么它应该是绿色,剩下的 30% 应该是红色。
<style type="text/css">
.progress-wrapper {
background: white;
width: 100%;
height: 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
width: 60%;
position: absolute;
left: 0px;
top: 0px;
background: #63ed63;
}
.progress-label {
position: absolute;
z-index: 1;
}
</style>
<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>
解决方案
这是一个使用 setInterval 的非常基本的版本:
var bar = document.getElementById("bar");
var diamond = document.getElementById("diamond-wrapper");
function init() {
var loop = setInterval(frame, 15);
var percentage = 0;
function frame() {
if (percentage >= 100) {
clearInterval(loop);
} else {
percentage++;
updateProgressDOM(percentage);
}
}
}
function onProgressInputChange(event) {
var percentage = event.currentTarget.value;
percentage = percentage < 0 ? 0 : percentage > 100 ? 100 : percentage;
updateProgressDOM(percentage);
}
function updateProgressDOM(percentage) {
bar.style.width = percentage + '%';
document.querySelector('.bar-text').innerHTML = percentage * 1 + '%';
}
.progress {
width: 100%;
position: relative;
background-color: red;
}
.bar {
position: relative;
width: 0%;
height: 20px;
background-color: green;
text-align: center;
line-height: 20px;
color: black;
}
.bar-text {
position: absolute;
top: 0;
width: 100%;
height: 20px;
text-align: center;
line-height: 20px;
color: black;
}
#diamond-wrapper {
position: absolute;
top: 0;
right: -10px;
}
.diamond {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: lightblue;
position: relative;
top: -10px;
}
.diamond:after {
content: '';
position: absolute;
left: -10px;
top: 10px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: lightblue;
}
input {
width: 200px;
}
<div class="progress" id="progress">
<div class="bar" id="bar">
<div id="diamond-wrapper">
<div class="diamond"></div>
</div>
</div>
<div class="bar-text"></div>
</div>
<br>
<button onclick="init()">Init progress</button>
<br>
<br>
<input min="0" max="100" placeholder="progress value" type="number" onChange="onProgressInputChange(event)">
推荐阅读
- bash - Unix script error while assigning command substitution to array variable
- javascript - 获取消息功能的 setInterval 问题
- powerbi - 在可视化中按日期运行总计
- ajax - Ajax GET 请求后表单提交失败(无效的 CSRF 令牌)。怎么修?
- python - 计算 Pandas 数据框中特定时间特定字符串的出现次数
- python - 我可以在 Django-admin 中查看图像和文件吗?
- typescript - Typescript - 使用第三方 API 的接口
- c - 编译后输出中的百分比字符
- python-3.x - 从数据框列中的列表中查找完全最长的匹配项
- gcloud - 谷歌云:不小心删除了一个默认服务帐号,“projects.serviceAccounts.undelete”权限在哪里?