要在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'});