原生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 相关文章推荐
js 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
node.js操作mysql简单实例
May 25 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
微信小程序实现登录注册功能
Dec 29 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实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
PHP利用百度ai实现文本和图片审核
2019/05/08 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
php与js的区别是什么
2013/08/05 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
python中assert用法实例分析
2015/04/30 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
浅析Python3爬虫登录模拟
2018/02/07 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
护士的岗位职责
2013/12/04 职场文书
秘书英文求职信范文
2014/01/31 职场文书
青奥会口号
2014/06/12 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
实施意见格式范本
2015/06/05 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang