<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>翻页</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
fanye(3);
})
var p = 31;
// var d = Math.random();
var data = ["<tr><td>1</td><td>2</td><td>3</td></tr>",
"<tr><td>4</td><td>5</td><td>6</td></tr>",
"<tr><td>7</td><td>8</td><td>9</td></tr>"];
function fanye(innerHTML){
var d = Math.random();
$("table tbody").children().remove();
if((innerHTML * 10 - 1) < p) {
for(var i = 0; i < 10; i++) {
if(d < 0.33) {
$("table tbody").append(data[0]);
}else if(d < 0.66) {
$("table tbody").append(data[1]);
}else if(d < 0.99) {
$("table tbody").append(data[2]);
}
}
} else {
for(var i = 0; i < 5; i++) {
if(d < 0.33) {
$("table tbody").append(data[0]);
}else if(d < 0.66) {
$("table tbody").append(data[1]);
}else if(d < 0.99) {
$("table tbody").append(data[2]);
}
}
}
}
</script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">翻页</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>我的电脑</th>
<th>我的课本</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="panel-footer">
<ul class="pagination pagination-lg">
<li>
<a href="#">第一页</a>
</li>
<li>
<a href="#" οnclick="fanye(this.innerHTML)">1</a>
</li>
<li>
<a href="#" οnclick="fanye(this.innerHTML)">2</a>
</li>
<li class="active">
<a href="#" οnclick="fanye(this.innerHTML)">3</a>
</li>
<li>
<a href="#" οnclick="fanye(this.innerHTML)">4</a>
</li>
<li class="disabled">
<a href="#">最后页</a>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</body>
</html>
转载于:https://www.cnblogs.com/tuoba/p/6044624.html
相关资源：html动态翻页效果
