原生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获取单选按钮的数据
Nov 27 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
typescript编写微信小程序创建项目的方法
Jan 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
jQuery 技巧小结
2010/04/02 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
2020/04/13 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
numpy中索引和切片详解
2017/12/15 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
建议书标准格式
2014/03/12 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android