Javascript 如何防止html按钮在调整范围滑块时来回移动
当我调整此范围滑块时，右侧指示视频播放速率的对应文本将从一位数（即1）更改为多位数（即0.95）。每次这样做都会导致文本右侧的按钮前后移动。我想知道如何防止这种运动发生？我尝试在文本和按钮之间添加一些空格、填充、边距等，但似乎无法阻止。我希望所有的物体都在同一条线上。例如，有没有办法使默认位数保持不变？例如，当它设置为1时，它是否可以改为1.00，当它设置为.8时，它是否可以为0.80 isntead？我不确定这是否会起作用，因为回放率心房肌似乎需要特定数字Javascript 如何防止html按钮在调整范围滑块时来回移动,javascript,html,css,Javascript,Html,Css,当我调整此范围滑块时，右侧指示视频播放速率的对应文本将从一位数（即1）更改为多位数（即0.95）。每次这样做都会导致文本右侧的按钮前后移动。我想知道如何防止这种运动发生？我尝试在文本和按钮之间添加一些空格、填充、边距等，但似乎无法阻止。我希望所有的物体都在同一条线上。例如，有没有办法使默认位数保持不变？例如，当它设置为1时，它是否可以改为1.00，当它设置为.8时，它是否可以为0.80 isntead？我不确定这是否会起作用，因为回放率心房肌似乎需要特定数字 <!DOCTYPE html&
<!DOCTYPE html>
<html>
<head>
<style>
div#videoPlayerBox{ width:550px; background:#000; margin:0px auto;}
div#videoControlsBar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#pbr{ width:40%;}
div#PlaybackRateBox{ margin:left; width:28%; text-align:center; border: solid 3px #000; background:#FFF; padding:0px;}
</style>
<script>
var v,p,c;
function myFunction(){document.getElementById("myForm").reset();}
function setPlaySpeednormal(){ c.innerHTML = 1;v.playbackRate = 1;}
function restartVideo(){v.pause();v.currentTime = 0;v.play();}
window.onload = function() {
v = document.getElementById("myVideo");
p = document.getElementById("pbr");
c = document.getElementById("currentPbr");
p.addEventListener('input',function(){
c.innerHTML = p.value;
v.playbackRate = p.value;
},false);
};
</script>
</head>
<body>
<div id="videoPlayerBox">
<video id="myVideo" width="100%" poster="https://www.dropbox.com/s/8qbvpxvtedcs5lq/2016-07-30_Milonga%20Triste_Guillermo%20Garcia_Tango%20Atipico_San%20Francisco.jpg?raw=1" controls>
<source src="https://www.dropbox.com/s/5rjbtmantuow8vw/testvideo_hfd.mp4?raw=1"
type='video/mp4'/>
Your browser does not support HTML video.
</video>
<div id="videoControlsBar">
<form id= "myForm">
<input id="pbr" type="range" value="1" min="0.5" max="1.2" step="0.05" class="slider">
<span>Speed <span id="currentPbr">1</span>
<input type="button" value="Reset" onclick="myFunction();setPlaySpeednormal();">
<input type="button" value="Restart" onclick="restartVideo();">
</form>
</div>
</div>
</body>
</html>
视频播放器盒{宽度：550px；背景：000；边距：0px自动；}
div#videoControlsBar{背景：333；填充：10px；颜色：#CCC；字体系列：“投石机MS”，Arial，Helvetica，无衬线；}
#pbr{宽度：40%；}
div#PlaybackRateBox{边距：左侧；宽度：28%；文本对齐：居中；边框：实心3px#000；背景：#FFF；填充：0px；}
var v，p，c；
函数myFunction（）{document.getElementById（“myForm”）.reset（）；}
函数setPlaySpeednormal（）{c.innerHTML=1；v.playbackRate=1；}
函数restartVideo（）{v.pause（）；v.currentTime=0；v.play（）；}
window.onload=函数（）{
v=document.getElementById（“myVideo”）；
p=document.getElementById（“pbr”）；
c=document.getElementById（“currentPbr”）；
p、 addEventListener（'输入'，函数（））{
c、 innerHTML=p.value；
v、 回放率=p.值；
}，假）；
};
您的浏览器不支持HTML视频。
速度1
#currentPbr<style>
div#videoPlayerBox{ width:550px; background:#000; margin:0px auto;}
div#videoControlsBar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#pbr{ width:40%;}
div#PlaybackRateBox{ margin:left; width:28%; text-align:center; border: solid 3px #000; background:#FFF; padding:0px;}
#currentPbr {display: inline-block; min-width: 80px;}
</style>
视频播放器盒{宽度：550px；背景：000；边距：0px自动；}
div#videoControlsBar{背景：333；填充：10px；颜色：#CCC；字体系列：“投石机MS”，Arial，Helvetica，无衬线；}
#pbr{宽度：40%；}
div#PlaybackRateBox{边距：左侧；宽度：28%；文本对齐：居中；边框：实心3px#000；背景：#FFF；填充：0px；}
#currentPbr{显示：内联块；最小宽度：80px；}
#currentPbr<style>
div#videoPlayerBox{ width:550px; background:#000; margin:0px auto;}
div#videoControlsBar{ background: #333; padding:10px; color:#CCC; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
#pbr{ width:40%;}
div#PlaybackRateBox{ margin:left; width:28%; text-align:center; border: solid 3px #000; background:#FFF; padding:0px;}
#currentPbr {display: inline-block; min-width: 80px;}
</style>
视频播放器盒{宽度：550px；背景：000；边距：0px自动；}
div#videoControlsBar{背景：333；填充：10px；颜色：#CCC；字体系列：“投石机MS”，Arial，Helvetica，无衬线；}
#pbr{宽度：40%；}
div#PlaybackRateBox{边距：左侧；宽度：28%；文本对齐：居中；边框：实心3px#000；背景：#FFF；填充：0px；}
#currentPbr{显示：内联块；最小宽度：80px；}
parseNum=（num）=>（num==1 | | num==0）？num+'.00'：（字符串（num）.length==3？num+'0'：num）c.innerHTML=p.valuevar v,p,c;
function myFunction(){document.getElementById("myForm").reset();}
function setPlaySpeednormal(){ c.innerHTML = 1;v.playbackRate = 1;}
function restartVideo(){v.pause();v.currentTime = 0;v.play();}
const parseNum = (num) => (num == 1 || num === 0) ? num + '.00' : (String(num).length == 3 ? num + '0' : num)
window.onload = function() {
v = document.getElementById("myVideo");
p = document.getElementById("pbr");
c = document.getElementById("currentPbr");
p.addEventListener('input',function(){
c.innerHTML = parseNum(p.value);
v.playbackRate = p.value;
},false);
};
PS请确保不要对每个数字都使用此功能。它只适用于卷的域。这里有一个函数可以帮助您：
parseNum=（num）=>（num==1 | | num==0）？num+'.00'：（字符串（num）.length==3？num+'0'：num）c.innerHTML=p.valuevar v,p,c;
function myFunction(){document.getElementById("myForm").reset();}
function setPlaySpeednormal(){ c.innerHTML = 1;v.playbackRate = 1;}
function restartVideo(){v.pause();v.currentTime = 0;v.play();}
const parseNum = (num) => (num == 1 || num === 0) ? num + '.00' : (String(num).length == 3 ? num + '0' : num)
window.onload = function() {
v = document.getElementById("myVideo");
p = document.getElementById("pbr");
c = document.getElementById("currentPbr");
p.addEventListener('input',function(){
c.innerHTML = parseNum(p.value);
v.playbackRate = p.value;
},false);
};
PS请确保不要对每个数字都使用此功能。它只适用于卷的域。完美！谢谢，太好了！谢谢你，谢谢你，贾拉杰！parseNum看起来很有趣！我对JavaScript非常陌生，所以我对如何在代码中实现函数有点困惑。您编写的EventListener部分“c.innerHTML=parseNum（p.value）；”非常清楚，但是对于函数部分，您能告诉我应该如何将其写入现有代码中吗？我试图在线搜索parseNum，但找不到关于它的更多信息。再次感谢！添加函数非常简单。因为我不能把代码放在这里，因为单词的限制，我已经编辑了答案，包含了脚本中应该包含的全部代码！很好用！非常感谢你的帮助！只是一件奇怪的事，我还是搞不懂。当我按下“重置”按钮时，数字将变为“1”，而不是“1.00”。剩下的时间都很好。知道为什么会出现这种情况吗？之所以会出现这种情况，是因为只有在范围滑块上触发
inputparseNummyFunctionmyFunctionfunction myFunction（）{document.getElementById（“myForm”）.reset（）；c.innerHTML='1.00'}parseNum