【JavaScript】使用JS实现DIV的互…

最新推荐文章于 2022-07-10 16:12:15 发布
最新推荐文章于 2022-07-10 16:12:15 发布
阅读量515 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ijusttale/article/details/38683373
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">

var now_page = 1;//当前页

var total    = "";//总条数

var page     = 5;//每页显示条数


function gettotal(r)

{

total = r;

}


function print_content()

{

var page_control = document.getElementByIdx_x_x("page_control");

var page_first   = document.getElementByIdx_x_x("page_first");

var page_prev    = document.getElementByIdx_x_x("page_prev");

var page_pages   = document.getElementByIdx_x_x("page_pages");

var page_next    = document.getElementByIdx_x_x("page_next");

var page_last    = document.getElementByIdx_x_x("page_last");

//先将所有的层隐藏

for (i=1;i<=total;i++)

{

$('#content_'+i).css('display','none');

}

//如果总记录数小于分页记录数,则显示全部记录

if (total <page)

{

for (i=1;i<=total;i++)

{

$('#content_'+i).css('display','block');//显示全部记录

page_control.innerHTML = 1;//设置分页样式为1

}


page_first.style.display='inline';

page_prev.style.display='inline';

page_next.style.display='inline';

page_last.style.display='inline';

}

else//否则显示对应的分页记录

{

content = now_page*page;

for (i=content;i>(content-page);i--)

{

$('#content_'+i).css('display','block');//显示对应的分页记录

}


//首页

if (now_page > 1)

{

page_first.style.display='inline';

}

else

{

page_first.style.display='none';

}


//上一页

if(now_page != 1)

{

page_prev.style.display='inline';

}

else

{

page_prev.style.display='none';

}


//指定页码

if(Math.ceil(total/page) < (now_page+2))

{

last_page = Math.ceil(total/page);

}

else

{

last_page = (now_page+2);

}


if(2 < now_page)

{

prev_page = (now_page-2);

}

else

{

prev_page = 1;

}

var pages_content = "";


for (i=prev_page;i<now_page;i++)

{

pages_content = pages_content+' <span style="cursor:pointer;font-size:20px;text-decoration:underline;" οnclick="pages_pages('+i+')">'+i+'</span> ';  

}

for (i=now_page;i<=last_page;i++)

{

var page_content="";

if (i==now_page)

{

page_content = ' <span style="cursor:pointer;font-size:20px;" οnclick="">'+i+'</span> ';

}

else

{

page_content = ' <span style="cursor:pointer;font-size:20px;text-decoration:underline;" οnclick="pages_pages('+i+')">'+i+'</span> ';

}

pages_content = pages_content+page_content;

}

page_pages.innerHTML = pages_content;



//下一页

if(now_page < Math.ceil(total/page))

{

page_next.style.display='inline';

}

else

{

page_next.style.display='none';

}


//末页

if(now_page != Math.ceil(total/page))

{

page_last.style.display='inline';

}

else

{

page_last.style.display='none';

}

}

}


//首页

function pages_first()

{

now_page = 1;

print_content();

}


//上一页

function pages_prev()

{

now_page = (--now_page);

print_content();

}


//指定页码

function pages_pages(r)

{

now_page = r;

print_content();

}


//下一页

function pages_next()

{

now_page = (++now_page);

print_content();

}


//末页

function pages_last()

{

now_page = Math.ceil(total/page);

print_content();

}


//下降

function down(id,total)

{

var down_out = document.getElementByIdx_x_x("out_"+(id+1));//取得下层外层的对象


var up_out = document.getElementByIdx_x_x("out_"+id);//取得上层外层的对象


    var down_order = document.getElementByIdx_x_x("order_"+(id+1));//取得下层隐藏域的对象


    var up_order = document.getElementByIdx_x_x("order_"+id);//取得上层隐藏域的对象

    

    var up_in = document.getElementByIdx_x_x("in_"+up_order.value);//取得上层的里层对象


    var down_in = document.getElementByIdx_x_x("in_"+down_order.value);//取得下层的里层对象


    up_out.a(down_in);//将下层的里层放进上层的外层

    

    down_out.a(up_in);//将上层的里层放进下层的外层   


    var cache_order = up_order.value;//传递隐藏域的值 

    

    up_order.value = down_order.value;//对换隐藏域的值

    

    down_order.value = cache_order;//对换隐藏域的值

}


//上升

function up(id,total)

{

var down_out = document.getElementByIdx_x_x("out_"+id);//取得下层外层的对象


var up_out = document.getElementByIdx_x_x("out_"+(id-1));//取得上层外层的对象


    var down_order = document.getElementByIdx_x_x("order_"+id);//取得下层隐藏域的对象


    var up_order = document.getElementByIdx_x_x("order_"+(id-1));//取得上层隐藏域的对象

    

    var up_in = document.getElementByIdx_x_x("in_"+up_order.value);//取得上层的里层对象


    var down_in = document.getElementByIdx_x_x("in_"+down_order.value);//取得下层的里层对象


    up_out.a(down_in);//将下层的里层放进上层的外层

    

    down_out.a(up_in);//将上层的里层放进下层的外层   


    var cache_order = up_order.value;//传递隐藏域的值 

    

    up_order.value = down_order.value;//对换隐藏域的值

    

    down_order.value = cache_order;//对换隐藏域的值

}



</script>

</head> 

<body οnlοad="gettotal(30);print_content()">

<center>

<?php for ($i=1;$i<=30;$i++):?>

<div style="display:inline;" id="content_<?=$i?>">

<input id="order_<?=$i?>" type="hidden" value="<?=$i?>"/>

<span id="out_<?=$i?>">

<span  id="in_<?=$i?>">

<?='内容_'.$i?>

</span>

</span>

<?php if ($i!==1):?>

<span οnclick="up(<?=$i?>,30)" id="up_<?=$i;?>" style="cursor:pointer;font-size:20px;text-decoration:underline;">up</span>

<?php else: ?>

<span οnclick="" id="up_<?=$i;?>" style="font-size:20px;">up</span>

<?php endif;?>

<?php if ($i!==30):?>

<span οnclick="down(<?=$i?>,30)" id="down_<?=$i;?>" style="cursor:pointer;font-size:20px;text-decoration:underline;">down</span>

<?php else: ?>

<span οnclick="" id="down_<?=$i;?>" style="font-size:20px;">down</span>

<?php endif;?>

</div>

<?php endfor;?>


<span id="page_control">

<span id="page_first" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_first()">首页</span>

<span id="page_prev" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_prev()">上一页</span>

<span id="page_pages" ></span>

<span id="page_next" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_next()">下一页</span>

<span id="page_last" style="cursor:pointer;font-size:20px;text-decoration:underline;display:none" οnclick="pages_last()">末页</span>

</span>


</center>

</body> 

</html>

ljx008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 清空div 的html 或删除 div
mmijacky的专栏
08-20 1817
//$("#div_gridshow").html("");//清空html                 $("#div_gridshow").remove();//去除DIV                 $("#div_gridshow").hide();
DIV+JS画图,DIV与DIV之间的连线!
11-15
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法： var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
对DIV的一些简单控制
为天加朵云...
08-13 736
对DIV的一些简单控制 #d1 {position: absolute;width: 300px;height: 300px;visibility: hidden;color: #fff;background: #555;}#d2 {position: absolute;width: 300px;height: 300px;visibility: hidden;color: #fff;back
超简单的JS动态创建div
09-16
原生JS动态创建div的实例,超简单.不喜欢冗余代码的同学,建议可以看看
08JS操作DIV样式
Blog of Lytracy
09-07 2372
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
JS调用父页面的DIV,Ipunt等等属性（适用于父页面包含子页面）
qssn的博客
04-13 1246
有些时候我们需要从子页面调用父页面的属性，比如input的value等等。如图：一个html文件的body包含另一个html文件。 思路：先在父页面写好获得该属性值的方法，使用window.parent. 调用父页面方法，用return返回属性. //子页面方法 function getCloseModuleWin(){ console.l
JavaScript & CSS 实现div选中
07-12
结合以上内容，我们可以看到，通过JavaScript和CSS，我们可以优雅地实现div的选中效果，提供良好的用户体验和视觉反馈。在实际应用中，还要根据具体需求进行调整，例如添加动画效果、优化性能、处理边界情况等。文件...
用javascript实现div可编辑的常见方法
10-30
### 用JavaScript实现DIV可编辑的常见方法 在现代Web开发中，使页面元素变得可编辑是一项非常实用的功能，它可以显著提升用户体验，并增加页面的互动性。本文将详细介绍两种常用的利用JavaScript实现DIV可编辑性的...
JavaScript动态改变div属性的实现方法
10-23
主要介绍了JavaScript动态改变div属性的实现方法,涉及javascript操作页面div元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Javascript 圆角div的实现代码
10-29
为什么要做圆角的div： 圆角div平滑美观，某些情况下有比较不错的效果。比如说要做一个报message的消息框，那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。
javascript实现控制div颜色
10-23
本文给大家分享的是使用javascript实现控制DIV背景色的代码，非常的简单实用，有需要的小伙伴可以参考下。
使用js添加div
weixin_30488313的博客
09-01 524
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> ...
前端js获取div的选择器方法
m0_49714202的博客
07-10 2386
前端js获取div的选择器方法
js实现倒计时+div下落
bakan66065136006的博客
09-22 334
全部由js动态生成结点，body内无内容 <style> #count{ position: absolute; text-align: center; width: 240px; height: 260px; top: 230px; left: 750...
如何通过一组单选按钮控制来控制对应的一组div，就是点击按钮对应的div进行改变，类似于div互斥的样子！（小菜鸟入门小白教程）
H_ONE_PIECE的博客
08-25 1838
小菜鸟们冲鸭！！ 由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！ 一.问题描述 通过一组单选按钮来控制一组div变化。就比如有三个单选按钮，然后三个div，一个按钮关联一个div，当我点击按钮时对应的div进行变化，然后点另外的一个按钮，它对应的div变化，当前选中的恢复。 二、解决办法 1、首先在一个div里面定义三个小的d...
JavaScript实现Div网格布局：步骤与最佳实践
在本篇文章《如何使用 JavaScript 创建 Div 网格》中，作者深入浅出地介绍了如何利用JavaScript在Web开发中创建动态且灵活的Div网格布局。JavaScript，作为Web开发的核心技术之一，被广泛应用于各种场景，如图片库、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值