- 转-- http://www.2cto.com/kf/201402/277535.html
- 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!
-
要求:动态输入内容,点击post生成内容条,实现自动翻页!
废话不多说,直接上代码:
js代码:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122var date=
new
Date();
var myDate=date.getDate()+
"/"
+(date.getMonth()+
1
)+
"/"
+date.getFullYear();
var arr=
new
Array();
var pagesize=
8
;
var curpage=
0
;
var id=
0
;
var ind=
0
;
function getContent(){
var getMind=document.getElementById(
"mindBox"
).value.replace(/(^\s*)|(\s*$)/g,
""
);
var getMoods=document.getElementsByName(
"Answer"
);
var flag=
false
;
var getMood=
""
for
(var i=
0
; i<getmoods.length; i++)=
""
{=
""
if
(getmoods[i].checked){=
""
flag=
"true;"
ind=
"i;"
}=
""
if
(ind=
"=0){getMood="1.png"}else"
if
(getmind=
"=""){alert("Please"
write=
""
your=
""
mind=
""
!
");="
" return="
" false;}="
" else="
" if(!flag){alert("
please=
""
choose=
""
mood=
""
arr[arr.length]=
"[myDate,getMood,getMind,id];//将获取的数据放入多维数组中"
id++;=
""
function=
""
checktable(){=
""
var=
""
arry_return=
"new"
array();=
""
start_t;=
""
end_t;=
""
start=
"curpage*pagesize;"
if
(pagesize+start=arr.length&&start<=arr.length){
start_t = start;
end_t=arr.length;
for
(var i=
0
; i<(arr.length-start_t); i++){
arry_return.push(arr[i]);
}
}
else
if
(start>arr.length){
return
arry_return;
}
return
arry_return;
//将筛选后的数据放到新的数组中
}
function showTable(array){
//将数据循环展示在页面中
var tbodyBox=document.getElementById(
"tb"
);
var t=tbodyBox.childNodes;
for
(var m=t.length-
1
; m>=
0
; m--){
tbodyBox.removeChild(t[m]);
}
for
(var i=array.length-
1
;i>=
0
;i--){
var row=document.createElement(
"tr"
);
var cellDate=document.createElement(
"td"
);
cellDate.appendChild(document.createTextNode(array[i][
0
]));
var cellMood=document.createElement(
"td"
);
var img=document.createElement(
"img"
);
img.setAttribute(
"src"
,array[i][
1
]);
cellMood.appendChild(img);
//cellMood.appendChild(document.createTextNode(array[i][1]));
var cellMind=document.createElement(
"td"
);
cellMind.appendChild(document.createTextNode(array[i][
2
]));
var cellDelete=document.createElement(
"td"
);
var inp=document.createElement(
"input"
);
inp.setAttribute(
"type"
,
"button"
);
inp.setAttribute(
"value"
,
"delete"
);
inp.setAttribute(
"id"
,array[i][
3
]);
inp.setAttribute(
"onclick"
,
"del(this)"
);
cellDelete.appendChild(inp);
row.appendChild (cellDate);
row.appendChild(cellMood);
row.appendChild(cellMind);
row.appendChild(cellDelete);
tbodyBox.appendChild(row);
}
}
function submitMind(){
//input提交
getContent();
showTable(checkTable());
document.getElementById(
"pagecount"
).innerHTML=arr.length;
document.getElementById(
"pagenum"
).innerHTML=Math.ceil(arr.length/pagesize);
}
function PerPage(){
//上一页
(curpage<
1
)?curpage=
0
:curpage--;
showTable(checkTable());
}
function NextPage(){
//下一页
var pagecount=Math.ceil(arr.length/pagesize);
(curpage<(pagecount-
1
))?curpage++:document.getElementById(
"pageDown"
).disabled=
"true"
;
showTable(checkTable());
}
function del(temp){
//删除某条特定的数据
var getID=temp.id;
for
(var i=
0
; i<br>
css代码:<p></p>
<p></p><pre
class
=
"brush:java;"
>.container{text-align:center;}
.tit{font-size:24px;}
table{width:
100
%; border:none;}
tr,td{text-align:center;}
.tableContent{width:850px; margin:
0
auto;}</pre><br>
html代码:<p></p>
<p></p><pre
class
=
"brush:java;"
>
<div
class
=
"container"
>
<h1>My Micro Blog</h1>
<span
class
=
"tit"
>What's in my mind:</span>
<input type=
"text"
id=
"mindBox"
size=
"100"
maxlength=
"400"
>
<br>
<br>
<span
class
=
"tit"
>Today's mood:</span>
<input type=
"radio"
name=
"Answer"
value=
"1"
>
Over the moon
<input type=
"radio"
name=
"Answer"
value=
"2"
>
Happy
<input type=
"radio"
name=
"Answer"
value=
"3"
>
Sad
<input type=
"submit"
value=
"Post"
onclick=
"submitMind()"
>
<br>
<div
class
=
"tableContent"
>
<table id=
"tableBox"
>
<tbody><tr>
<th>Date</th>
<th>Mood</th>
<th>What's in my mind</th>
<th>Delete</th>
</tr>
</tbody><tbody id=
"tb"
></tbody>
<tbody><tr>
<td colspan=
"4"
style=
" background:#DDF4F6; line-height:32px;"
><span
class
=
"fan"
style=
"padding:0;"
> <span id=
"pageUp"
style=
"cursor:pointer;"
onclick=
"PerPage()"
>prev</span> <span id=
"pageDown"
style=
"cursor:pointer;"
onclick=
"NextPage()"
>next</span> <span>共 <span id=
"pagenum"
>
1
</span>页 <span id=
"pagecount"
>
0
</span>条</span> </span></td>
</tr>
</tbody></table>
</div>
</div>
</pre><p></p>
<p>效果图如下:</p>
<p><img src=
"http://www.2cto.com/uploadfile/Collfiles/20140211/2014021108532459.jpg"
alt=
""
http:=
""
www.2cto.com=
""
soft
"="
" target="
_blank
" class="
keylink
" style="
width: 630px; height:
342
.43660418963617px;">下载下来就能用哟,不用积分的!
</p><p>http:
//download.csdn.net/download/u010480479/6910785<br>
</p>
<p>如果有任何指教和交流,请加QQ:
1740437
。</p>
<p><br>
</p>
<p><br>
</p> </arr.length;></getmoods.length;>