如何通过JavaScript使进度条缓慢移动
[英]How to make progress bar move slowly by JavaScript
问题描述
当我将其宽度增加10％时，它会突然应用，我希望它能平滑移动。
var counter=0; function moveBy10(x){ var width =10; var bar = document.getElementById('bar'); counter++; if(counter*x < 101){ bar.style.width = counter*x +'%'; } }
#barHolder { background-color: black; width: 100%; height: 80px; } #bar { background-color: red; width:5%; height: 80px; } #by10 { background-color: grey; height: 40px; width: 100px; border-radius: 5px; margin-top: 10px; padding-top: 10px; text-align: center; cursor: pointer; }
<!DOCTYPE html> <html> <head> <title>Progress bar</title> <link rel="stylesheet" type="text/css" href="bar.css"> <script type="text/javascript" src="bar.js"></script> </head> <body> <!--- progress bar container --> <div id="barHolder"> <div id="bar"></div> </div> <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div> </body> </html>
2 个解决方案
解决方案1
4 已采纳 2018-08-31 11:47:06
通过将所需的属性转换（在您的情况下为#bar）添加到所需的元素，我们可以实现您使用CSS寻求的平滑效果。 与使用JavaScript达到相同的效果相比，这将带来更流畅的体验。
transition: width 2s;
（为宽度过渡增加了2s的平滑度）
CSS过渡允许您在给定的时间内平稳地更改属性值（从一个值更改为另一个值）。
了解有关过渡的更多信息。
但是，要完全回答这个问题（仅使用JavaScript来达到相同的结果），我将使用超时来逐步减小实际步长的间隔（如果我们想以10％的间隔过渡1秒，则将其拆分为0.1 1％）
但是我强烈建议为每个解决方案使用最佳技术，不要在没有充分理由的情况下尝试使用特定技术来实现目标。
解决方案2
3 2018-08-31 11:48:28
我不明白您的问题，因为您不知道这个，但我知道您需要这个
var counter=0; function moveBy10(x){ var width =10; var bar = document.getElementById('bar'); counter++; if(counter*x < 101){ bar.style.width = counter*x +'%'; } }
#barHolder { background-color: black; width: 100%; height: 80px; } #bar { background-color: red; width:5%; height: 80px; transition: width 2s; /* Add this */ } #by10 { background-color: grey; height: 40px; width: 100px; border-radius: 5px; margin-top: 10px; padding-top: 10px; text-align: center; cursor: pointer; }
<!DOCTYPE html> <html> <head> <title>Progress bar</title> <link rel="stylesheet" type="text/css" href="bar.css"> <script type="text/javascript" src="bar.js"></script> </head> <body> <!--- progress bar container --> <div id="barHolder"> <div id="bar"></div> </div> <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div> </body> </html>
如何使用HTML和JavaScript制作进度条
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.