时间戳

首页 > 解决方案 > 将字符串转换为 jQuery 淡出的正确格式

javascript - 将字符串转换为 jQuery 淡出的正确格式

问题描述

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

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

CSS var 用于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)适用于类似于300mswhich 给我的值，300但是当我传递类似.3s它返回的东西时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);
}

标签： javascriptjqueryfadeout

解决方案

这是即时的东西，（这里也很晚......也许我没有涵盖所有内容）

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

推荐阅读