欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實現(xiàn)LOADING效果

 更新時間:2015年03月16日 16:25:00   投稿:hebedich  
這篇文章主要向大家介紹了原生JS實現(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)
}

以上就是本文所述的全部內容了,希望對大家學習javascript能有所幫助。

相關文章

  • 利用JS對iframe父子(內外)頁面進行操作的方法教程

    利用JS對iframe父子(內外)頁面進行操作的方法教程

    這篇文章主要給大家介紹了利用JS對iframe父子(內外)頁面進行操作的方法教程,其中包括了怎么對iframe進行操作、在iframe里面控制iframe外面的js代碼以及在父框架對子iframe進行操作等,需要的朋友可以參考借鑒。
    2017-06-06
  • Array的push與unshift方法性能比較分析

    Array的push與unshift方法性能比較分析

    Array的push與unshift方法都能給當前數(shù)組添加元素,不同的是,push是在末尾添加,而unshift則是在開頭添加。
    2011-03-03
  • JavaScript對數(shù)組進行隨機重排的方法

    JavaScript對數(shù)組進行隨機重排的方法

    這篇文章主要介紹了JavaScript對數(shù)組進行隨機重排的方法,實例分析了javascript實現(xiàn)數(shù)組隨機重新排序的兩種實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • Javascript的&&和||的另類用法

    Javascript的&&和||的另類用法

    這篇文章主要介紹了Javascript的&&和||的另類用法,需要的朋友可以參考下
    2014-07-07
  • 使用JS給靜態(tài)頁面添加搜索功能的實現(xiàn)方法

    使用JS給靜態(tài)頁面添加搜索功能的實現(xiàn)方法

    靜態(tài)頁面通常由HTML、CSS 和 JavaScript 等靜態(tài)文件組成,這些文件在服務器上不會動態(tài)生成或修改,所以加載速度通常比較快,本文給大家介紹了如何只使用JS給靜態(tài)網(wǎng)頁添加站內全局搜索功能,文中有詳細的解決方案,需要的朋友可以參考下
    2023-11-11
  • javascript實現(xiàn)簡單的省市區(qū)三級聯(lián)動

    javascript實現(xiàn)簡單的省市區(qū)三級聯(lián)動

    本文給大家反映的是javascript實現(xiàn)的簡單的省市區(qū)三級聯(lián)動特效,不需要訪問后臺服務器端,不使用Ajax,無刷新,純JS實現(xiàn)的省市區(qū)三級聯(lián)動。當省市區(qū)數(shù)據(jù)變動是只需調正js即可。
    2015-05-05
  • 詳談JS中實現(xiàn)種子隨機數(shù)及作用

    詳談JS中實現(xiàn)種子隨機數(shù)及作用

    這篇文章詳細介紹了種子隨機數(shù)在JS中如何實現(xiàn)以及有什么作用,希望能幫助有需要的人。下面一起來看看。
    2016-07-07
  • 微信小程序教程系列之新建頁面(4)

    微信小程序教程系列之新建頁面(4)

    這篇文章主要為大家詳細介紹了微信小程序新建頁面的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • 基于zepto.js實現(xiàn)手機相冊功能

    基于zepto.js實現(xiàn)手機相冊功能

    這篇文章主要為大家詳細介紹了基于zepto.js實現(xiàn)手機相冊功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • javascript模擬枚舉的簡單實例

    javascript模擬枚舉的簡單實例

    本篇文章主要是對javascript模擬枚舉的簡單實例進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-03-03

最新評論