ネイティブ JS は LOADING 効果_JavaScript スキルを実装します

プレーンテキスト読み込み効果、色と速度を自分で定義できます

コードをコピーします コードは次のとおりです:

/**Loading animation
 *  Created by 黑と白の印記 on 15/03/11.
 */

関数読み込み(要素、ライトカラー、ダークカラー、速度、コールバック){
If(!element&&(!element.innerText||!element.textContent))return
要素 = 要素の種類==="文字列"?document.getElementById(要素):要素
lightColor = lightColor||"#fff"、darkColor = darkColor||"#000"、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(スパン)
}
}((element.innerText||element.textContent).split(""))

var インデックス = -1、長さ = arr_spanEles.length
varloadTimer = setInterval(function(){
arr_spanEles[Math.max(index,0)].style.color = darkColor
If(インデックス == 長さ-1){
インデックス = -1
callback&&callback()
}
インデックス
arr_spanEles[index].style.color = lightColor
},スピード)
}

以上がこの記事で説明した内容のすべてです。JavaScript を学習するすべての人に役立つことを願っています。