body{background:#eee;margin:0}
.box{width:800px;margin:0 auto;background:#fefefe;border-radius:8px;padding:20px;box-sizing:border-box;margin-top:40px}
.title{font-family:'Microsoft YaHei';color:#666;font-size:24px;text-align:center;margin:10px 0}
.comment ul{margin:0;padding:10px;list-style:none;border-bottom:1px solid #ccc}
.comment li{line-height:32px}
.pagelist{margin-top:20px;text-align:center}
.pagelist span{margin:0 2px}
.pagelist button{padding:6px 10px;cursor:pointer}
.pagelist button:disabled{cursor:default}
.progress div{width:0%;height:1px;position:fixed;top:0;background-color:#38f;box-shadow:1px 1px 1px #6bf;transition: all 0.8s}
当前是第1页
首页
上一页
下一页
尾页
(function() {
function PageList(json) {
for (var i in json) {
this[i] = json[i];
}
var obj = this;
this.first.onclick = function() {
obj.page = 1;
obj.onChange();
};
this.prev.onclick = function() {
obj.page = (obj.page > 1) ? (obj.page - 1) : 1;
obj.onChange();
};
this.next.onclick = function() {
obj.page = (obj.page >= obj.maxPage) ? obj.maxPage : (obj.page + 1);
obj.onChange();
};
this.last.onclick = function() {
obj.page = obj.maxPage;
obj.onChange();
};
}
PageList.prototype.updateStatus = function() {
this.first.disabled = (this.page <= 1);
this.prev.disabled = (this.page <= 1);
this.next.disabled = (this.page >= this.maxPage);
this.last.disabled = (this.page >= this.maxPage);
this.pageNum.innerHTML = this.page;
};
function Comment(obj) {
this.obj = obj;
}
Comment.prototype.ajax = function(url, start, complete) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status < 200 || xhr.status >= 300 && xhr.status !== 304) {
alert('服务器异常');
return;
}
try {
var obj = JSON.parse(xhr.responseText);
} catch(e) {
alert('解析服务器返回信息失败');
return;
}
complete(obj);
}
};
xhr.open('GET', url);
xhr.send();
start();
};
Comment.prototype.create = function(data) {
var html = '';
for (var i in data) {
html += '
- 用户名:' + data[i].user + ' 发表时间:' + data[i].time + '';
html += '
' + data[i].content + '';}
this.obj.innerHTML = html;
};
function ProgressBar(container) {
this.container = container;
this.div = document.createElement('div');
this.container.appendChild(this.div);
}
ProgressBar.prototype.show = function() {
this.div.style.width = '70%';
};
ProgressBar.prototype.complete = function() {
var div = this.div;
var container = this.container;
div.style.width = '100%';
setTimeout(function() {
div.style.opacity = 0;
setTimeout(function() {
container.removeChild(div);
}, 300);
}, 500);
};
var QueryString = {
get: function() {
return location.search.substr(1);
},
set: function(str) {
history.pushState(null, null, '?' + str);
},
find: function(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = this.get().match(reg);
return r ? unescape(r[2]): null;
},
getPage: function() {
var page = parseInt(this.find('page'));
return (isNaN(page) || (page < 1)) ? 1 : page;
}
};
var comment = new Comment(document.getElementById('comment'));
var progressBar;
var progressContainer = document.getElementById('progress');
var pageList = new PageList({
page: QueryString.getPage(),
maxPage: 1,
first: document.getElementById('page_first'),
prev: document.getElementById('page_prev'),
next: document.getElementById('page_next'),
last: document.getElementById('page_last'),
pageNum: document.getElementById('page_num'),
onChange: function() {
comment.ajax('data.php?page=' + this.page, function() {
progressBar = new ProgressBar(progressContainer);
progressBar.show();
}, function(obj) {
pageList.maxPage = obj.maxPage;
pageList.updateStatus();
comment.create(obj.data);
QueryString.set('page=' + pageList.page);
progressBar.complete();
});
}
});
pageList.onChange();
})();
一键复制
编辑
Web IDE
原始数据
按行查看
历史