原生JS实现LOADING效果
纯文本loading效果,可以自己定义颜色和速度
/**Loadinganimation * Createdby黑と白の印記on15/03/11. */ functionloading(element,lightColor,darkColor,speed,callback){ if(!element&&(!element.innerText||!element.textContent))return element=typeofelement==="string"?document.getElementById(element):element lightColor=lightColor||"#fff",darkColor=darkColor||"#000",speed=speed||300 vararr_spanEles=newArray() !function(arr_elementText){ element.innerText=element.textContent="" for(vari=0;i<arr_elementText.length;i++){ varspan=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("")) varindex=-1,length=arr_spanEles.length varloadingTimer=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能有所帮助。