原生JS实现LOADING效果

 更新时间:2015年03月16日 16:25:00   投稿:hebedich  
这篇文章主要向大家介绍了原生JS实现的LOADING效果的代码,效果非常不错,而且可以自定义颜色和速度,推荐给大家,希望大家能够喜欢。

纯文本loading效果,可以自己定义颜色和速度

复制代码 代码如下:

/** Loading animation
 *  Created by 黑と白の印記 on 15/03/11.
 */
 
function loading(element,lightColor,darkColor,speed,callback){
    if(!element&&(!element.innerText||!element.textContent))return
    element = typeof element==="string"?document.getElementById(element):element
    lightColor = lightColor||"#fff",darkColor = darkColor||"#000",speed = speed||300
 
    var arr_spanEles = new Array()
    
    !function(arr_elementText){
        element.innerText=element.textContent=""
        for(var i=0;i<arr_elementText.length;i++){
            var span = document.createElement("span")
            element.innerText?span.innerText = arr_elementText[i]:span.textContent = arr_elementText[i]
            element.appendChild(span)
            arr_spanEles.push(span)
        }
    }((element.innerText||element.textContent).split(""))
 
    var index = -1,length = arr_spanEles.length
    var loadingTimer = setInterval(function(){
        arr_spanEles[Math.max(index,0)].style.color = darkColor
        if(index == length-1){
            index = -1
            callback&&callback()
        }
        ++index
        arr_spanEles[index].style.color = lightColor
    },speed)
}

以上就是本文所述的全部内容了,希望对大家学习javascript能有所帮助。

相关文章

  • JavaScript数据结构之双向链表

    JavaScript数据结构之双向链表

    这篇文章主要为大家详细介绍了JavaScript数据结构之双向链表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JavaScript的模块化:封装(闭包),继承(原型) 介绍

    JavaScript的模块化:封装(闭包),继承(原型) 介绍

    在复杂的逻辑下, JavaScript 需要被模块化,模块需要封装起来,只留下供外界调用的接口。闭包是 JavaScript 中实现模块封装的关键,也是很多初学者难以理解的要点
    2013-07-07
  • Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法

    本文主要介绍了Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法。具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • Bootstrap按钮组实例详解

    Bootstrap按钮组实例详解

    单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等。本文将详细介绍Bootstrap按钮组,感兴趣的朋友一起看看吧
    2017-07-07
  • JavaScript中实现继承的三种方式和实例

    JavaScript中实现继承的三种方式和实例

    这篇文章主要介绍了JavaScript中实现继承的三种方式和实例,本文讲解了类式继承、原型式继承、使用扩充方法实现多重继承三种方式,需要的朋友可以参考下
    2015-01-01
  • 微信小程序获取头像和昵称的最新方法(直接用!)

    微信小程序获取头像和昵称的最新方法(直接用!)

    微信小程序最新获取头像信息之前是使用open-dada获取微信头像和昵称,但是后面由于官网更新,此方法被收回了,所以不能使用此方法了,下面这篇文章主要给大家介绍了关于微信小程序获取头像和昵称的最新方法,本文介绍的方法可以直接拿来用,需要的朋友可以参考下
    2023-05-05
  • echarts中几种渐变方式的具体实现方式

    echarts中几种渐变方式的具体实现方式

    在使用echarts绘制图表时,有的时候需要使用渐变色,下面这篇文章主要给大家介绍了关于echarts中几种渐变方式的具体实现方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JavaScript判断两个对象是否相等的方法总结

    JavaScript判断两个对象是否相等的方法总结

    判断两个对象是否相等是js中的一个很常见的内容,不同的编程语言和环境可能会有不同的方式来实现这一目标,在 JavaScript 中,判断两个对象是否相等主要有以下几种方法,感兴趣的小伙伴跟着小编一起来看看吧
    2024-08-08
  • JavaScript数组的一些奇葩行为

    JavaScript数组的一些奇葩行为

    今天,复习了一下JavaScript的数组,然后,把他的一些奇葩行为总结了一下,分享在脚本之家平台,欢迎大家参考
    2016-01-01
  • Webpack 服务器端代码打包的示例代码

    Webpack 服务器端代码打包的示例代码

    本篇文章主要介绍了Webpack 服务器端代码打包的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论