原生JS實(shí)現(xiàn)LOADING效果
純文本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<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)類似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)文章
利用JS對(duì)iframe父子(內(nèi)外)頁(yè)面進(jìn)行操作的方法教程
這篇文章主要給大家介紹了利用JS對(duì)iframe父子(內(nèi)外)頁(yè)面進(jìn)行操作的方法教程,其中包括了怎么對(duì)iframe進(jìn)行操作、在iframe里面控制iframe外面的js代碼以及在父框架對(duì)子iframe進(jìn)行操作等,需要的朋友可以參考借鑒。2017-06-06JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法
這篇文章主要介紹了JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法,實(shí)例分析了javascript實(shí)現(xiàn)數(shù)組隨機(jī)重新排序的兩種實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07使用JS給靜態(tài)頁(yè)面添加搜索功能的實(shí)現(xiàn)方法
靜態(tài)頁(yè)面通常由HTML、CSS 和 JavaScript 等靜態(tài)文件組成,這些文件在服務(wù)器上不會(huì)動(dòng)態(tài)生成或修改,所以加載速度通常比較快,本文給大家介紹了如何只使用JS給靜態(tài)網(wǎng)頁(yè)添加站內(nèi)全局搜索功能,文中有詳細(xì)的解決方案,需要的朋友可以參考下2023-11-11javascript實(shí)現(xiàn)簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)
本文給大家反映的是javascript實(shí)現(xiàn)的簡(jiǎn)單的省市區(qū)三級(jí)聯(lián)動(dòng)特效,不需要訪問(wèn)后臺(tái)服務(wù)器端,不使用Ajax,無(wú)刷新,純JS實(shí)現(xiàn)的省市區(qū)三級(jí)聯(lián)動(dòng)。當(dāng)省市區(qū)數(shù)據(jù)變動(dòng)是只需調(diào)正js即可。2015-05-05詳談JS中實(shí)現(xiàn)種子隨機(jī)數(shù)及作用
這篇文章詳細(xì)介紹了種子隨機(jī)數(shù)在JS中如何實(shí)現(xiàn)以及有什么作用,希望能幫助有需要的人。下面一起來(lái)看看。2016-07-07基于zepto.js實(shí)現(xiàn)手機(jī)相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了基于zepto.js實(shí)現(xiàn)手機(jī)相冊(cè)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07javascript模擬枚舉的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript模擬枚舉的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03