将字符串转换为 jQuery fadeOut 的正确格式

Question

我需要格式化一个字符串，以便将其作为 jQuery 的 fadeOut 的持续时间传递，该字符串是我在 [=] 中访问的 CSS 变量47=].

jQuery 的 fadeOut 接受数字或关键字字符串，我想将 CSS var 格式化为数字并将其转换为毫秒，以便它可以用作fadeOut

的持续时间值

CSS 变量用于 transition 计时，因此 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 这样的值时，它 returns 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);
}

Answer 1

这里有一些动态，（这里也太晚了......可能我没有涵盖所有内容）

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);
}

将字符串转换为 jQuery fadeOut 的正确格式

Convert string to correct format for jQuery fadeOut

javascript

jquery

fadeout