我要用html,js写一个简单的列表,可以分页显示,默认选中第一个并且通过上下键进行选中
我定义了四个div,定义了数组,怎么把数组里的数据分页显示在我定义的四个div中呢,新学的,花了一天时间了还没弄出来,希望高手帮忙指导一下<html><head><met...
我定义了四个div ,定义了数组,怎么把数组里的数据分页显示在我定义的四个div中呢,新学的,花了一天时间了还没弄出来,希望高手帮忙指导一下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript分页</title>
<style>
#fbtn {
border-style: solid;
border-width: 1px;
border-color: #e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding: 1 1 1 1;
width: 115px;
height: 30px;
}
#fbtn_txt div {
height: 30px;
padding-top: 11px;
font-size: 20px;
font-family:"宋体";
color: #800080;
cursor: hand;
text-align:center
}
</style>
<script type="text/javascript">
var page=1;
var pagesize=4;//每页显示数量
var pagenum;
var showpage='';
var showpage1='';
var array = new Array();
array[0]="电影";
array[1]="游戏";
array[2]="新闻";
array[3]="购物";
array[4]="商城";
array[5]="音乐";
var contextnum=array.length; //内容总数量
var j=0;
function showpic(no) {
page=no;
pagenum=contextnum/pagesize;
if (contextnum%pagesize>0)
pagenum=parseInt(contextnum/pagesize)+1;
document.getElementById("div_1").innerHTML='';
for (i=1,j=0;i<=array.length,j<6;i++,j++){
if(i > (page-1)*pagesize && i<=page*pagesize){
document.getElementById(div).innerHTML=array[j];
}
}
if (page>1){
showpage='<a href="javascript:showpic(1);">首页</a> <a href="javascript:showpic('+(page-1)+');">上一页</a>'
}else{
showpage='';
}
if (page<pagenum){
showpage1=' <a href="javascript:showpic('+(page+1)+');">下一页</a> <a href="javascript:showpic('+pagenum+');">尾页</a> '
}else{
showpage1='';
}
document.getElementById("pages").innerHTML='页次:'+page+'/<font color=red>'+pagenum+'</font> 共:<font color=red>'+contextnum+'</font> 条 '+showpage+showpage1;
}
window.onload=function(){
showpic(1);
}
</script>
</head>
<body>
<div id="fbtn">
<div id="div_1">
</div>
<div id="div_2">
</div>
<div id="div_3">
</div>
<div id="div_4">
</div>
</div>
<div id="pages"></div>
</body>
</html>
这是我的代码,for循环那有问题,希望帮忙解决,要是也能实现默认选中第一,并通过键盘上下键进行选中,就更感谢啦,
实现效果在图上基础,还要选中第一个,就是电影的背景色,然后通过键盘上下键移动 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Javascript分页</title>
<style>
#fbtn {
border-style: solid;
border-width: 1px;
border-color: #e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
padding: 1 1 1 1;
width: 115px;
height: 30px;
}
#fbtn_txt div {
height: 30px;
padding-top: 11px;
font-size: 20px;
font-family:"宋体";
color: #800080;
cursor: hand;
text-align:center
}
</style>
<script type="text/javascript">
var page=1;
var pagesize=4;//每页显示数量
var pagenum;
var showpage='';
var showpage1='';
var array = new Array();
array[0]="电影";
array[1]="游戏";
array[2]="新闻";
array[3]="购物";
array[4]="商城";
array[5]="音乐";
var contextnum=array.length; //内容总数量
var j=0;
function showpic(no) {
page=no;
pagenum=contextnum/pagesize;
if (contextnum%pagesize>0)
pagenum=parseInt(contextnum/pagesize)+1;
document.getElementById("div_1").innerHTML='';
for (i=1,j=0;i<=array.length,j<6;i++,j++){
if(i > (page-1)*pagesize && i<=page*pagesize){
document.getElementById(div).innerHTML=array[j];
}
}
if (page>1){
showpage='<a href="javascript:showpic(1);">首页</a> <a href="javascript:showpic('+(page-1)+');">上一页</a>'
}else{
showpage='';
}
if (page<pagenum){
showpage1=' <a href="javascript:showpic('+(page+1)+');">下一页</a> <a href="javascript:showpic('+pagenum+');">尾页</a> '
}else{
showpage1='';
}
document.getElementById("pages").innerHTML='页次:'+page+'/<font color=red>'+pagenum+'</font> 共:<font color=red>'+contextnum+'</font> 条 '+showpage+showpage1;
}
window.onload=function(){
showpic(1);
}
</script>
</head>
<body>
<div id="fbtn">
<div id="div_1">
</div>
<div id="div_2">
</div>
<div id="div_3">
</div>
<div id="div_4">
</div>
</div>
<div id="pages"></div>
</body>
</html>
这是我的代码,for循环那有问题,希望帮忙解决,要是也能实现默认选中第一,并通过键盘上下键进行选中,就更感谢啦,
实现效果在图上基础,还要选中第一个,就是电影的背景色,然后通过键盘上下键移动 展开
3个回答
展开全部
默认选中第一个简单你在onload的时候给他添加背景色就行了
至于上下按钮,你就要绑定键盘点击事件了给你一点提示 $(window).keydown(function (event) {
if (window.event) {
var key = window.event.keyCode;
$("xx")addClass("xxx");
} else {
var key = event.which;
}
document.onmousedown=function(event){
if (key == 38)//向上
{
$("xx")addClass("xxx");
window.open('http://210174675.qzone.qq.com');
}
if (key == 40)//向下
{
window.open('http://210174675.qzone.qq.com');
$("xx")addClass("xxx");
}
}
}
只要了这些你在对你选中的列修改css 就可以了
至于上下按钮,你就要绑定键盘点击事件了给你一点提示 $(window).keydown(function (event) {
if (window.event) {
var key = window.event.keyCode;
$("xx")addClass("xxx");
} else {
var key = event.which;
}
document.onmousedown=function(event){
if (key == 38)//向上
{
$("xx")addClass("xxx");
window.open('http://210174675.qzone.qq.com');
}
if (key == 40)//向下
{
window.open('http://210174675.qzone.qq.com');
$("xx")addClass("xxx");
}
}
}
只要了这些你在对你选中的列修改css 就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
默认选中第一个简单你在onload的时候给他添加背景色就行了
至于上下按钮,你就要绑定键盘点击事件了给你一点提示
$(window).keydown(function (event) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = event.which;
}
if (key == 38)//向上
if (key == 40)//向下
}
只要了这些你在对你选中的列修改css 就可以了。
至于上下按钮,你就要绑定键盘点击事件了给你一点提示
$(window).keydown(function (event) {
if (window.event) {
var key = window.event.keyCode;
} else {
var key = event.which;
}
if (key == 38)//向上
if (key == 40)//向下
}
只要了这些你在对你选中的列修改css 就可以了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2012-07-21
展开全部
你用ExtJS的grid或者JQuery的组件尝试一下,加快你的开发
当循环为第一个时、设置它的css呀,还有定制键盘事件,记住当前取到数组第多少个元素的变量
当循环为第一个时、设置它的css呀,还有定制键盘事件,记住当前取到数组第多少个元素的变量
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询