原生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的版本实现执行不同的代码
May 11 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
分享PHP守护进程类
2015/12/30 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
javascript 获取函数形参个数
2014/07/31 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python实现视频下载功能
2017/03/14 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python检测IP地址变化并触发事件
2018/12/26 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python找出因数与质因数的方法
2019/07/25 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python ubplot使用方法解析
2020/01/10 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
简述数组与指针的区别
2014/01/02 面试题
性能测试工程师的面试题
2015/02/20 面试题
自我鉴定三原则
2014/01/13 职场文书
董事长秘书职责
2014/01/31 职场文书
贷款担保书范文
2014/05/13 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
催款函范本大全
2015/06/24 职场文书
安全教育培训心得体会
2016/01/15 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js