Home  >  Article  >  Web Front-end  >  Native JS implements LOADING effect_javascript skills

Native JS implements LOADING effect_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:09:091397browse

Plain text loading effect, you can define the color and speed yourself

Copy code The code is as follows:

/**Loading animation
* Created by Black and White Mark 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)
}

The above is all the content described in this article. I hope it will be helpful to everyone learning javascript.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn