讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

原生JS实现LOADING效果_javascript技巧

php中文网
发布： 2016-05-16 16:09:09
原创
1733人浏览过

纯文本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             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能有所帮助。

基于animate.css和原生JS实现的鼠标滚动动画效果
基于animate.css和原生JS实现的鼠标滚动动画效果

基于animate.css和原生JS实现的鼠标滚动动画效果，挺不错的CSS3动画效果，基于CSS动画插件animate.css实现，animate.css拥有众多的动画特效而且是开源的，大家到官网看看吧。

基于animate.css和原生JS实现的鼠标滚动动画效果 59
查看详情 基于animate.css和原生JS实现的鼠标滚动动画效果
相关标签：
js

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：多个jQuery版本共存的处理方案_jquery 下一篇：jquery通过closest选择器修改上级元素的方法_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
什么是javascript闭包_它有什么实际用途？ JavaScript闭包是函数与其词法作用域中被捕获的外部变量组成的组合，形成于内部函数引用外部变量且在外部函数返回后仍存在时，用于封装私有变量、解决循环绑定问题、实现函数工厂与柯里化等。
2025-12-17 22:06:39
856
什么是javascript代码压缩_如何减小文件大小？ JavaScript代码压缩的核心操作包括删除空白符与注释、变量函数名混淆、合并声明与简化语句、删除未使用代码；主流工具如Terser、UglifyJS通过构建工具（Webpack/Vite）或命令行自动执行，配合Gzip/Brotli、按需加载、移除调试代码等进一步优化。
2025-12-17 22:05:02
971
javascript WeakMap和WeakSet是什么_它们与Map和Set有何不同？ WeakMap和WeakSet是专为不干扰垃圾回收设计的集合类型，只接受对象作为键或元素，对其使用弱引用，当对象无其他强引用时会被自动回收。
2025-12-17 21:55:02
414
javascript如何实现列表渲染_ key属性为什么重要 JavaScript列表渲染需用key标识元素身份以保障高效更新，原生JS无key机制导致重绘丢失状态，React等框架要求唯一、稳定、可预测的key（如id）而非index，否则引发错误复用和性能问题。
2025-12-17 21:45:02
100
javascript跨域问题是什么_如何解决CORS限制？ JavaScript跨域问题本质是浏览器同源策略限制，阻止脚本读取非同源响应；需后端配置Access-Control-Allow-Origin等CORS响应头，前端合理发起请求，单靠前端无法突破。
2025-12-17 21:43:33
579
什么是JavaScript的代码覆盖率_它如何衡量测试的完整性呢 JavaScript代码覆盖率是衡量测试广度的量化指标，反映已执行的代码行、函数、分支、语句占总量的比例，不表示测试质量；主流维度包括行覆盖、函数覆盖、分支覆盖和语句覆盖；低覆盖率提示关键路径或错误处理未测，高覆盖率未必代表正确性，应结合业务意图与其他保障手段综合使用。
2025-12-17 21:38:34
128
javascript中的Map和Set是什么_何时使用它们？ Map和Set是ES6引入的原生集合类型：Map支持任意类型键、保留插入顺序、无原型污染；Set专注唯一值去重与存在性判断，性能优于数组。
2025-12-17 21:37:24
699
如何用JavaScript实现本地存储？ JavaScript本地存储主要使用localStorage和sessionStorage，二者均以字符串键值对形式存储数据，API相同但生命周期不同：localStorage永久保存，sessionStorage仅限当前标签页。
2025-12-17 21:34:02
998
JavaScript find和findIndex如何用_它们如何查找元素？ find返回第一个匹配元素值，findIndex返回其索引；均不修改原数组，找到即停，未找到时分别返回undefined和-1。
2025-12-17 21:31:18
692
什么是JavaScript的默认参数_它如何让函数更健壮呢 JavaScript默认参数在函数定义时为形参预设值，调用时传undefined或不传则启用；支持表达式和函数调用（每次重新求值），但null不触发默认值，需用??或三元运算符处理。
2025-12-17 21:30:52
358
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部