原生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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
详解vue中axios的使用与封装
Mar 20 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编程语言开发动态WAP页面
2006/10/09 PHP
PHP调用三种数据库的方法(1)
2006/10/09 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
PHP运行模式汇总
2016/11/06 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python 控制语句
2011/11/03 Python
Python中的各种装饰器详解
2015/04/11 Python
Python 文件处理注意事项总结
2017/04/10 Python
python读取文件名称生成list的方法
2018/04/27 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
ubuntu上安装python的实例方法
2019/09/30 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
小学红领巾中秋节广播稿
2014/01/13 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
电子商务专业自荐信
2014/06/02 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL