js加载中...三个点动态效果

要在JavaScript中实现加载中的三个点动起来的效果，您可以使用定时器和字符串拼接来实现。下面是一个示例代码：

<template>
  <view>{{ loadingText }}</view>
</template>

<script>
export default {
  data() {
    return {
      loadingText: '加载中'
    };
  },
  mounted() {
    this.startLoadingAnimation();
  },
  methods: {
    startLoadingAnimation() {
      const dots = ['.', '..', '...'];
      let dotIndex = 0;

      setInterval(() => {
        dotIndex = (dotIndex + 1) % dots.length;
        this.loadingText = '加载中' + dots[dotIndex];
      }, 500);
    }
  }
};
</script>

上述代码中，我们定义了一个loadingText数据属性来存储加载文本，并在mounted生命周期钩子中调用startLoadingAnimation方法来启动加载动画。

在startLoadingAnimation方法中，我们使用setInterval函数设置一个定时器，每隔500毫秒更新一次loadingText，通过字符串拼接将加载文本和点符号连接起来，实现点符号的循环切换效果。

jquery 版本如下：

/**
 * 三个点的动画效果
 * @param obj jquery dom 对象
 * @param text
 * @returns {*}
 */
function startLoadingAnimation(obj, text) {
    const dots = ['.  ', '.. ', '...'];
    let dotIndex = 0;
    setInterval(() => {
        dotIndex = (dotIndex + 1) % dots.length;
        obj.val(text + dots[dotIndex]);
    }, 500);
    return obj;
}

使用：

startLoadingAnimation($('#loginBtn'), '登录中').prop({disabled: 'disabled'});