我需要格式化字符串以将其作为jQuery的持续时间传递fadeOut
,该字符串是我在JavaScript中访问的CSS变量。
jQueryfadeOut
接受数字或关键字字符串,我想将CSS var格式化为数字并将其转换为毫秒,以便可以将其用作持续时间值fadeOut
CSStransition
变量用于计时,因此CSS作者可以以几种不同的格式设置此值,例如:
300ms
0.9s
.4s
我在LESS样式表中设置CSS var
:root {
--transition__duration: @transition__duration; // 300ms
}
并在JS中访问它(简体)
var transitionVarName = '--transition__duration',
transitionVar = getComputedStyle(docRoot).getPropertyValue(transitionVarName),
transitionDuration = transitionVar ? transitionVar : 300,
fadeSpeed = clean(transitionDuration);
element.fadeOut(fadeSpeed)
clean: function (str) {
var num = str;
return parseFloat(num);
}
parseFloat(num)
适用于300ms
给我的值,300
但是当我传递类似.3s
return的值时3
,我知道这是预期的行为,parseFloat
但是我不确定获取所需格式所需的数学运算,例如
300ms // 300
0.9s // 900
.4s // 400
编辑:
解决方案
getFadeSpeed: function () {
let docRoot = document.documentElement,
transitionVarName = '--transition__duration',
transitionVar = getComputedStyle(docRoot).getPropertyValue(transitionVarName),
transitionDuration = transitionVar ? transitionVar : '300',
num = transitionDuration;
if (num.includes(".") || num.endsWith('s') && !num.endsWith('ms')) {
num = num.replaceAll('s', '');
num = num * 1000;
}
return parseFloat(num);
}
这是一个动态的东西(它也晚了……也许我没有涵盖全部)
let arr = ["300ms", "0.9s", ".4s", "3s"]
arr.forEach(time => {
time = "0" + time;
//console.log(time)
if (time.includes(".") || time.endsWith('s') && !time.endsWith('ms')) {
time = time.replaceAll('s', '');
time = time * 1000;
}
time = parseFloat(time)
console.log(time)
});
所以你应该让我想:
clean: function(str) {
var num = str;
num = "0" + num;
if (num.includes(".") || num.endsWith('s') && !num.endsWith('ms')) {
num = num.replaceAll('s', '');
num = num * 1000;
}
return parseFloat(num);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句