@charset ; *{ margin:0; padding:0; } body{ background: #7CCD7C; } .box{ width: 80%; margin: 0 auto; } .newsTitle{ font-size: 24px; text-align: center; margin: 0 auto; padding: 20px 10px; font-weight: normal; letter-spacing: 10px; } .newsList{ display: block; margin: 0 auto; line-height: 50px; font-size: 16px; list-style: none; } .newsList li{ padding: 0 20px; box-shadow: 0 0 10px #eeeeee; } .box .newsList li:hover{ background: #B0E2FF; } .newsList li:nth-child(odd){ background: #f3f3f3; } .newsList li:nth-child(even){ background: #eeeeee; } .deleteBtn{ float: right; text-decoration: none; font-size: 16px; color: #555555; } .loadMoreInfo{ margin-top: 10px; text-align: center; line-height: 50px; font-size: 16px; background: #ffffff; cursor: pointer; vertical-align: middle; margin-bottom: 20px; } .loadMoreInfo img{ display: none; width: 20px; height: 20px; vertical-align: middle; }

3.公共js(封装的$函数以及ajax函数)

/* 封装$函数 参数说明： id:标签的id属性值 */ function $(id) { return document.getElementById(id); } /* 封装ajax函数 参数说明：对象作为参数不用考虑参数顺序问题 type:请求类型； url:请求访问地址； param：请求数据,支持对象也支持字符串； asyn:是否异步加载,boolean类型，true异步，false同步 beforesend：回调函数在发送请求之前执行 success：回调函数,请求成功时执行 complete：回调函数,请求完成研究生给导师送礼说什么_汉服女装图片后执行 */ function ajax({type,url,param,asyn=true,beforesend,success,complete}) { xhr = new XMLHttpRequest(); (param && ) { var str; for(var child in param){ //encodeURIComponent编码参数，避免特殊字符分割时丢失 str+=encodeURIComponent(child) + + encodeURIComponent(param[child]) + } param=str.slice(0,-1);//截取拼接完成后最后的&符 } (type.toUpperCase()===&& param) { url+=+param; } //请求配置 xhr.open(type , url, asyn); //获取返回的数据 xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { //获取返回的数据并转换 success(xhr.responseText); } //请求完成后的函数 complete && complete(); } //发送请求 beforesend && beforesend(); ) { //post请求设置编码方式 xhr.setRequestHeader(,) //post请求时通过send向body传参(无论param参数是否为空，必须传) xhr.send(param); } else{ //get请求发送请求 xhr.send(); } }

4.页面js