Javascript中的十进制算法

我正在使用javascript为导航栏实现一些动画。我想改变样式的按钮时，超过了他们

我用setInterval增加1直到它达到我需要的值。 第一个CSS属性工作正常，因为它的值是整数（填充）。 在任何情况下，我都不能得到与“字体大小”相同的结果，这可能是因为当我增加0.1时，使用了十进制算法

在这种情况下，当我将鼠标悬停在主按钮上时，我希望将字体大小从1rem更改为1.5rem，但当浏览器开始更改样式时，它从未停止，因为我猜它从未与clearInterval值匹配

函数padIn（）{
var pos=25；
var id=设置间隔（帧，50）；
函数框架（）{
如果（位置==21）{
清除间隔（id）；
}否则{
pos--；
el.style.padding=pos+“px”；
}
}
var pos2=1；
var id2=设置间隔（第2帧，第50帧）；
函数框架2（）{
if（pos2==1.5）{
间隔时间（id2）；
}否则{
（pos2+=0.1）。toFixed（2）；
el.style.fontSize=pos2+“rem”；
}
}
}
函数挂出（）{
el.style.color=“白色”；
el.style.fontSize=“1rem”；
el.style.padding=“25px”；
}
var el=document.getElementById（“nav”）.firstChild.nextSibling；
el.addEventListener（“鼠标悬停”，padIn，false）；
el.addEventListener（“鼠标出”，挂出，假）
html{
字体大小：16px；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景颜色：浅蓝色；
位置：相对位置；
}
#导航{
背景颜色：橙色；
}
#李海军{
列表样式类型：无；
显示：内联块；
字体系列：“Ubuntu”，无衬线；
填充：25px；
字号：700；
}
#李海军：第一个孩子{
背景色：红色；
颜色：白色；
}


主要
关于
我们的旅馆▼
我们的服务&9660
接触
X

您可以使用较小或相等的比较

if (pos <= 21) {

if (pos2 >= 1.5) {

为了防止精确数字，因为浮点数学


函数padIn（）{
var pos=25；
var id=设置间隔（帧，50）；
函数框架（）{
如果（位置=1.5）{
间隔时间（id2）；
}否则{
（pos2+=0.1）。toFixed（2）；
el.style.fontSize=pos2+“rem”；
}
}
}
函数挂出（）{
el.style.color=“白色”；
el.style.fontSize=“1rem”；
el.style.padding=“25px”；
}
var el=document.getElementById（“nav”）.firstChild.nextSibling；
el.addEventListener（“鼠标悬停”，padIn，false）；
el.addEventListener（“鼠标出”，挂出，假）
html{font size:16px；}
*{边距：0；填充：0；框大小：边框框；}
正文{背景色：浅蓝色；位置：相对；}
#导航{背景色：橙色；}
#nav li{列表样式类型：无；显示：内联块；字体系列：“Ubuntu”，无衬线；填充：25px；字体重量：700；}
#导航李：第一个孩子{背景色：红色；颜色：白色；}


主要
关于
我们的旅馆▼
我们的服务&9660
接触
X

欢迎来到浮点精度的奇妙世界

1.5实际上可能最终为1.5000000001，这并不等于1.5。
我建议你读一读

通过将equals==更改为>=可以解决问题

但我建议你使用css和转换


函数padIn（）{
var pos=25；
var id=设置间隔（帧，50）；
函数框架（）{
如果（位置>=21）{
清除间隔（id）；
}否则{
pos--；
el.style.padding=pos+“px”；
}
}
var pos2=1；
var id2=设置间隔（第2帧，第50帧）；
函数框架2（）{
如果（位置2>=1.5）{
间隔时间（id2）；
}否则{
（pos2+=0.1）。toFixed（2）；
el.style.fontSize=pos2+“rem”；
}
}
}
函数挂出（）{
el.style.color=“白色”；
el.style.fontSize=“1rem”；
el.style.padding=“25px”；
}
var el=document.getElementById（“nav”）.firstChild.nextSibling；
el.addEventListener（“鼠标悬停”，padIn，false）；
el.addEventListener（“鼠标出”，挂出，假）
html{
字体大小：16px；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景颜色：浅蓝色；
位置：相对位置；
}
#导航{
背景颜色：橙色；
}
#李海军{
列表样式类型：无；
显示：内联块；
字体系列：“Ubuntu”，无衬线；
填充：25px；
字号：700；
}
#李海军：第一个孩子{
背景色：红色；
颜色：白色；
}


主要
关于
我们的旅馆▼
我们的服务&9660
接触
X

一种选择是只满足于“大于或等于”：


函数padIn（）{
var pos=25；
var id=设置间隔（帧，50）；
函数框架（）{
如果（位置==21）{
清除间隔（id）；
}否则{
pos--；
el.style.padding=pos+“px”；
}
}
var pos2=1；
var id2=设置间隔（第2帧，第50帧）；
函数框架2（）{
如果（位置2>=1.5）{
间隔时间（id2）；
}否则{
（pos2+=0.1）。toFixed（2）；
el.style.fontSize=pos2+“rem”；
}
}
}
函数挂出（）{
el.style.color=“白色”；
el.style.fontSize=“1rem”；
el.style.padding=“25px”；
}
var el=document.getElementById（“nav”）.firstChild.nextSibling；
el.addEventListener（“鼠标悬停”，padIn，false）；
el.addEventListener（“鼠标出”，挂出，假）
html{
字体大小：16px；
}
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景颜色：l
if (pos2 >= 1.5) {