progress标签应用心得
今天尝试使用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里试着给它增加一个像素的宽度，问题解决。
黑黑研究得真深入{:4_199:} 红影 发表于 2022-5-7 09:12
黑黑研究得真深入
一般吧，这毕竟是常规h5标签，之前没看上它 这个方法挺好的。学习学习。 加林森 发表于 2022-5-7 16:03
这个方法挺好的。学习学习。
{:4_190:} 马黑黑 发表于 2022-5-7 18:09
谢茶 加林森 发表于 2022-5-7 18:22
谢茶
不客气 马黑黑 发表于 2022-5-7 18:47
不客气
嗯嗯 马黑黑 发表于 2022-5-7 12:51
一般吧，这毕竟是常规h5标签，之前没看上它
虽然是常规标签，已经被你用得出神入化了{:4_199:} 红影 发表于 2022-5-8 09:41
虽然是常规标签，已经被你用得出神入化了
工具在那里，看是怎么用 马黑黑 发表于 2022-5-8 10:03
工具在那里，看是怎么用
是的，使用的人的想法很重要。 红影 发表于 2022-5-8 12:14
是的，使用的人的想法很重要。
对，要有想法
页:
[1]