原生JS实现LOADING效果_javascript技巧

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月29日04:35:34 评论 41 views

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

企鹅博客
  • 本文由 发表于 2020年8月29日04:35:34
  • 转载请务必保留本文链接:https://www.qieseo.com/414620.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: