原生JS实现LOADING效果


Posted in Javascript onMarch 16, 2015

纯文本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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 #Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 #Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 #Javascript
jquery图片切换插件
Mar 16 #Javascript
JavaScript中的方法重载实例
Mar 16 #Javascript
jquery中attr和prop的区别分析
Mar 16 #Javascript
JavaScript中扩展Array contains方法实例
Aug 23 #Javascript
You might like
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
Js sort排序使用方法
2011/10/17 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
vue跨域解决方法
2017/10/15 Javascript
vue基础之模板和过滤器用法实例分析
2019/03/12 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python将unicode转为str的方法
2017/06/21 Python
python计算列表内各元素的个数实例
2018/06/29 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
中软Java笔试题
2012/11/11 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
销售经理工作职责
2014/02/03 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
银行授权委托书格式
2014/10/10 职场文书
升职自荐信怎么写
2015/03/05 职场文书
就业推荐表院系意见
2015/06/05 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
MySQL分库分表详情
2021/09/25 MySQL
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android