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

debugcn 发表于 Dev

大卫·阿尔斯布莱特

我需要格式化字符串以将其作为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但是当我传递类似.3sreturn的值时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);
}

twoK

这是一个动态的东西（它也晚了……也许我没有涵盖全部）

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] 删除。