原生JS實(shí)現(xiàn)LOADING效果
更新時(shí)間:2015年03月16日 16:25:00 投稿:hebedich
這篇文章主要向大家介紹了原生JS實(shí)現(xiàn)的LOADING效果的代碼,效果非常不錯(cuò),而且可以自定義顏色和速度,推薦給大家,希望大家能夠喜歡。
純文本loading效果,可以自己定義顏色和速度
復(fù)制代碼 代碼如下:
/** 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<arr_elementText.length;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)
}
以上就是本文所述的全部?jī)?nèi)容了,希望對(duì)大家學(xué)習(xí)javascript能有所幫助。
您可能感興趣的文章:
- 利用原生JS實(shí)現(xiàn)歡樂(lè)水果機(jī)小游戲
- 原生javascript實(shí)現(xiàn)類(lèi)似vue的數(shù)據(jù)綁定功能示例【觀察者模式】
- 原生javascript的ajax請(qǐng)求及后臺(tái)PHP響應(yīng)操作示例
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 原生JavaScript編寫(xiě)俄羅斯方塊
- 原生js結(jié)合html5制作簡(jiǎn)易的雙色子游戲
- 原生Js實(shí)現(xiàn)簡(jiǎn)易煙花爆炸效果的方法
- 原生js實(shí)現(xiàn)日期聯(lián)動(dòng)
- 原生JS實(shí)現(xiàn)匯率轉(zhuǎn)換功能代碼實(shí)例
相關(guān)文章
鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
本文章來(lái)給大家推薦一個(gè)不錯(cuò)的鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效效果,有需要了解的朋友可以參考一下2013-08-08
JavaScript中高級(jí)語(yǔ)法??表達(dá)式用法示例詳解
這篇文章主要為大家介紹了JavaScript中高級(jí)語(yǔ)法??表達(dá)式用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報(bào)404錯(cuò)notfound的解
這篇文章主要介紹了 Bootstrap中g(shù)lyphicons-halflings-regular.woff字體報(bào)404錯(cuò)notfound的解決方法,需要的朋友可以參考下2017-01-01

