jsd*_*iya 2 html javascript css progress-bar
当我将它的宽度增加 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>通过向所需元素添加属性转换（在您的情况下为 #bar），我们可以实现您使用 CSS 寻求的平滑效果。与使用 Javascript 实现相同的效果相比，这将带来更流畅的体验。
transition: width 2s;
（为宽度的过渡增加了2s的平滑）
CSS 转换允许您在给定的持续时间内平滑地更改属性值（从一个值到另一个值）。
了解有关过渡的更多信息。
但是为了完全回答这个问题以使用 JavaScript（仅）实现相同的结果，我将使用超时来步进到实际步骤的小间隔（如果我们想在 1 秒内转换 10%，我会将它拆分为 0.1 per 1%)
但是我强烈建议为每个解决方案使用最好的技术，而不是在没有充分理由的情况下尝试使用特定技术实现某些目标。
小智 5
我不明白你的问题，因为你没有这个，但我明白你需要这个
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>