原生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 相关文章推荐
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
VUE中使用MUI方法
Feb 12 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
Node.JS如何实现JWT原理
Sep 18 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
基于mysql的bbs设计(三)
2006/10/09 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
JavaScript类的写法
2016/09/17 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
ECHT官方网站:男女健身服
2020/02/14 全球购物
军神教学反思
2014/02/04 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
2014高考励志标语
2014/06/05 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
领导视察通讯稿
2015/07/18 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers