js之隔行換色
阿新 • • 發佈:2018-08-14
center parseint ini mes node times i++ 對象 attach
HTML
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(); } }
//各行變色 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之隔行換色