原生JS實作LOADING效果_javascript技巧

純文字loading效果，可以自己定義顏色和速度

複製程式碼 程式碼如下:

/**載入動畫
* 由 Black and White Mark 於 2011 年 3 月 15 日創作。
號*/
 
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能有所幫助。