如何让一个div中的值控制多个div?

一个div为父,另外有多个数量不确定的直接“子”div。父div中触发一个点击事件后,触发的方法会对一个值进行修改,进而对多个子div产生影响,那么能不能只在子div上写父div的id进行关联,就将这几个div连接起来?怎么写啊?

9个回答

失误了!代码如下:

 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
    </head>
    <body>
        <div id="divFather" style="width:100px;height:100px;background-color:red;">
            <div id="divSonfirst"></div>
            <div id="divSontwo"></div>
            <div id="divSonthree"></div>
            <div id="divSonfouth"></div>
            <div id="divSonfive"></div>
        </div>

        <script>
            $("#divFather").click(function(){
                var divFind = $("#divFather").find("div");
                $(divFind).each(function(index,element){
                    var alertstring = '第' + (parseInt(index)+1) + '个div,ID为: ' + $(this).attr('id');
                    alert(alertstring);
                });
            });
        </script>
    </body>
</html>
qq_35436516
JHCan333 谢谢,辛苦你了
大约 3 年之前 回复

不懂描述的什么东西。。不直接在你点击事件中调用影响其他div的事件的处理函数不就行了

你这意思就是给父级添加事件,父级触发,同时子类也会跟着触发对吧。 这个直接在父级触发事件时,获取对应的子元素进行相应的操作不不就可以了么

梳理一下语序和思路 重新描述问题吧

$("#id").change(function(){
$("#id div")......
})

看了三遍,绝对有毛病。记得把冒泡关了。

是你想要的不?












    <script>
        $("#divFather").click(function(){
            var divFind = $("#divFather").find("div");
            $(divFind).each(function(index,element){
                var alertstring = '第' + (parseInt(index)+1) + '个div,ID为: ' + $(this).attr('id');
                alert(alertstring);
            });
        });
    </script>
</body>

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何用JS获取div下的子div
有多个独立的外层div,每个外层div内嵌一个内层的div,内层div在显示在外层div的下部。我要的效果是,当鼠标移入到一个外层div中时,改变这个外层div内的那个内层div。用Js怎么写代码?求大神指导
子div高度如何随外层div的高度变化而变化
我有一个div里面嵌套很多个div,它们的高度都是用外层的百分比定义的。 当我给最外层的div设置高度时,子div的高度怎么样根据外层div的高度重新渲染? 不想用脚本一个div一个div的赋值。想通过脚本只设置一个外层div高度,让子div根据百分比重新渲染。 请教!
.net 一个页面有很多DIV 显示一个DIV则其他DIV隐藏 求大神告诉我下该怎么做
.net 一个页面有很多DIV 显示一个DIV则其他DIV隐藏 我想通过上一个页面传过来的值来判断 求大神告诉我下该怎么做 来人啊。。。
div叠层问题,如何让一个div一直在最高层?
多个div,怎么设定某个div在其最高层,好像用z-index不太可行。要怎么办?
c:foreach循环出多个div如何控制单个div的显示隐藏
``` <c:forEach items="${requestScope.newList}" var="newList"> <!--消息 --> <div class="s-msg-item s-msg-temp i-msg-downup conceal1"> <h6 class="s-msg-bar"><span class="s-name">每日新闻</span></h6> <div class="s-msg-content i-msg-downup-wrap"> <div class="i-msg-downup-con"> <a class="i-markRead" target="_blank" href="/person/mynest/blog?blog=${newList.id}"> <img src="/static/images/${newList.pic}"> <p class="s-main-content"> ${newList.activityTitle} </p> <p class="s-row s-main-content"> <a href="/person/mynest/blog?blog=${newList.id}"> 阅读全文 <i class="am-icon-angle-right"></i> </a> </p> </a> </div> </div> <a class="i-btn-forkout conceal" ref="${newList.id}" href="javascript:;"><i class="am-icon-close am-icon-fw"></i></a> </div> </c:forEach> ``` jQuery代码 ``` $(function () { $(document).ready(function(){ $(".conceal").click(function(){ $(".conceal1").hide(); }); }); }); ``` 修改后: ``` <c:forEach items="${requestScope.newList}" var="newList"> <!--消息 --> <div class="s-msg-item s-msg-temp i-msg-downup conceal1" id="${newList.id}" onclick=hide(this)> <h6 class="s-msg-bar"><span class="s-name">每日新鲜事</span></h6> <div class="s-msg-content i-msg-downup-wrap"> <div class="i-msg-downup-con"> <a class="i-markRead" target="_blank" href="/person/mynest/blog?blog=${newList.id}"> <img src="/static/images/${newList.pic}"> <p class="s-main-content"> ${newList.activityTitle} </p> <p class="s-row s-main-content"> <a href="/person/mynest/blog?blog=${newList.id}"> 阅读全文 <i class="am-icon-angle-right"></i> </a> </p> </a> </div> </div> <a class="i-btn-forkout conceal" ref="${newList.id}" href="javascript:;"><i class="am-icon-close am-icon-fw"></i></a> </div> </c:forEach> ``` JS ``` function hide(obj){ $(obj).toggle(); } ``` >
如何用js点击相同类名的多个div,各个div之间的操作互不影响?
如何用js点击相同类名的多个div,比如制作一个相片展示,点击div之后显示我隐藏的div将页面覆盖,隐藏的div对其进行操作,关闭后,再点击其他div,之间的操作互不影响?
求教:怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏?
怎么样给16个div设置data-index=""使 控制另一个div中16张图片显示隐藏? 代码: <div data-v-4a1fb872="" data-v-311834f5="" class="wrapper"> <div data-v-4a1fb872="" class="bg-left" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/index2bg.2dead38.png)"> </div> <div data-v-4a1fb872="" class="part"> <div data-v-4a1fb872="" class="phone" style="background-image:url(小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/phone.1a1ffa5.png)"> <div data-v-4a1fb872="" class="phone-img"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-1.514b9e5.png" alt=""> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-2.fe2440c.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/1-3.61fa415.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-1.77e24af.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-2.03c77b0.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/2-3.68454c5.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-1.378751a.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-2.5415338.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/3-3.3522ddc.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-1.80e2eb2.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-2.67cb670.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-3.dc4d534.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/4-4.2cbe036.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-1.11fab89.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-2.2b657e7.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-3.f4f1d4b.png" alt="" style="display: none;"> <img data-v-4a1fb872="" src="./小官网-极简单·超强大-微信小程序_微信小程序开发_微信小程序制作平台_小程序站_files/5-4.4752a09.png" alt="" style="display: none;"> </div> </div> <div data-v-4a1fb872="" class="number"> 02 </div> <div data-v-4a1fb872="" class="con"> <div data-v-4a1fb872="" class="title"> 为销售赋能的小名片 </div> <div data-v-4a1fb872="" class="mark"> 产品展示 </div> <ul data-v-4a1fb872="" class="list"> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon1"> </div> <div data-v-4a1fb872="" class="name"> 小名片展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 统一公司形象,全员分享,小名片直达企业官网,产品、服务的展现 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="0" class="link-item"> 名片信息 </div> <div data-v-4a1fb872="" data-index="1" class="link-item"> 个人信息 </div> <div data-v-4a1fb872="" data-index="2" class="link-item"> 更多信息 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon2"> </div> <div data-v-4a1fb872="" class="name"> 绑定小官网 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 企业官网、产品、服务的完整展现 </p> <p data-v-4a1fb872=""> 帮助访客第一时间了解企业,更快促成业务交流 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="3" class="link-item"> 查看名片 </div> <div data-v-4a1fb872="" data-index="4" class="link-item"> 查看企业小官网 </div> <div data-v-4a1fb872="" data-index="5" class="link-item"> 小官网多样式介绍 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon3"> </div> <div data-v-4a1fb872="" class="name"> 销售雷达展示 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 访问消息实时推送,名片访客即客户,不加好友就可微信沟通不错过每个商机;探测访客访问动态,让销售沟通更高效 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="6" class="link-item"> 实时推送访客消息 </div> <div data-v-4a1fb872="" data-index="7" class="link-item"> 不加微信好友沟通 </div> <div data-v-4a1fb872="" data-index="8" class="link-item"> 即时聊天 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon4"> </div> <div data-v-4a1fb872="" class="name"> 智能AI分析 </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 分析客户兴趣与活跃度,挖掘深度用户 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="9" class="link-item"> 访客数据分析 </div> <div data-v-4a1fb872="" data-index="10" class="link-item"> 访客互动情况 </div> <div data-v-4a1fb872="" data-index="11" class="link-item"> 销售人员能力分析 </div> <div data-v-4a1fb872="" data-index="12" class="link-item"> 销售详情分析 </div> </div> </div> </li> <li data-v-4a1fb872="" class="item"> <div data-v-4a1fb872="" class="icon icon5"> </div> <div data-v-4a1fb872="" class="name"> 商机SCRM </div> <div data-v-4a1fb872="" class="info"> <div data-v-4a1fb872="" class="text"> <p data-v-4a1fb872=""> 助销售进行客户标签化管理,客户跟进记录管理,客户AI分析 </p> </div> <div data-v-4a1fb872="" class="link"> <div data-v-4a1fb872="" data-index="13" class="link-item"> 商机标签化管理 </div> <div data-v-4a1fb872="" data-index="14" class="link-item"> 销售跟进记录 </div> <div data-v-4a1fb872="" data-index="15" class="link-item"> 客户访问轨迹 </div> <div data-v-4a1fb872="" data-index="16" class="link-item"> 客户兴趣分析 </div> </div> </div> </li> </ul> </div> </div> </div> ``` ``` 刚毕业的实习生,在网上扒的网站,但是js没有用,我也没学过js;求教怎么解决? css代码太多了,我也不知道拿那一部分所以就不放了, 这个网站就是我复制的网站 www.xcxzhan.com 里面可以拿到css,js 可以拿下来,但是不知道为什么没有用。 求大佬教学!!!跪谢!!!
如何把多个div放入一个table中
得到数据库纪录,并以一个纪录对应一个div这样显示,现在的问题是我如何把这些div在一个table中显示呢? [b]问题补充:[/b] 我这个是div是根据数据库的纪录循环出来的。也就是说我都多少条数据就有多少个div。现在的问题是我如何把这些div动态的在table中显示。 for(var i=0; i<itemNodes.length; i++){ var id=itemNodes[i].getElementsByTagName("id"); var subject=itemNodes[i].getElementsByTagName("subject"); var startDate=itemNodes[i].getElementsByTagName("startDate"); var dueDate=itemNodes[i].getElementsByTagName("dueDate"); var status=itemNodes[i].getElementsByTagName("status"); var progress=itemNodes[i].getElementsByTagName("progress"); var type=itemNodes[i].getElementsByTagName("type"); var taskType=itemNodes[i].getElementsByTagName("taskType"); var project=itemNodes[i].getElementsByTagName("project"); var task=itemNodes[i].getElementsByTagName("task"); var memo=itemNodes[i].getElementsByTagName("memo"); if(id.length> 0 && subject.length> 0 && startDate.length> 0 && dueDate.length>0 && status.length> 0 && progress.length>0 && type.length>0 && taskType.length>0 && project.length>0 && task.length>0 && memo.length>0){ var id1=id[0].firstChild.nodeValue; var subject1=subject[0].firstChild.nodeValue; var startDate1=startDate[0].firstChild.nodeValue; var dueDate1=dueDate[0].firstChild.nodeValue; var status1=status[0].firstChild.nodeValue; var progress1=progress[0].firstChild.nodeValue; var type1=type[0].firstChild.nodeValue; var taskType1=taskType[0].firstChild.nodeValue; var project1=project[0].firstChild.nodeValue; var task1=task[0].firstChild.nodeValue; var memo1=memo[0].firstChild.nodeValue; //div的值 ListDivValue=subject1; //时间计算 var start=(startDate1).split(" "); var start1=start[0].split("-"); var start2=start[1].split(":"); var formDate=new Date(start1[0],start1[1],start1[2],start2[0],start2[1],start2[2]); //alert(formDate); var end=(dueDate1).split(" "); var end1=end[0].split("-"); var end2=end[1].split(":"); var thruDate=new Date(end1[0],end1[1],end1[2],end2[0],end2[1],end2[2]); //alert(thruDate); var middleDate=(((thruDate-formDate)/1000)/60)/30; // alert(middleDate); //listDiv的高度 var tdHeight=(document.getElementById('stable').offsetHeight)/(document.getElementById('stable').rows.length); divHeight=tdHeight*middleDate;//div的高度 // alert(divHeight); //获取服务器的时间 //这里是定位div放入表格的地方 var topDate=(document.getElementById('stable').rows[0].cells[0].innerText).split(":");//定点的时间。00:00 var date3=new Date(0,0,0,topDate[0],topDate[1],0); var date2=new Date(0,0,0,start2[0],start2[1],0); //alert(date2); //alert(date3); var middleH=(((date2-date3)/1000)/60)/30;//这里计算有多少个办小时 listDivTop=tdHeight*middleH;//div的高度 alert(listDivTop); showListDiv(); function showListDiv(){ document.getElementById('listDiv').style.height=divHeight; document.getElementById('listDiv').style.width='750px'; document.getElementById('listDiv').style.background='#94A2BE'; document.getElementById('listDiv').style.position='absolute'; document.getElementById('listDiv').style.top=listDivTop; document.getElementById('listDiv').style.left='68px'; document.getElementById('listDiv').innerText=ListDivValue; //document.getElementById('listDiv').innerText="<div id='tab'>dd</div><div id='zhansan'><div>"; } <table id="stable" class="divTable" style="width:800;" onclick="showCreateDiv()"> <div id="listDiv"></div> <tr> <th rowspan="2">00:00</th> <td></td> </tr> <tr> <td></td> </tr> <tr> <th rowspan="2">01:00</th> <td></td> </tr> <tr> <td></td> </tr> </table> 这些div的top和height是根据这个表的宽,高算出来的。 [b]问题补充:[/b] 我要做成google日历查不多的效果。所以div必须是要放到table中的。上面的代码就是获取数据库中的纪录。并调用用于显示div的那个方法。每一条纪录就调用一个div。现在我的问题就是在table显示上。但是现在我运行结果只能每次显示一个div。我要的效果是把所有的div都显示在table上。
html onmouseover如何对多个div层中的图片自动播放
问题是这样的:我有多个div层,每个div层有若干张图片,我想实现图片自动播放,但是用了setInterval()和onmouseover(),onmouseout()等函数,却发现: 1每次鼠标要先移动到图片上,再离开图片,图片才会自动播放,而不是我一进入网页就自动播放每个div层的图片 2每次最多有一个div层中的图片会自动播放图片,其余的不会自动播放图片。 下面是我的代码 <script type="text/javascript"> var picTimer; function play_pic(object) { var curIndex = 0; var timeInterval = 1000; var arr = new Array(); arr[0] = "1.jpg"; arr[1] = "2.jpg"; arr[2] = "3.jpg"; arr[3] = "4.jpg"; arr[4] = "5.jpg"; picTimer = setInterval(function() { var obj = object; if(curIndex == arr.length - 1) { curIndex = 0; } else { curIndex += 1; } obj.src = arr[curIndex]; } , timeInterval); } function stop_pic(object) { clearInterval(picTimer); } </script> </head> <body> <div id="div_1"> <img id="obj" src="1.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" /> </div> <div id="div_2"> <img id="obj2" src="2.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" /> </div> <div id="div_3"> <img id="obj3" src="3.jpg" onmouseout="play_pic(this)" onmouseover="stop_pic(this)" /> </div> </body> </html> 哪位朋友能够指导一下,十分感谢。
如何使得很多个包含图片的div排列整齐?
向大家请教一个问题。 我使用php输出很多个包含图片的div,代码如下。我用的是css中的float:right来控制,但是这些div排列不整齐。请问大家,该怎么控制这些div才能使得图片排列整齐呢? echo '<div style="float:right;" ><img name="" src="'.$row['thumbnail'].'" /><p>我是可爱的标题</p></div>'. " "; ![CSDN移动问答][1] [1]: http://img.bbs.csdn.net/upload/201311/28/1385652956_897363.jpg
用JQuery实现在div1后追加多个有内容的div2,并实现div2里面的元素的id自增
问题如题,例如在div1后面追加多个有内容的div2,然后让追加的div2的id改变为div3,并且div2的标签<h1>的id也变为h1_3,<h2>标签的id变为h2_3 不知道有没有说清楚内容,请大神指点。 <div id="div1"> <h1 id="h1_1">你好!</h1> </div> <div id="div2"> <h1 id="h1_2">你好啊!</h1> <h2 id="h2_2">你很好啊!</h2> </div>
怎样让随机生成的几个图形不能有交集,重叠也不行。图形可以看成是div。多个div不能有重叠且交集
怎样让随机生成的几个图形不能有交集,重叠也不行。图形可以看成是div。多个div不能有重叠且交集
jquery用div+span做的多选框,怎么获得选中的多个span的值?
![图片说明](https://img-ask.csdn.net/upload/201712/09/1512798900_816379.png) 上图是前端页面. 前端代码如下: <div class="dia_menu_lst check_box" data-att="dia_color" id="colordiv"> <span data="D" name="diacolor"><i>D色</i></span> <span data="E" name="diacolor"><i >E色</i></span> <span data="F" name="diacolor"><i>F色</i></span> <span data="G" name="diacolor"><i>G色</i></span> <span data="H" name="diacolor"><i>H色</i></span> <span data="I" name="diacolor"><i>I色</i></span> </div> 我写的取值代码如下: $(".dia_menu_lst span").click(function (e) { $(this).siblings().each(function(){ $(this).removeClass("selected"); //去除同一个div下span兄弟节点的选中状态 }); $(this).toggleClass("selected"); // 点击某个span时添加或移除选中状态 weight =$('#weigdiv .selected').attr('data'); //选择含有选中状态selected的元素(有选中状态状态的span) neatness =$('#neatdiv .selected').attr('data'); var color =$('#colordiv .selected').attr('data'); alert(ctgId +" "+weight+" "+neatness+" "+color); }); 问题:因为每次点击的时候会去除兄弟的选中状态,所以实现不了多选.neatness和weight需要单选,color需要多选.求教各位大神怎么取得多选的color的值,我每次都只能取到一个.
如何在一个div里面将从数据库内提取到的多条信息按顺序循环显示
如何在一个div里面将从数据库内提取到的多条信息按顺序循环显示
多个DIV在同一个位置相互影响?
我在同一个位置放了四个div,根据不同条件决定显示哪一个,里面的格式也是不一样的 ,但是现在前三个都是显示最后一个div的格式,都被最后一个影响了。这怎么解决? 求帮忙,谢谢!
DIV内的按钮修改DIV宽度或者DIV怎样左右收缩
代码如下: <div id="info" class="easyui-dialog" style="width:400px;height:300px;" closed="true" title="松陵"> <div style="height:20px;width:100%;background:#efefef;background-image:url('images/nav_linebg.jpg');"> <button type="button" style="height:20px;margin-left:210px" onclick="resizeDialog()">走势图</button> <button type="button" style="height:20px;">关闭</button> </div> <div id="column-div" style="float: left;width: 320px; height: 240px;border:1px solid blue;position:absolute;"></div> <div id="line-div" style="float: right;width: 430px; height: 240px;border:1px solid blue;position:absolute;left:350px;display:none"></div> </div> 如上:info 这DIV下面有两个主要的子DIV,column-div(默认显示)和line-div(默认关闭),还有两个button(控制line-div的显示和隐藏),现在希望info的宽度随着line-div的显示和隐藏而改变。显示则宽度变成800,关闭则还原。求大神给出代码指点,尝试很多次,没有效果,谢谢!
多个div浮窗的只有一个能移动的问题
同一个页面 显示多个div浮窗(多个浮窗的内容并不一样,也在不同的div中 演示代码里是只举例了一种) 只有一个能移动 请问那个是判断我现在移动的是哪个浮窗 ,怎么才能分别移动 不冲突呢? 如果我描述的不够清楚 我还可以补充说明。 演示代码如下: ``` <html> <head> <title>Js弹出浮动窗口,支持鼠标拖动和关闭</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> /** 关于一些参数说明: *bodycontent:要在窗口显示的内容,dom对象 *title:窗口标题,字符串类型 *removeable:窗口能否拖动,布尔类型 *注意:内容窗体的高度是height-30px,请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909",所以你的页面不要再取值为"223238909"的id了,以防js执行出错*/ function createdialog(width,height,bodycontent,title,removeable){ if(document.getElementById("www_jb51_net")==null){ /*创建窗口的组成元素*/ var dialog = document.createElement("div"); var dialogtitlebar= document.createElement("div"); var dialogbody = document.createElement("div"); var dialogtitleimg = document.createElement("span"); var dialogtitle = document.createElement("span"); var dialogclose = document.createElement("span"); var closeaction = document.createElement("button"); /*为窗口设置一个id,id如此怪异是为了尽量避免与其他用户取的id相同而出错*/ dialog.id = "223238909"; /*组装对话框标题栏,按从里到外的顺序组装*/ dialogtitle.innerHTML = title; dialogtitlebar.appendChild(dialogtitleimg); dialogtitlebar.appendChild(dialogtitle); dialogtitlebar.appendChild(dialogclose); dialogclose.appendChild(closeaction); /*组装对话框主体内容*/ if(bodycontent!=null){ bodycontent.style.display = "block"; dialogbody.appendChild(bodycontent); } /*组装成完整的对话框*/ dialog.appendChild(dialogtitlebar); dialog.appendChild(dialogbody); /*设置窗口组成元素的样式*/ var templeft,temptop,tempheight//窗口的位置(将窗口放在页面中间的辅助变量) var dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的样式字符串 templeft = (document.body.clientWidth-width)/2; temptop = (document.body.clientHeight-height)/2; tempheight= height-30; dialogcssText= "position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;"; dialogbodycssText = "width:100%;background:#ffffff;"+"height:" + tempheight + "px;"; dialog.style.cssText = dialogcssText; dialogtitlebar.style.cssText = "height:30px;width:100%;background:url(images/titlebar.png) repeat;cursor:move;"; dialogbody.style.cssText = dialogbodycssText; dialogtitleimg.style.cssText = "float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;"; dialogtitle.style.cssText = "font-size:16px;float:left;display:block;margin:4px;line-height:20px;"; dialogclose.style.cssText = "float:right;display:block;margin:4px;line-height:20px;"; closeaction.style.cssText = "height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;"; /*为窗口元素注册事件*/ var dialogleft = parseInt(dialog.style.left); var dialogtop = parseInt(dialog.style.top); var ismousedown = false;//标志鼠标是否按下 /*关闭按钮的事件*/ closeaction.onclick = function(){ dialog.parentNode.removeChild(dialog); } /*实现窗口的移动,这段代码很典型,网上很多类似的代码*/ if(removeable == true){ var ismousedown = false; var dialogleft,dialogtop; var downX,downY; dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); dialogtitlebar.onmousedown = function(e){ ismousedown = true; downX = e.clientX; downY = e.clientY; } document.onmousemove = function(e){ if(ismousedown){ dialog.style.top = e.clientY - downY + dialogtop + "px"; dialog.style.left = e.clientX - downX + dialogleft + "px"; } } /*松开鼠标时要重新计算当前窗口的位置*/ document.onmouseup = function(){ dialogleft = parseInt(dialog.style.left); dialogtop = parseInt(dialog.style.top); ismousedown = false; } } return dialog; }//end if(if的结束) } </script> <style> table{background:#b2d235;} button{font-size:12px;height:23;background:#ece9d8;border-width:1;} #linkurl,#linkname,#savelink{width:100px;} </style> </head> <body> <!-- 显示窗口的地方 --> <div id="here"></div><a id="clickhere" href="#">点击生成窗口</a> <!-- 要嵌入到窗口的内容 --> <div id="login" style="display:none;"> <form action="#" method="post" onSubmit="return false;"> <table width="400" height="95"> <tr> <td width="78">链接文字</td> <td width="168"><input name="link.name" type="text" value="浮窗测试"/></td> <td width="138" id="linktext"></td> </tr> <tr> <td>链接地址</td> <td><input name="link.url" type="text" value="f"/></td> <td id="linkurl"></td> </tr> <tr> <td></td> <td><button type="submit" style="float:right;">添加</button></td> <td id="savelink"></td> </tr> </table> </form> </div> <script type="text/javascript"> var here = document.getElementById("here"); var login = document.getElementById("login"); var clickhere = document.getElementById("clickhere"); clickhere.onclick = function(){ here.appendChild(createdialog(400,95+30,login,"中国外汇交易中心",true)); } </script> </body> </html> ```
通过querySelector获取并修改div中class的值
这个程序就是在页面中显示要播放的多媒体文件,同时显示多媒体文件的总时间,当单击播放按钮时,将显示当前播放了的时间。但是缺了一部分代码,有关通过querySelector获取并修改div中class的值的代码。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <title>媒体播放示例</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="布尔教育 http://www.itbool.com" /> <script> wrapper=document.querySelector('.videochrome'), buffer=document.querySelector('.videochrome.controls.buffer'), playhead=buffer.querySelector('.playhead'), play=wrapper.querySelector('.play'), duration=wrapper.querySelector('.duration'), currentTime=playhead.querySelector('span'); video.addEventListener('loadeddata',canplay,false);//使用事件监听准备播放 function canplay()//调用canplay函数初始化媒体 { initControls(); } function initControls() { duration.innerHTML=asTime(video.duration);//将播放时间以分秒的形式显示 play.onclick=function() { if(video.ended)//如果媒体播放结束,播放时间从0开始 { video.currentTime=0; } video[video.paused?'play':'pause']();//通过三元运算执行播放或暂停 }; } function asTime(t) { t=Math.round(t);//通过Math.round函数对获取到的时间取整 var s=t%60;//转化为分 var m=~(t/60); return m+':'+two(s);//以分:秒的形式输出时间 } function two(s) { s+=""; if (s.length<2)s="0"+s;//对秒数的位数进行判断,位数小于2时以0补位 return s; } video.addEventListener('play',playEvent,false);//使用事件播放 video.addEventListener('pause',pausedEvent,false);//播放暂停 video.addEventListener('ended',function()//播放结束后停止播放 { this.pause();//显示暂停播放 },false); function playEvent() { play.innerHTML='暂停'; } function pausedEvent() { play.innerHTML='播放'; } video.addEventListener('durationchange',updataSeekable,false);//播放的时长被改变 video.addEventListener('timeupdate',updatePlayhead,false);//使用事件监听方式捕捉事件 function updateSeekable() { duration.innerHTML=asTime(video.duration);//媒体文件的总播放时间 } function updatePlayhead() { currentTime.innerHTML=asTime(video.currentTime);//媒体的当前播放时间 } </script> </head> <body> <video src="../video/01.mp4"></video> <div class="videochrome paused"> <div class="controls"> <div class="scrub"> <table width="150" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="50" scope="row"> <button class="play" title="play">播放</button> </td> <td width="50" align="center"> <div class="duration">0:00</div> </td> <td width="50" align="center"> <div class="loaded"> <div class="buffer"> <div class="playhead"> <span>0:00</span> </div> </div> </div> </td> </tr> </table> </div> </div> </div> </body> </html>
c# 如何排列、统计网页中的DIV
大神们,请问下假如一个网页有很多差不多一样的DIV,比较淘宝之类的的宝贝查询结果的页面,里面有很多相同的DIV,那么怎么统计这些DIV的数量呢?
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方,主要介绍的是思路。
Linux(服务器编程):15---两种高效的事件处理模式(reactor模式、proactor模式)
前言 同步I/O模型通常用于实现Reactor模式 异步I/O模型则用于实现Proactor模式 最后我们会使用同步I/O方式模拟出Proactor模式 一、Reactor模式 Reactor模式特点 它要求主线程(I/O处理单元)只负责监听文件描述符上是否有事件发生,有的话就立即将时间通知工作线程(逻辑单元)。除此之外,主线程不做任何其他实质性的工作 读写数据,接受新的连接,以及处...
为什么要学数据结构?
一、前言 在可视化化程序设计的今天,借助于集成开发环境可以很快地生成程序,程序设计不再是计算机专业人员的专利。很多人认为,只要掌握几种开发工具就可以成为编程高手,其实,这是一种误解。要想成为一个专业的开发人员,至少需要以下三个条件: 1) 能够熟练地选择和设计各种数据结构和算法 2) 至少要能够熟练地掌握一门程序设计语言 3) 熟知所涉及的相关应用领域的知识 其中,后两个条件比较容易实现,而第一个...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n
进程通信方式总结与盘点
​ 进程通信是指进程之间的信息交换。这里需要和进程同步做一下区分,进程同步控制多个进程按一定顺序执行,进程通信是一种手段,而进程同步是目标。从某方面来讲,进程通信可以解决进程同步问题。 ​ 首先回顾下我们前面博文中讲到的信号量机制,为了实现进程的互斥与同步,需要在进程间交换一定的信息,因此信号量机制也可以被归为进程通信的一种方式,但是也被称为低级进程通信,主要原因为: 效率低:一次只可操作少量的...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观
听说了吗?阿里双11作战室竟1根网线都没有
双11不光是购物狂欢节,更是对技术的一次“大考”,对于阿里巴巴企业内部运营的基础保障技术而言,亦是如此。 回溯双11历史,这背后也经历过“小米加步枪”的阶段:作战室从随处是网线,交换机放地上的“一地狼藉”;到如今媲美5G的wifi网速,到现场却看不到一根网线;从当年使用商用AP(无线路由器),让光明顶双11当天断网一分钟,到全部使用阿里自研AP……阿里巴巴企业智能事业部工程师们提供的基础保障...
在阿里,40岁的奋斗姿势
在阿里,40岁的奋斗姿势 在阿里,什么样的年纪可以称为老呢?35岁? 在云网络,有这样一群人,他们的平均年龄接近40,却刚刚开辟职业生涯的第二战场。 他们的奋斗姿势是什么样的呢? 洛神赋 “翩若惊鸿,婉若游龙。荣曜秋菊,华茂春松。髣髴兮若轻云之蔽月,飘飖兮若流风之回雪。远而望之,皎若太阳升朝霞;迫而察之,灼若芙蕖出渌波。” 爱洛神,爱阿里云 2018年,阿里云网络产品部门启动洛神2.0升...
关于研发效能提升的思考
研发效能提升是最近比较热门的一个话题,本人根据这几年的工作心得,做了一些思考总结,由于个人深度有限,暂且抛转引入。 三要素 任何生产力的提升都离不开这三个因素:人、流程和工具,少了其中任何一个因素都无法实现。 人,即思想,也就是古人说的“道”,道不同不相为谋,是制高点,也是高层建筑的基石。 流程,即方法,也是古人说的“法”。研发效能的提升,也就是要提高投入产出比,既要增加产出,也要减...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip install selenium -i https://pypi.tuna.tsinghua.edu.cn/simple/ 
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
Java工作4年来应聘要16K最后没要,细节如下。。。
前奏: 今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。 以下就是他的简历和面试情况。 基本情况: 专业技能: 1、&nbsp;熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务 2、&nbsp;熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins 3、&nbsp;熟悉Nginx、tomca
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆  每天早上8:30推送 作者| Mr.K   编辑| Emma 来源| 技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯
程序员该看的几部电影
##1、骇客帝国(1999) 概念:在线/离线,递归,循环,矩阵等 剧情简介: 不久的将来,网络黑客尼奥对这个看似正常的现实世界产生了怀疑。 他结识了黑客崔妮蒂,并见到了黑客组织的首领墨菲斯。 墨菲斯告诉他,现实世界其实是由一个名叫“母体”的计算机人工智能系统控制,人们就像他们饲养的动物,没有自由和思想,而尼奥就是能够拯救人类的救世主。 可是,救赎之路从来都不会一帆风顺,到底哪里才是真实的世界?
入职阿里5年,他如何破解“技术债”?
简介: 作者 | 都铎 作为一名技术人,你常常会听到这样的话: “先快速上线” “没时间改” “再缓一缓吧” “以后再解决” “先用临时方案处理” …… 当你埋下的坑越来越多,不知道哪天哪位同学就会踩上一颗雷。特别赞同“人最大的恐惧就是未知,当技术债可说不可见的时候,才是最让人不想解决的时候。” 作为一个程序员,我们反对复制粘贴,但是我们经常会见到相似的代码,相同的二方包,甚至整个代码...
Python绘图,圣诞树,花,爱心 | Turtle篇
每周每日,分享Python实战代码,入门资料,进阶资料,基础语法,爬虫,数据分析,web网站,机器学习,深度学习等等。 公众号回复【进群】沟通交流吧,QQ扫码进群学习吧 微信群 QQ群 1.画圣诞树 import turtle screen = turtle.Screen() screen.setup(800,600) circle = turtle.Turtle()...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东
破14亿,Python分析我国存在哪些人口危机!
2020年1月17日,国家统计局发布了2019年国民经济报告,报告中指出我国人口突破14亿。 猪哥的朋友圈被14亿人口刷屏,但是很多人并没有看到我国复杂的人口问题:老龄化、男女比例失衡、生育率下降、人口红利下降等。 今天我们就来分析一下我们国家的人口数据吧! 一、背景 1.人口突破14亿 2020年1月17日,国家统计局发布了 2019年国民经济报告 ,报告中指出:年末中国大陆总人口(包括31个
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ......
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!
2020年的1月,我辞掉了我的第一份工作
其实,这篇文章,我应该早点写的,毕竟现在已经2月份了。不过一些其它原因,或者是我的惰性、还有一些迷茫的念头,让自己迟迟没有试着写一点东西,记录下,或者说是总结下自己前3年的工作上的经历、学习的过程。 我自己知道的,在写自己的博客方面,我的文笔很一般,非技术类的文章不想去写;另外我又是一个还比较热衷于技术的人,而平常复杂一点的东西,如果想写文章写的清楚点,是需要足够...
别低估自己的直觉,也别高估自己的智商
所有群全部吵翻天,朋友圈全部沦陷,公众号疯狂转发。这两周没怎么发原创,只发新闻,可能有人注意到了。我不是懒,是文章写了却没发,因为大家的关注力始终在这次的疫情上面,发了也没人看。当然,我...
Java坑人面试题系列: 包装类(中级难度)
Java Magazine上面有一个专门坑人的面试题系列: https://blogs.oracle.com/javamagazine/quiz-2。 这些问题的设计宗旨,主要是测试面试者对Java语言的了解程度,而不是为了用弯弯绕绕的手段把面试者搞蒙。 如果你看过往期的问题,就会发现每一个都不简单。 这些试题模拟了认证考试中的一些难题。 而 “中级(intermediate)” 和 “高级(ad
深度学习入门笔记(十八):卷积神经网络(一)
欢迎关注WX公众号:【程序员管小亮】 专栏——深度学习入门笔记 声明 1)该文章整理自网上的大牛和机器学习专家无私奉献的资料,具体引用的资料请看参考文献。 2)本文仅供学术交流,非商用。所以每一部分具体的参考资料并没有详细对应。如果某部分不小心侵犯了大家的利益,还望海涵,并联系博主删除。 3)博主才疏学浅,文中如有不当之处,请各位指出,共同进步,谢谢。 4)此属于第一版本,若有错误,还需继续修正与...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
节后首个工作日,企业们集体开晨会让钉钉挂了
By 超神经场景描述:昨天 2 月 3 日,是大部分城市号召远程工作的第一天,全国有接近 2 亿人在家开始远程办公,钉钉上也有超过 1000 万家企业活跃起来。关键词:十一出行 人脸...
Java基础知识点梳理
Java基础知识点梳理 摘要: 虽然已经在实际工作中经常与java打交道,但是一直没系统地对java这门语言进行梳理和总结,掌握的知识也比较零散。恰好利用这段时间重新认识下java,并对一些常见的语法和知识点做个总结与回顾,一方面为了加深印象,方便后面查阅,一方面为了学好java打下基础。 Java简介 java语言于1995年正式推出,最开始被命名为Oak语言,由James Gosling(詹姆
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合
你也能看懂的:蒙特卡罗方法
蒙特卡罗方法,也称统计模拟方法,是1940年代中期由于科学技术的发展和电子计算机的发明,而提出的一种以概率统计理论为指导的数值计算方法。是指使用随机数(或更常见的伪随机数)来解决很多计算问题的方法 蒙特卡罗方法可以粗略地分成两类:一类是所求解的问题本身具有内在的随机性,借助计算机的运算能力可以直接模拟这种随机的过程。另一种类型是所求解问题可以转化为某种随机分布的特征数,比如随机事件出现的概率,或...
相关热词 c#如何定义数组列表 c#倒序读取txt文件 java代码生成c# c# tcp发送数据 c#解决时间格式带星期 c#类似hashmap c#设置istbox的值 c#获取多线程返回值 c# 包含数字 枚举 c# timespan
立即提问