progress标签应用心得

马黑黑 · 发表于 2022-5-6 23:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

今天尝试使用progress标签做一个控制速度的控件，发现如论如何都不能加速到100，拉到最右边得到的值总是 99 就完了。

设计之初，为了节省计算开销，我把 progress 设置为 100px 的宽度，CSS代码如下:

progress {width: 100px; cursor: pointer; }

html代码则如下：

<progress id="rr" max="100" value="0"></progress>
<span id="kk"> 0 </span>

这里，用一个span标签来显示 progress 进度动态变化时的数值，开始时是 0，没有加速。

JS要处理的东西比较复杂，这里，演示需要，仅给出鼠标在 progress 之上移动时的数值变化：

let rr = document.getElementById('rr');

rr.onmousemove = function(){
let x = event.clientX - this.offsetLeft;
this.value = x;
document.getElementById('kk').innerText = x;
}

如此，当鼠标指针在 progress 上移动时，progress 的进度条会动态变化，span标签同步显示当前欲要加速的数值（点击才会确定）。反复测试，最高可加速到99，达不到100，不符合要求。

检查代码无误，观察一下界面，感觉问题出在进度条样式之上，它的两端呈圆弧状，会消耗水平方向的尺寸。于是，在CSS里试着给它增加一个像素的宽度，问题解决。