js之隔行换色
Posted 狗尾草的博客
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之隔行换色相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>加载更多</title> <style type="text/css"> .list li{ padding: 10px; line-height: 15px; } .list a{ float: right; } .loadMore{ text-align: center; line-height: 50px; background: #ccc; } .loadMore:hover{ background: #f99; color: #9ff; font-size: 18px; font-weight: 900; cursor: pointer; } </style> </head> <body> <ul class="list"> <li>这是第1个新闻<a href="javascript:;">×</a></li> <li>这是第2个新闻<a href="javascript:;">×</a></li> <li>这是第3个新闻<a href="javascript:;">×</a></li> <li>这是第4个新闻<a href="javascript:;">×</a></li> <li>这是第5个新闻<a href="javascript:;">×</a></li> <li>这是第6个新闻<a href="javascript:;">×</a></li> <li>这是第7个新闻<a href="javascript:;">×</a></li> <li>这是第8个新闻<a href="javascript:;">×</a></li> <li>这是第9个新闻<a href="javascript:;">×</a></li> <li>这是第10个新闻<a href="javascript:;">×</a></li> <li>这是第11个新闻<a href="javascript:;">×</a></li> <li>这是第12个新闻<a href="javascript:;">×</a></li> <li>这是第13个新闻<a href="javascript:;">×</a></li> <li>这是第14个新闻<a href="javascript:;">×</a></li> <li>这是第15个新闻<a href="javascript:;">×</a></li> <li>这是第16个新闻<a href="javascript:;">×</a></li> <li>这是第17个新闻<a href="javascript:;">×</a></li> <li>这是第18个新闻<a href="javascript:;">×</a></li> <li>这是第19个新闻<a href="javascript:;">×</a></li> </ul> <div class="loadMore">加载更多</div> <script src="js/common.js"></script> <script src="js/index.js"></script> </body> </html>
JS
Common
//通过类名获取元素样式 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(); } }
JS
//各行变色 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); }) } }) }
以上是关于js之隔行换色的主要内容,如果未能解决你的问题,请参考以下文章