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

最新推荐文章于 2022-07-10 16:12:15 发布
最新推荐文章于 2022-07-10 16:12:15 发布
阅读量558 收藏
点赞数
分类专栏： 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
关注
专栏目录
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 750
对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 2449
1、操作步骤 先创建⼀个div获取到div元素，然后对其进⾏操作 创建div 和操作按钮 获取div和按钮 给按钮添加点击事件 操作div样式 2、示例 实现⼀个“⿏标移⼊，div背景颜⾊变成红⾊，⿏标移出，背景颜⾊变回⽩⾊”的效果。 第⼀步：我们要知道⿏标移⼊事件和⿏标移出事件 ⿏标移⼊事件 `onmouseover` ⿏标移出事件 `onmouseout` 第⼆步：我们要找到需要改变的div元素 我们通过`id`就可以找到我们要改变的`div` 第三步：我们要对修
JS调用父页面的DIV,Ipunt等等属性（适用于父页面包含子页面）
qssn的博客
04-13 1265
有些时候我们需要从子页面调用父页面的属性，比如input的value等等。如图：一个html文件的body包含另一个html文件。 思路：先在父页面写好获得该属性值的方法，使用window.parent. 调用父页面方法，用return返回属性. //子页面方法 function getCloseModuleWin(){ console.l
JavaScript & CSS 实现div选中
07-12
结合以上内容，我们可以看到，通过JavaScript和CSS，我们可以优雅地实现div的选中效果，提供良好的用户体验和视觉反馈。在实际应用中，还要根据具体需求进行调整，例如添加动画效果、优化性能、处理边界情况等。文件...
基于javascript实现按圆形排列DIV元素(三)
01-21
$(this).css({left:Math.sin((ahd*index+ainhd))*radius+dotLeft,top:Math.cos((ahd*index+ainhd))*radius+dotTop}); 效果图： 分析图： 上图中： 黑色：是外层容器; 黄色：是需要按椭圆运动的图片 ...
JavaScript实现DIV层拖动及动态增加新层的方法
10-24
JavaScript实现DIV层拖动及动态增加新层的方法主要涉及两个方面的内容：一是实现DIV层的拖动功能；二是实现动态增加新层的功能。下面详细解释这两个知识点： 首先，DIV层的拖动功能涉及到鼠标事件的监听和处理。在...
JavaScript动态改变div属性的实现方法
10-23
在这个点击事件的函数中，首先判断当前input元素是否是最后一个元素，如果是，则清空div的样式（使用oDiv.style.cssText=""实现）。如果不是最后一个元素，则根据当前input元素对应的属性索引（保存在this.index变量...
js实现div层缓慢收缩与展开的方法
12-10
在JavaScript中，实现一个div层缓慢收缩与展开的效果通常涉及到DOM操作、事件处理以及定时器的使用。这个实例中，我们看到的是一个简单的JavaScript代码，它通过监听用户的点击事件来改变div元素的高度，从而实现层...
使用js添加div
weixin_30488313的博客
09-01 544
<!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 2426
前端js获取div的选择器方法
js实现倒计时+div下落
bakan66065136006的博客
09-22 346
全部由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 1896
小菜鸟们冲鸭！！ 由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！ 一.问题描述 通过一组单选按钮来控制一组div变化。就比如有三个单选按钮，然后三个div，一个按钮关联一个div，当我点击按钮时对应的div进行变化，然后点另外的一个按钮，它对应的div变化，当前选中的恢复。 二、解决办法 1、首先在一个div里面定义三个小的d...
js调用html打印,js调用浏览器打印指定div内容
weixin_42464317的博客
06-04 293
--打印按钮事件function printForm(){var headstr = ‘‘+‘‘+‘‘+‘table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .ta...
使用JavaScript实现div碰撞效果
"本文介绍如何使用JavaScript实现两个div色块之间的碰撞效果，其中一个色块可拖动，当它与另一个固定色块发生碰撞时，固定色块会随机移动到新的位置并改变颜色。" 在JavaScript中，实现div色块碰撞的效果涉及到事件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值