这篇文章主要向大家介绍了原生 JS 实现的 LOADING 效果的代码,效果非常不错,而且可以自定义颜色和速度,推荐给大家,希望大家能够喜欢。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
纯文本 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 能有所帮助。
来源: