js之隔行换色

//通过类名获取元素样式function byClassName(sClassName){ ???if(document.getElementsBYClassName){ ???????return document.getElementsByClassName(sClassName); ???} else { ???????var allTagsName = document.getElementsByTagName(‘*‘); ???????var result = []; ???????for(var i = 0; i<allTagsName.length;i++){ ???????????if(allTagsName[i].className === sClassName){ ???????????????result.push(allTagsName[i]); ???????????} ???????} ???????return result; ???}}//通过Id获取元素样式function $(id){ ???return document.getElementById(id);}//获取元素的实际样式function getStyle(obj,attr){ ???if(obj.currentStyle){ ???????return obj.currentStyle[attr]; ???} else { ???????return document.getComputedStyle(obj,false)[attr]; ???}}//多属性缓冲运动function bufferMove(obj,target,fn,ratio){ ???var ratio = ratio || 8; ???clearInterval(obj.timer); ???obj.timer = setInterval(function(){ ???????var allOk = true; ???????for(var attr in target){ ???????????var cur = 0; ???????????if(attr === ‘opacity‘){ ???????????????cur = parseInt(getStyle(obj,‘opacity‘) * 100); ???????????} else { ???????????????cur = parseInt(getStyle(obj,attr)); ???????????} ???????????var speed =(target[attr] - cur) / ratio; ???????????speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); ???????????var next = speed + cur; ???????????if(attr === ‘opacity‘){ ???????????????obj.style.opacity = next + ‘px‘; ???????????????obj.style.opacity = ‘alpha(opacity= ‘ + next + ‘) ‘; ???????????} else { ???????????????obj.style[attr] = next + ‘px‘; ???????????} ???????????if(next !== target[attr]){ ???????????????allOk = false; ???????????} ???????} ???????if(allOk){ ???????????clearInterval(obj.timer); ???????????if(fn){ ???????????????fn(); ???????????} ???????} ???},50)}//添加事件兼容,绑定多个事件function bindEvent(obj,type,fn){ ???if(obj.addEventListener){ ???????obj.addEventListener(type,fn); ???} else { ???????obj.attachEvent(‘on‘ + type,fn); ???}} function ajax({type,data,url,async,beforeSend,success,complete}){ ???var async = async || true;// ???创建对象 ???var xhr = new XMLHttpRequest();// ???字符串的拼接 ???????if(typeof data === ‘object‘){ ???????????var str = ‘‘; ???????????for(var attr in data){ ???????????????str += encodeURIComponent(attr) + ‘=‘ + encodeURIComponent(data[attr]) + ‘&‘; ???????????} ???????????data = str.slice(0,-1); ???????} ???if(type.toUpperCase() === ‘GET‘ && data){ ???????url += ‘?‘ + data; ???}// ???配置 ???xhr.open(type,url,async);// ???接收数据 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState === 4){ ???????????if(xhr.status === 200){ ???????????????success && success(xhr.responseText); ???????????} ???????????complete && complete(); ???????} ???};// ???发送 ???beforeSend && beforeSend(); ???if(type.toUpperCase() === ‘POST‘){ ???????xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘); ???????xhr.send(data); ???} else { ???????xhr.send(); ???}}

//各行变色var oList = byClassName(‘list‘)[0];var oLoadMore = byClassName(‘loadMore‘)[0];var oLi = oList.children;for(var i = 0 ; i<oLi.length;i++){ ???if(i % 2 === 0){ ???????oLi[i].style.backgroundColor = ‘#ccc‘; ???} ???oLi[i].index = i; ???oLi[i].onmouseover = function(){ ???????this.style.backgroundColor = ‘#9ff‘; ???} ???oLi[i].onmouseout = function(){ ???????if(this.index % 2 === 0){ ???????????this.style.backgroundColor = ‘#ccc‘; ???????} else { ???????????this.style.backgroundColor = ‘#fff‘; ???????} ???}}//添加删除功能oList.onclick = function(ev){ ???var e = ev || window.event; ???var o = e.target || e.srcElement; ???if(o.nodeName === ‘A‘){ ???????oList.removeChild(o.parentNode); ???}}//加载更多点击事件oLoadMore.onclick = function(){ ???ajax({ ???????type: ‘post‘, ???????url: ?‘news.php‘, ???????success: function(data){ ???????????data = JSON.parse(data);console.log(data); ???????????data.forEach(v => { ???????????????var oNewLi = document.createElement(‘li‘); ???????????????oNewLi.innerHTML = ‘<a href="javascript">×</a>‘ + v; ???????????????oList.appendChild(oNewLi); ???????????}) ???????} ???})}