如何用JS实现:鼠标点击一个DIV里的a标签时,在另外一个DIV显示出该a标签的内容

刚开始学JS,然后网站中需要一个效果,就是点击左边DIV里的超链接,然后把这个超链接的内容(也就是之间的内容)显示在另一个DIV里面,求助前辈~~为什么我写的出不来呢?

 <!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" />
<title>无标题文档</title>
<style>
#div0{
    width:700px;
    height:500px;
    border:3px #000000 solid;}
#div1{
    width:300px;
    height:200px;
    float:left;
    background-color:#CCCCCC;}
#div2{
    width:300px;
    height:200px;
    float:right;
    background-color:#F00;}

</style>
<script type="text/javascript">
    window.onload=function(){
        var oto1=document.getElementById('div1');
        var oto2=oto1.getElementsByTagName('li');
        var oto3=document.getElementById('div2');
        for(var i=0;i<oto2.length;i++){
            oto2.onclick=function(){
                                oto3.innerHTML=this.innerHTML;
                                }
            }
        }
</script>
</head>

<body>
<div id="div0">
<div id="div1">
 <ul>
  <li><a href="#">oh my</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
 </ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>

前辈看看是不是我哪里出错了

6个回答

改成这样,
1.想用id选择下面的节点,应该用child ,或者直接选择那个标签
2.循环绑定对象时,那是一个数组,所以用[]引用,

  window.onload=function(){
        var oto2=document.getElementsByTagName('li');
        var oto3=document.getElementById('div2');
        for(var i=0;i<oto2.length;i++){
            oto2[i].onclick=function(){
                                oto3.innerHTML=this.innerHTML;
                                }
            }
        }
     oto2.onclick=function(){

==> oto2[i].onclick=function(){

var oto2=oto1.getElementsByTagName('li'); 返回的是类数组对象, 循环里面少了索引 oto2[i];

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



无标题文档 #div0{ width:700px; height:500px; border:3px #000000 solid;} #div1{ width:300px; height:200px; float:left; background-color:#CCCCCC;} #div2{ width:300px; height:200px; float:right; background-color:#F00;} ul,li{ list-style: none; } ul li a{ display: block; background:red; border: 1px solid teal; } window.onload=function(){ var oto1=document.getElementById('div1'); var oto2=oto1.getElementsByTagName('li'); var oto3=document.getElementById('div2'); var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(e){ //事件委托 var text = e.target.text; //把值赋给div2的innerHTML; oto3.innerHTML = text; // 如果想让值内容累加,执行此代码,把上一行的代码注释掉 // oto3.innerHTML += text + "</br>"; } }




 <!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" />
<title>无标题文档</title>
<style>
#div0{
   width:700px;
   height:500px;
   border:3px #000000 solid;}
#div1{
   width:300px;
   height:200px;
   float:left;
   background-color:#CCCCCC;}
#div2{
   width:300px;
   height:200px;
   float:right;
   background-color:#F00;}
   ul,li{
     list-style: none;
   }
   ul li a{
     display: block;
     background:red;
     border: 1px solid teal;
   }

</style>
<script type="text/javascript">
   window.onload=function(){
       var oto1=document.getElementById('div1');
       var oto2=oto1.getElementsByTagName('li');
       var oto3=document.getElementById('div2');
       var ul  = document.getElementsByTagName('ul')[0];

    ul.onclick = function(e){
      //事件委托
    var text = e.target.text;
      //把值赋给div2的innerHTML;
    oto3.innerHTML = text;

    //  如果想让值内容累加,执行此代码,把上一行的代码注释掉
  //  oto3.innerHTML += text + "</br>";
    }

}

</script>
</head>

<body>
<div id="div0">
<div id="div1">
<ul>
 <li><a href="javascript:void(0)">oh my</a></li>
 <li><a href="javascript:void(0)">2</a></li>
 <li><a href="javascript:void(0)">3</a></li>
 <li><a href="javascript:void(0)">4</a></li>
 <li><a href="javascript:void(0)">5</a></li>
</ul>
</div>
<div id="div2"></div>
</div>
</body>
</html>

weixin_44898051
呼哒呼哒! 获取的信息能不能不在同一个页面显示,让他在另外一个页面显示
10 个月之前 回复

我觉得刚开始学一门技术的时候,最应该 选择一本好书来看,边看边练习,因为书本比较系统。如果学习js框架的话,推荐jquery 权威指南

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
最近在研究一个关于js+div"鼠标悬停在li时显示删除按钮"
最近在研究一个关于js+div"鼠标悬停在li时显示删除按钮";但是效果不理想。请想一下高手们,以下是代码: ![图片说明](https://img-ask.csdn.net/upload/201701/16/1484496353_248513.png) 以上是可行的,但是如果改为下面就不行了: ![图片说明](https://img-ask.csdn.net/upload/201701/16/1484496290_946578.png) 改成“img”就不起作用了。span和img不都是标签?为何用span可以;img就不行? 或者直接改为自定义样式,不知道如何改?
js设置div可以拖动之后 div里面的input无法输入
本问题的解决方法:根据鼠标点击的标签名判断是否可以拖动。谢谢各位!另外还找到一种不太好的方法,就是给input加上一个默认的焦点,即使用$(input).focus(),有用但,不够灵活。 ``` document.getElementById("log_window").onmousedown = function (e) { var obj = document.elementFromPoint(event.clientX, event.clientY); if (obj.tagName.toLowerCase() === 'input' || obj.tagName.toLowerCase() === 'textarea') { return false; } getObject(this, e || event); }; ``` 大概代码如下: ``` <style type="text/css"> #div_add { HEIGHT: 796px; WIDTH: 1420px; background-color:#000; position:absolute; top:0; left:0; z-index:2; opacity:0.1; filter: alpha(opacity=10); display:none; } #log_window { BORDER-LEFT-WIDTH: 1px; CURSOR: default; FONT-SIZE: 9pt; HEIGHT: 200px; BORDER-RIGHT-WIDTH: 1px; WIDTH: 550px; BORDER-BOTTOM-WIDTH: 1px; POSITION: absolute; LEFT: 435px; Z-INDEX: 10002; TOP: 123px; BORDER-TOP-WIDTH: 1px; display:none; background-color:#ffffff; }</style> ``` ``` <div id="div_add"></div> <div id="log_window" style="width:550px;height:200px;top:123px;left:435px;"></div> ``` ``` <script> function shield(){ var html=''; html+='<input id="ipt_qty" value="" type= "text" />'; $('#log_window').html(html); } //下面是设置div可以拖动,现在不可以输入,屏蔽之后input可以输入 var o,X, Y; function getObject(obj, e) { o = obj; document.all ? o.setCapture() : window.captureEvents(Event.MOUSEMOVE); X = e.clientX - parseInt(o.style.left); Y = e.clientY - parseInt(o.style.top); } document.getElementById("log_window").onmousedown = function (e) { getObject(this, e || event); }; document.onmousemove = function (dis) { if (!o) { return; } if (!dis) { dis = event; } o.style.left = dis.clientX - X + "px"; o.style.top = dis.clientY - Y + "px"; }; document.onmouseup = function () { if (!o) { return; } document.all ? o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP) o = ''; }; </script> ``` 这个代码需要在IE下运行。这只是我的部分代码,还有很多代码感觉贴出来没有用。大概都是这样的。在网上找到一个方法,就是设置拖拽以后给input加一个焦点,这样是可以输入的,但是鼠标无论放在哪个位置拖动整个div都跟着拖动,还有按钮button的点击样式和经过样式都没有了,怎么写才可以像平时打开的网页一样只可以拖动标题那一栏啊。 还有input框用js写的onblur验证都没有触发。
div层触发的问题?
<html> <head> <title>testing...</title> </head> <body style="text-align:center;"> <center> x:<input type="text" id="x_id" value="" /> y:<input type="text" id="y_id" value="" /> </center> <!-- body 中的 text-align:center; 以及 div 中的 margin:0px auto; 是为了让 div 居中 --> <div id="div_1" onMouseOver="showTip(event)" onMouseOut="hideTip()" style="margin:0px auto;text-align:left;width:600px;height:60px;background-color:#DFE8F6;"> <a href="www.baidu.com">我晕我怎么不行呢?</a> 与其在悬崖上展览千年,不如在爱人肩头痛哭一晚。<br /> 那弯弯的一轮新月,分明暗示着:怀抱着未来的圆满。<br /> </div> <div id="div_2" style="position:absolute;text-align:left;background-color:#808080;"> 生如夏花之灿烂<br /> 死如秋叶之静美<br /> 换我心,为你心,此知相忆深。<br /> </div> </body> <script type="text/javascript"> function showTip(evt){ evt = evt || window.event; var x,y; if(evt.pageX || evt.pageY){ // firefox x = evt.pageX; y = evt.pageY; }else{ // ie x = evt.clientX + document.body.scrollLeft - document.body.clientLeft; y = evt.clientY + document.body.scrollTop - document.body.clientTop; } // document.getElementById("x_id").value = x; document.getElementById("y_id").value = y; // 获取 div_1 的左下角坐标 var div_el = document.getElementById("div_1"); var div_left = div_el.offsetLeft; var div_top = div_el.offsetTop + div_el.offsetHeight; // 设置 div_2 的 左上角坐标 var div_tip = document.getElementById("div_2"); div_tip.style.display = ''; div_tip.style.left = div_left + "px"; div_tip.style.top = div_top + "px"; } function hideTip(){ var div_tip = document.getElementById("div_2"); div_tip.style.display = 'none'; } </script> </html> 问题:在div_1层里加了一个超链接,怎么让鼠标移动到超链接的时候,不触发hideTip()事件? [b]问题补充:[/b] 是啊是啊,会触发div_1的onmouseout 因为这是层里的超链接所以我不想触发onmouseout怎么办? [b]问题补充:[/b] 我想有这个监听的,但是,现在层里包含了其他的标签,鼠标移动到这个标签,就触发了层的onmouseout,我想这个时候不触发他,就是在鼠标在层里的东西里的时候 不触发他.不管层里是否是嵌套标签等 [b]问题补充:[/b] 用你的话说 我是想不让</a>这个标签不游离div_1这个层
使用jquery-powerfloat.js来实现的悬浮层效果在IE7或者IE8下运行,导致页面卡住
一、问题描述 在最近开发的asp.net项目使用jquery-powerfloat.js来实现网页上的悬浮层效果,当鼠标悬浮在网页的某个字符串上时显示悬浮层,移出该字符串不显示悬浮层。但是在IE7或者IE8浏览器上运行时,会导致页面卡住。 ![IE7下页面卡住截图](https://img-ask.csdn.net/upload/201911/12/1573549904_306764.png) 二、代码片段 1、主页面前端代码 ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainForm.aspx.cs" Inherits="powerFloat.MainForm" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>主界面</title> </head> <body> <form id="mainform" runat="server"> <div runat="server" id="addDiv"> </div> </form> </body> </html> ``` 2、主页面的后台代码 ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace powerFloat { public partial class MainForm : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if(!Page.IsCallback) { InitData(); } } private void InitData() { Control ctl = this.LoadControl("AddWebUserControl.ascx"); ctl.ID = "Test"; addDiv.Controls.Add(ctl); addDiv.Controls.Add(new LiteralControl("<br/>")); } } } ``` 3、悬浮层前端代码 ``` <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddWebUserControl.ascx.cs" Inherits="powerFloat.AddWebUserControl" %> <style> .dn { display: none; } .shadow { -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 4); -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 4); box-shadow: 1px 1px 3px rgba(0, 0, 0, 4); } .target_box { width: 700px; padding: 10px; border: 1px solid #aaa; background-color: #fff; } .target_list { padding: 4px; border-bottom: 1px dotted #ddd; overflow: hidden; _zoom: 1; } .target_list a { width: 160px; line-height: 20px; margin-right: 5px; padding: 1px; color: #333; font-size: 12px; text-align: left; text-decoration: none; float: left; } .target_list .select1 { width: 200px; line-height: 20px; margin-right: 5px; padding: 1px; color: red; font-size: 20px; text-align: left; text-decoration: none; float: left; } .target_more { margin-top: -20px; } .target_fixed { height: 25px; padding: 1px; position: fixed; _position: adsolute; top: 0; right: 0; } .custom_container { position: absolute; background-color: rgba(0, 0, 0, 5); background-color: #fff; } .custom_container img { padding: 0; position: relative; top: -5px; left: -5px; } </style> <table> <tr> <td>总署查验要求18项</td> <td> <input type="hidden" runat="server" id="hdnClientId" /> <asp:Literal ID="txt_CHECK_REQUEST_TOTAL" runat="server"></asp:Literal> </td> </tr> </table> <asp:Literal runat="server" ID="targetBox"></asp:Literal> <script src="scripts/jquery-1.4.1.js"></script> <script src="scripts/jquery-powerFloat.js"></script> <script> $(function () { var clientId = $("#Test_hdnClientId").val(); $(clientId).powerFloat( ) }); </script> ``` 4、悬浮层后台代码 ``` using System; using System.Collections; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace powerFloat { public partial class AddWebUserControl : System.Web.UI.UserControl { protected void Page_Load(object sender, EventArgs e) { if(!Page.IsCallback) { InitData(); } } private void InitData() { string checkRequestTotal = "000101010101001001"; txt_CHECK_REQUEST_TOTAL.Text = string.Format("<a id='{1}_trigger' href='javascript:;' rel='Test_targetBox'>{0}</a>", checkRequestTotal, this.ClientID); hdnClientId.Value = "#" + this.ClientID + "_trigger"; char[] splitChar = checkRequestTotal.ToCharArray(); ArrayList arrayList = new ArrayList(); for(int i=0;i<splitChar.Length;i++) { arrayList.Add(splitChar[i].ToString()); } string strHTML = @" <div id='ABC$$_targetBox' class='shadow target_box dn'> <div class='target_list'> <a href='javascript:;' class='select{0}'>1.辐射探测</a> <a href='javascript:;' class='select{1}'>2.预防性检疫处理</a> <a href='javascript:;' class='select{2}'>3.检查病媒/有害生物</a> </div> <div class='target_list'> <a href='javascript:;' class='select{3}'>4.动物临床检查</a> <a href='javascript:;' class='select{4}'>5.检查残留剂</a> <a href='javascript:;' class='select{5}'>6.检查车体/箱体</a> </div> <div class='target_list'> <a href='javascript:;' class='select{6}'>7.检查包装</a> <a href='javascript:;' class='select{7}'>8.核对品名</a> <a href='javascript:;' class='select{8}'>9.检查标签/标识</a> </div> <div class='target_list'> <a href='javascript:;' class='select{9}'>10.核对规格/型号</a> <a href='javascript:;' class='select{10}'>11.核对产终地</a> <a href='javascript:;' class='select{11}'>12.核对数量</a> </div> <div class='target_list'> <a href='javascript:;' class='select{12}'>13.核对重量</a> <a href='javascript:;' class='select{13}'>14.检查侵权</a> <a href='javascript:;' class='select{14}'>15.检查外观品质</a> </div> <div class='target_list'> <a href='javascript:;' class='select{15}'>16.检查夹藏/夹杂</a> <a href='javascript:;' class='select{16}'>17.检查温度</a> <a href='javascript:;' class='select{17}'>18.取样送检</a> </div> </div> "; targetBox.Text = string.Format(strHTML, arrayList.ToArray()).Replace("ABC$$", this.ClientID); } } } ``` 三、源码下载 代码使用vs2012开发的。(链接:https://pan.baidu.com/s/1Y2c3yfC7oenSZwSw1Uh0VQ 提取码:iqr4 ) 四、解决:由于jquery-powerfloat.js版本问题导致的,使用新的版本的就可以了。 jquery-powerfloat.js:链接:https://pan.baidu.com/s/1sKorCkN1UkmCFtf-6MNVxg 提取码:rh5n
关于javascript中的循环+点击事件
制作了一个页面,其中有一些文本标签,希望每点击一次其标签前的数字框中的数字可以增加一,但是具体用的时候一直报错。请教大家为什么会这样以及如何解决?感激不尽! 标签对应的代码如下: ```html <div id="main"> <div class="box"> <ul> <li> <span class="times">639</span> <a href="#1">全职动画特别篇第一集讨论集中贴</a> <p>讨论到这来,请不要撕起来,撕撕开删楼小黑屋。请理智讨论!请理智讨论!请理智讨论…</p> </li> </ul> </div> <div class="box"> <ul> <li> <span class="times">213</span> <a href="#2">全职高手同人剧之《给所有知道我名字的人》</a> <p>当他们放下了鼠标键盘和梦想,最终淹没在茫茫人海的平凡中,心中却仍有着永不能忘却的荣耀。即便荣耀走向终结,梦与记忆也永不褪色。看人生匆匆,愿我们同享光荣,愿我们的梦永不落空。全职高手同人《给所有知道我名字的人》…</p> </li> </ul> </div> <div class="box"> <ul> <li> <span class="times">209</span> <a href="#3">当千机伞实体化</a> <p>Stage 1.…</p> </li> </ul> </div> <div class="box"> <ul> <li> <span class="times">190</span> <a href="#4">第一千七百二十五章 荣耀不是一个人的游戏</a> <p>强攻!沐雨澄风的地图炮打出的时候,孙翔没有闪避,和周泽楷、江波涛做出的反应…</p> </li> </ul> </div> <div class="box"> <ul> <li> <span class="times">166</span> <a href="#5">#论连黄少天监考官为何辞职#</a> <p>独白体+电话占大多字数.全员欢乐向.就一句话nn 黄少卖萌【没…</p> </li> </ul> </div> <div class="box"> <ul> <li> <span class="times">153</span> <a href="#6">试试别的画风,涂一张毁人不倦</a> <p>很喜欢水墨风啊 于是换了这个画风试试看 私设出没注意…</p> </li> </ul> </div> ``` 以下是js部分的代码 ```javascript <script type="text/javascript"> var box=document.getElementsByClassName("box"); var times=document.getElementsByClassName("times"); for(var i=0;i<box.length;i++){ box[i].onclick=function(){ times[i].innerHTML=parseInt(times[i].innerHTML)+1; } } </script> ```
JS替换选中文字......
鼠标选某一个div中的文字后,把这段选中的文字包裹在一个a标签之中。。。
div触发事件的热点问题
<p><img src="/images/smiles/icon_cool.gif" alt="">如题:</p> <p>现在我有一个&lt;div&gt;,<span style="color: #ff0000;">&lt;div&gt;内部包含一个&lt;img&gt;</span>。此为背景。</p> <p> </p> <p>我想要实现的效果是,写一个div的hover事件,当鼠标移动到div上时这个div做一个变形的动画,</p> <p>再写一个mouseout事件,当鼠标移出div时这个div变回去。</p> <p> </p> <p>现在发现一个问题,<span style="color: #ff0000;">就是当我将鼠标移动到div内部时,会触发div的hover事件,在事件未完成前如果鼠标碰到了div中的img上,</span></p> <p><span style="color: #ff0000;">会触发div的mouseout事件。</span></p> <p><span style="color: #ff0000;">难道div和它内部的img不是一体的么?</span></p> <p>改怎样写呢?难道要把div内部的所有标签元素都绑定到那个div的事件么。</p> <p>如果我的div中有很多元素那岂不是非常麻烦,有没有什么简单的方法呢?</p> <p> </p> <p>现在代码如下:</p> <p> </p> <p>&lt;%@ page language="java" contentType="text/html; charset=utf-8"</p> <p>    pageEncoding="utf-8"%&gt;</p> <p>&lt;%</p> <p>String path = request.getContextPath();</p> <p>String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";</p> <p>%&gt;</p> <p>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;</p> <p>&lt;html&gt;</p> <p>&lt;head&gt;</p> <p>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;</p> <p>&lt;title&gt;try22&lt;/title&gt;</p> <p>&lt;script type="text/javascript" src="&lt;%=path %&gt;/js/jquery.js"&gt;&lt;/script&gt;</p> <p>&lt;script type="text/javascript"&gt;</p> <p><span style="white-space: pre;"> </span>$(document).ready(function(){</p> <p><span style="white-space: pre;"> </span>$("div").hover(function(){</p> <p><span style="white-space: pre;"> </span>$(this).stop().animate({"width":500},"slow");<span style="white-space: pre;"> </span></p> <p><span style="white-space: pre;"> </span>});</p> <p><span style="white-space: pre;"> </span>$("div").mouseout(function(){</p> <p><span style="white-space: pre;"> </span>$(this).stop().animate({"width":300},"slow");<span style="white-space: pre;"> </span></p> <p><span style="white-space: pre;"> </span>});</p> <p><span style="white-space: pre;"> </span>});</p> <p>&lt;/script&gt;</p> <p> </p> <p>&lt;/head&gt;</p> <p>&lt;body&gt;</p> <p>&lt;div style="width:300px;height:200px;background-color:#000000;margin-left:0px;position:absolute"&gt;&lt;img src="pic/cry.gif" /&gt;&lt;/div&gt;</p> <p>&lt;/body&gt;</p> <p>&lt;/html&gt;</p> <p> </p>
JS制作二级菜单的问题,我使用的innerHTML
先说下问题: 我想用JS的innerHTML添加二级菜单,所以在一级菜单后面加了一个空的div标签 ,然后innerHTML加入内容,并在<li>标记中加入onmouseover和onmouseout 事件。两段代码如下。 现在的问题是 鼠标点了“我的京东”后二级菜单出现,但是,离开二级菜单一直在那挂着,不消失,不知道是因为什么? 求懂得朋友解答!! 另您给解答后,再给说下您感觉比较好的添加二级菜单的方法,10C币奉上,不甚感谢。 ``` <li class="li_c li_me" onmouseover="myMouse();" onmouseout="myMouseOut();"><a href="#">我的京东</a><div id="myid" ></div></li> ``` js代码: ``` <script type="text/javascript"> function $(id){return document.getElementById(id);} //这个里面的id没带“”引号 function myMouse() { $("myid").innerHTML="<table><tr><td><a href=\"#\">我的京豆</a></td><td><a href=\"#\">我的白条</a></td></tr><tr><td><a href=\"#\">返修进度</a></td><td><a href=\"#\">我的会员</a></td></tr></table>"; $("myid").style.position="absolute"; //html中的属性=后面是属性值,属性值要加双引号"" $("myid").style.width="120px"; $("myid").style.height="60px"; $("myid").style.display="block"; } function myMouseOut(){ $("myid").style.display="none"; } </script> ```
请问怎么实现js控制的二级旋转导航栏
我使用的vue框架。 这个组件写出来是为了写一个用js控制的二级旋转导航栏,但是我写完收回这部分的时候却出现了问题。 在我上一个setTimeout还没结束的时候就把鼠标离开的话,就会出现,上一个setTimeout还没把所有的li展开,鼠标离开所建立的setTimeout就已经把上面的收回去了,导致下面的li标签还在,上面的已经空了。 ![图片说明](https://img-ask.csdn.net/upload/201911/12/1573550292_724743.png) 也写了其他的一些方法,但问题都差不多。 现在就是想知道应该怎么把这个问题解决 自学的js,经历过的东西不多,如果大佬要喷请轻点。 ``` index.vue <RotatingMenu box="box" ulid="ul" entercss="transform:rotateY(0deg);opacity:1;height:30px;" leavecss="transform:rotateY(90deg) rotateX(-30deg) rotateZ(45deg);opacity:0;height:0;" ></RotatingMenu> RotatingMenu.vue <template> <div class="RotatingMenu p_box" :class="box"> <p @mouseenter="click('.'+ulid,'enter',entercss)" @mouseleave="click('.UL1','leave',leavecss)" >animation:{{message}} <ul class="UL1" :class="ulid" ref="ul"> <li ref="li" v-for='it in list'> <span>{{it.title}}</span> </li> </ul></p> </div> </template> data()-- message:'动画', list:[ {title:'第一个'},{title:'第二个'},{title:'第三个'},{title:'第四个'},{title:'第五个'},{title:'第六个'}, {title:'第七个'},{title:'第八个'},{title:'第九个'},{title:'第十个'},{title:'第十一个'},{title:'第十二个'}, ], 函数--: click(cl,el,en,le){ console.log(cl) var ali = document.querySelectorAll(cl+" li");//拼接选择的样式 var aList = Array; aList = ali; let csslist ; if(el==='enter'){//鼠标进入时展开 csslist = en; for(let i in this.list){ let ai = parseInt(i); let time = setTimeout(function(){ aList[ai].style.cssText = csslist; },200*i) } }else if(el==='leave'){//鼠标离开时收回 csslist = le; for(let i in this.list){ let ai = parseInt(i); let unai = parseInt(-(i-this.list.length+1)); // console.log(unai) let time = setTimeout(function(){ aList[unai].style.cssText = csslist; },200*i) } }else{console.log("数据错了。")} console.log("csslist:"+csslist) }, 样式---:(用了scss) .p_box{ position: relative; color: white; p{ margin-left: 10px; width: 150px; height: 150px; background-color:#1670F0; ul{ position: absolute; top: 100%; li{ background-color: blue; transition: all 1s; opacity:0; height: 0; width: 150px; } } } } ```
如果不用jquery,怎么用JS获取网页中指定标签内的选中内容?
网页有一个div,里面有些文字,鼠标选中其中一部分字,怎么能感知这一事件,然后返回选中内容。
新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单
## 我的style里面的代码是外部镶入的,并不是直接写上去的 ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:450px; height:30px; border:1px solid red; margin:100px auto; /*盒子居中*/ } div ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left; height:50px; text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show();//show本质上还是更新display属性为block }); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide();//hide本质上还是更新display属性为none }); </script> </html> ``` ```
请教,javascript的拖动div代码
[size=small]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;这个是51job上的实例:[url]http://www.51job.com/default-area.php?area=0100[/url] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;当点选"选择/修改"时,会弹出对话框来让你选择,这个对话框是可以拖动的,现在我有个类似的代码来实现拖动: [code="java"] var oDrag = ""; var ox,oy,nx,ny,dy,dx; function drag(e,o){ var e = e ? e : event; var mouseD = document.all ? 1 : 0; if(e.button == mouseD){ oDrag = o.parentNode; //alert(oDrag.id); ox = e.clientX; oy = e.clientY; } } document.onmouseup = function(){oDrag = "";} document.onmousemove = function(event){dragPro(event);} function dragPro(e){ if(oDrag != ""){ var e = e ? e : event; //$(oDrag).style.left = $(oDrag).offsetLeft + "px"; //$(oDrag).style.top = $(oDrag).offsetTop + "px"; dx = parseInt($(oDrag).style.left); dy = parseInt($(oDrag).style.top); //dx = $(oDrag).offsetLeft; //dy = $(oDrag).offsetTop; nx = e.clientX; ny = e.clientY; $(oDrag).style.left = (dx + ( nx - ox )) + "px"; $(oDrag).style.top = (dy + ( ny - oy )) + "px"; ox = nx; oy = ny; } }[/code] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;但是我看不懂,希望会的朋友,给我解释下,最好给我加上详细的注释. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下面是页面调用的div: [code="java"]<div onmousedown="drag(event,this)">[/code] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;谢啦! [/size] [b]问题补充:[/b] 老报错吗?我没有把全部代码贴出来: <code><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>仿51job.com城市选择框特效</title> <style type="text/css"> <!-- body{padding-top:50px;font-size:12px;} h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;} .bton{border:1px solid #CCC;background:#DDD;} .cont{padding:10px;} #main{width:400px;margin:0px auto;} #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;} #preview{margin:1px;border:1px solid #CCC;} #result{border:1px solid #CCC;margin-top:10px;} .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;} .bgc_ccc{background:#CCC;} .bgc_eee{background:#eee;} .c_999{color:#999} .pointer{cursor:pointer;} .left{float:left;} .right{float:right;} .cls{clear:both;font-size:0px;height:0px;overflow:hidden;} #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;} .hidden{display:none;} .move{cursor:move;} --> </style> </head> <body> <div id="main"> <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)" /> <div id="result"> <div class="tit bgc_eee"> <h2>您已选择的城市汇总</h2> </div> <div class="cont" id="makeSureItem"></div> </div> </div> <div id="bg"></div> <div id="selectItem" class="hidden"> <div class="tit bgc_ccc move" onmousedown="drag(event,this)"> <h2 class="left">请选择城市</h2> <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span> <span class="pointer right" onclick="makeSure();">[确定]</span> </div> <div class="cls"></div> <div class="cont"> <div id="selectSub"> <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;"> <option value="0">第0层</option> <option value="1">第1层</option> <option value="2">第2层</option> <option value="3">第3层</option> </select> <div id="c00"> <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京" />北京 <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建" />福建 <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川" />四川 <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏" />江苏 </div> <div id="c01"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海" />上海 <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南" />云南 <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州" />贵州 </div> <div id="c02"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江" />黑龙江 <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林" />吉林 <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁" />辽宁 </div> <div id="c03"> <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国" />美国 <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗" />阿富汗 <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本" />日本 </div> </div> </div> <div id="preview"> <div class="tit bgc_eee c_999"> <h2>您已选择的城市</h2> </div> <div class="cont" id="previewItem"></div> </div> </div> <script type="text/javascript"> /* ------使用说明----- */ /* 添加城市方法: 添加组:找到id 是 "selectSub"中select标签下,添加option标签 value属性递增,找到 id 是 "selectSub",按照原有格式添加div,其id属性递增 添加二级傅选矿选项 复制 id 是 "selectSub" 下任意input标签,粘贴在需要添加的位置。 */ var grow = $("selectSub").getElementsByTagName("option").length; //组数 var showGrow = 0;//已打开组 var selectCount = 0; //已选数量 showSelect(showGrow); var items = $("selectSub").getElementsByTagName("input"); //alert(maxItem); //var lenMax = 2; //alert(1); function $(o){ //获取对象 if(typeof(o) == "string") return document.getElementById(o); return o; } function openBg(state){ //遮照打开关闭控制 if(state == 1){ document.getElementById("bg").style.display = "block"; var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight; //alert(document.body.offsetHeight); //alert(document.documentElement.offsetHeight); document.getElementById("bg").style.height = h + "px"; } else{ document.getElementById("bg").style.display = "none"; } } function openSelect(state){ //选择城市层关闭打开控制 if(state == 1){ $("selectItem").style.display = "block"; $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px"; $("selectItem").style.top = document.body.scrollTop + 100 + "px"; } else{ $("selectItem").style.display = "none"; } } function showSelect(id){ for(var i = 0 ; i < grow ;i++){ $("c0" + i).style.display = "none"; } $("c0" + id).style.display = "block"; showGrow = id; } function open(id,state){ //显示隐藏控制 if(state == 1) $(id).style.display = "block"; $(id).style.diaplay = "none"; } function addPreItem(){ $("previewItem").innerHTML = ""; var len = 0 ; for(var i = 0 ; i < items.length ; i++){ if(items[i].checked == true){ //len++; //if(len > lenMax) //{ // alert("不能超过" + lenMax +"个选项!") // return false; //} var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value; $("previewItem").innerHTML += mes; //alert(items[i].value); } } } function makeSure(){ //alert(1); //$("makeSureItem").innerHTML = $("previewItem").innerHTML; openBg(0); openSelect(0); copyItem("previewItem","makeSureItem") } function copyHTML(id1,id2){ $(id2).innerHTML = $("id1").innerHTML; } function copyItem(id1,id2){ var mes = ""; var items2 = $(id1).getElementsByTagName("input"); for(var i = 0 ; i < items2.length ; i++){ if(items2[i].checked == true){ mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value; } } $(id2).innerHTML = ""; $(id2).innerHTML += mes; //alert($(id2).innerHTML); } function same(ck){ for(var i = 0 ; i < items.length ; i++){ if(ck.value == items[i].value){ items[i].checked = ck.checked; } } } /* 鼠标拖动 */ var oDrag = ""; var ox,oy,nx,ny,dy,dx; function drag(e,o){ var e = e ? e : event; var mouseD = document.all ? 1 : 0; if(e.button == mouseD){ oDrag = o.parentNode; //alert(oDrag.id); ox = e.clientX; oy = e.clientY; } } document.onmouseup = function(){oDrag = "";} document.onmousemove = function(event){dragPro(event);} function dragPro(e){ if(oDrag != ""){ var e = e ? e : event; //$(oDrag).style.left = $(oDrag).offsetLeft + "px"; //$(oDrag).style.top = $(oDrag).offsetTop + "px"; dx = parseInt($(oDrag).style.left); dy = parseInt($(oDrag).style.top); //dx = $(oDrag).offsetLeft; //dy = $(oDrag).offsetTop; nx = e.clientX; ny = e.clientY; $(oDrag).style.left = (dx + ( nx - ox )) + "px"; $(oDrag).style.top = (dy + ( ny - oy )) + "px"; ox = nx; oy = ny; } } </script> </body> </html></code>
JS函数未定义 报错是缺少分号??
新手入门,恳请各位前辈指点,先谢谢各位了。 目前在看韩顺平老师的js视频教程,实现鼠标移动到不同位置,以切换到相应标签页。 代码如下,总是报错函数未定义,第九行缺少分号…… ``` <html> <head> <title>sohu</title> <link href="./sohu.css" type="text/css" rel="stylesheet"/> <script language="javascript" charset="GB2312"> function change(val){ window.alert("hha"); if(val=='1'){ div1.style.display: ""; div2.style.display: "none"; div3.style.display: "none"; }else if(val=='2'){ div2.style.display: ""; div1.style.display: "none"; div3.style.display: "none"; }else if(val=='3'){ div3.style.display: ""; div1.style.display: "none"; div2.style.display: "none"; } /* switch(val){ case '1': div1.style.display: "none"; div2.style.display: "none"; div3.style.display: "none"; break; case 2: div2.style.display: "none"; div1.style.display: "none"; div3.style.display: "none"; break; case 3: div3.style.display: "none"; div1.style.display: "none"; div2.style.display: "none"; break; }; */ } </script> </head> <body> <div class="div_bg"> <div id="div_left"> <ul> <li onmousemove="change('1')">广告</li> <li onmousemove="change('2')">广告</li> <li onmousemove="change('3')">广告</li> </ul> </div> <div class="div_right" id="div1"> <ul> <li><a href="">广告1广告1广告1广</a></li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> <div class="div_right" id="div2" style="display: none"> <ul> <li>广告2广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> <div class="div_right" id="div3" style="display: none"> <ul> <li>广告3广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> <li>广告1广告1广告1广</li> </ul> </div> </div> </body> </html> ```
js怎样获取对象id值
js怎样获取 鼠标落下事件(onmousedown)所点击的div的值 加入有若干个 class="idDrag"的div 这样的思路 1.首先判断鼠标落下的标签的 class是否是="idDrag", 2.如果是,则得到该div的id 值 或者 为class为idDrag的元素 绑定onmousedown事件 点击其中一个div时 得到这个div的 id 我是这样写的但是不对 [code="java"] //相当于getelementsByClassName()方法 var $js = function(classStr) { var el = [], _el = document.getElementsByTagName('*'); for(var i=0;i<_el.length;i++){ if(_el[i].className == classStr){ el[el.length] = _el[i]; } } return el; }; window.onload = function() { var objs = $js("idDrag"); for(var i=0;i<objs.length;i++) { addEventHandler(objs[i], "mousedown", function(e){ var DragId = objs[i].id; }); //.onmousedown = } }; [/code] var DragId = objs[i].id 这里报错,因为objs[i]是数组里面有多个div //addEventHandler是自己封装的 不用管它,总之它可以绑定事件 大家帮忙想想办法
使用 window.getSelection() 方法获取鼠标划取部分的起始位置和结束位置的问题
项目需要对html内文章内容做颜色标记的功能,但是不能改写原html的内容。 现在想到的方案是鼠标划取文章内容的时候,使用js获取文章内容的起始位置和结束位置,存入数据库,下次再访问该文章的时候,使用数据库记录的起始位置和结束位置去刻画标记。 测试前端代码如下 ``` <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> </head> <body> <div id="content" style="background: grey"> 乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注,也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计,再到iPhone5s的巅峰状态,但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 (原因受安卓大屏冲击的影响,果粉对大屏手机的欲望愈加的浓烈),但是收到广泛吐槽也是最多的。大白条,尤其是突出的摄像头,乔布斯知道估计都能从坟里跳出来! 不喜欢的iPhone6的果粉可以等等了,iPhone7马上就要来临了,这是国外设计师设计出的一部iPhone7的概念图,这部iPhone7不仅做工精湛, 而且消除了打白条和涉嫌头突出问题,更重要的是采用了iPhone4的双面玻璃设计,边角做出了圆润设计,不仅时尚,而且商务气息十足, 适合追求时尚的年轻人和商务人士使用,受用人群更广泛了。 </div> </body> <script type="text/javascript"> $(function(){ $("#content").mouseup(function(e){ if(window.getSelection) { var textObj = document.getElementById("content"); var selectedText = window.getSelection().toString(); alert(selectedText); selectedText = "<span style='background:red'>"+selectedText+"</span>"; var start = window.getSelection().anchorOffset; var end = window.getSelection().focusOffset; var tempStr1 = textObj.innerHTML.substring(0,start); var tempStr2 = textObj.innerHTML.substring(end); document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2 ; } }); }); </script> </html> ``` 第一次划取执行的时候没有问题,获取的起始位置是相对于div标签的。 执行之后会向html中添加span标签 第二次划取span标签后的文字的时候,获取的起始位置却是相对于span标签的 有没有方法每次获取的起始位置都是相对于div的?
为什么我外部导入CSS代码样式会错乱,直接写在想要导入的代码却没事?
``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉菜单</title> <script src="../jquery-1.11.1.min.js"></script> <link rel="stylesheet" type="text/css" href= /> </head> <body> <div class="wrap"> <ul> <li> <a href="#">一级菜单1</a> <ul style="display: none;"> <li><a href="">a</a></li> <li><a href="">b</a></li> <li><a href="">c</a></li> </ul> </li> <li> <a href="#">二级菜单1</a> <ul style="display:none;"> <li><a href="">d</a></li> <li><a href="">e</a></li> <li><a href="">f</a></li> </ul> </li> <li> <a href="#">三级菜单1</a> <ul style="display: none;"> <li><a href="">g</a></li> <li><a href="">h</a></li> <li><a href="">i</a></li> </ul> </li> </ul> </div> </body> <script> // 给一级菜单li设置鼠标移入事件,二级菜单显示 $('.wrap>ul>li').mouseover(function(){ $(this).children('ul').show(); // 给一级菜单li设置鼠标离开事件,二级菜单隐藏 $('.wrap>ul>li').mouseout(function(){ $(this).children('ul').hide(); }); </script> </html> _** 插入的CSS代码**_ <!doctype html> <html> <head> <meta charset="utf-8"> <title>美化菜单</title> <style> *{/*清除页面原有的边距*/ margin: 0; padding: 0; } .wrap{/*定义盒子框架*/ width:221px; height:21px; border:1px solid red; margin:100px auto; /*盒子居中*/ } ul{/*去除列表小圆点*/ list-style: none; } div ul li{ float:left;/*标签左浮动*/ text-align:center; } div ul li a{/*一级菜单*/ text-decoration: none;/*去除下划线*/ background-color: lightpink;/*块级元素颜色*/ width:120px; } div ul li ul li a{/*二级菜单*/ display: block;/*让a标签转换为块级元素*/ width: 72px; } div ul li a:hover{/*鼠标悬停时块级元素变橙色*/ background-color: orange; } div ul li ul li{/*二级菜单不浮动*/ float: none; } </style> </head> <body> </body> </html> ```
html里,我用vue.js,然后用echarts画了个图,为什么画不出来
``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>myMaptest</title> <script src="js/echarts.js"></script> <script src="js/yunnan.js"></script> <script src="js/china.js"></script> <script src="js/vue.js"></script> </head> <body> <div id="app"> <div id="main" v-bind:style="main"></div> </div> <script> //Vue var map1 = new Vue({ el:'#app', data: { main:'width:600px;height:700px;' } }) //echarts var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '云南降水', left:'center' } tooltip: { show: true, formatter: '{b}', //提示标签格式 backgroundColor:"#ff7f50",//提示标签背景颜色 textStyle:{color:"#fff"} //提示标签字体颜色 }, series: [{ type: 'map', mapType: '云南', label: { normal: { show: true, textStyle:{color:"#c71585"} }, emphasis: {//对应的鼠标悬浮效果 show: true, textStyle:{color:"#800080"} } }, itemStyle: { normal: { borderWidth: .5,//区域边框宽度 borderColor: '#009fe8',//区域边框颜色 areaColor:"#00efd5",//区域颜色 }, emphasis: { borderWidth: .5, borderColor: 'BLACK', areaColor:"#ffffff", } }, zlevel: 1 }], }; myChart.setOption(option); </script> </body> </html> ```
document.write执行一次就不会再执行了吗
在写一个大学生实训用的网站时,遇到一个问题。 具体经过是这样的,我想要实现网页显示在不同的div时,播放不同的背景音乐。但是每次都发现只会播放第一个div的音乐。 主要代码如下: ``` var sound1="music/page1.mp3"; var sound2="music/page2.mp3"; var sound3="music/page3.mp3"; var sound4="music/page4.mp3"; var sound5="music/page5.mp3"; var sound6="music/page6.mp3"; var sound7="music/page7.mp3"; var soundx="music/text.mp3";//各个div音乐的路径写出来 var x; if(index==1){ x=sound1; //在第一页时播放sound1 }else if(index==2){ x=sound2; //在第二页时播放sound2 }else if(index==3){ x=sound3; }else if(index==4){ x=sound4; }else if(index==5){ x=sound5; }else if(index==6){ x=sound6; }else if(index==7){ x=sound7; }else{ x=soundx; //测试什么时候出错的时候,播放text音乐 } //写embed标签,播放背景音乐 document.write('<embed src='+'"'+x+'"'+'hidden="true" autostart="true" loop="true">'); ``` 大概解释一下,index代表当前屏幕所在的“页”,总共有7页,也就是div1-div7,我实现了鼠标往下滑,整个网页就刚好往下滑一个屏幕大小的区域,然后屏幕上显示的div1变到div2,index+1,再往下滑,屏幕上显示的div2变到div3......,index+1,这些功能我都测试过是没有问题的。 那么现在问题来了,为什么我的网页还是可以从div1滑到其他div,但是背景音乐始终放的是sound1,我试过给index初始值为2,然后背景音乐就变成sound2,设为3变成sound3......既然如此我觉得问题还是在document.write上,是不是document.write在整个html文档里只可以执行一次呢?或者我哪里做的不对,恳请各位大哥帮忙看一下,以解大学生当下之急。
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载 点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。 ...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
Elastic:菜鸟上手指南
您们好,我是Elastic的刘晓国。如果大家想开始学习Elastic的话,那么这里将是你理想的学习园地。在我的博客几乎涵盖了你想学习的许多方面。在这里,我来讲述一下作为一个菜鸟该如何阅读我的这些博客文章。 我们可以按照如下的步骤来学习: 1)Elasticsearch简介:对Elasticsearch做了一个简单的介绍 2)Elasticsearch中的一些重要概念:cluster, n...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
Java知识体系最强总结(2020版)
更新于2019-12-15 10:38:00 本人从事Java开发已多年,平时有记录问题解决方案和总结知识点的习惯,整理了一些有关Java的知识体系,这不是最终版,会不定期的更新。也算是记录自己在从事编程工作的成长足迹,通过博客可以促进博主与阅读者的共同进步,结交更多志同道合的朋友。特此分享给大家,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位大佬指点,在此表示感激不尽。 文章目录...
计算机专业的书普遍都这么贵,你们都是怎么获取资源的?
介绍几个可以下载编程电子书籍的网站。 1.Github Github上编程书资源很多,你可以根据类型和语言去搜索。推荐几个热门的: free-programming-books-zh_CN:58K 星的GitHub,编程语言、WEB、函数、大数据、操作系统、在线课程、数据库相关书籍应有尽有,共有几百本。 Go语言高级编程:涵盖CGO,Go汇编语言,RPC实现,Protobuf插件实现,Web框架实...
卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!
作者 | Rocky0429 来源 | Python空间 大家好,我是 Rocky0429,一个喜欢在网上收集各种资源的蒟蒻… 网上资源眼花缭乱,下载的方式也同样千奇百怪,比如 BT 下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的 x 雷和某度网盘成了我经常使用的工具。 作为一个没有钱的穷鬼,某度网盘几十 kb 的下载速度让我...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
一文带你看清 HTTP 所有概念
上一篇文章我们大致讲解了一下 HTTP 的基本特征和使用,大家反响很不错,那么本篇文章我们就来深究一下 HTTP 的特性。我们接着上篇文章没有说完的 HTTP 标头继续来介绍(此篇文章会介绍所有标头的概念,但没有深入底层) HTTP 标头 先来回顾一下 HTTP1.1 标头都有哪几种 HTTP 1.1 的标头主要分为四种,通用标头、实体标头、请求标头、响应标头,现在我们来对这几种标头进行介绍 通用...
作为一个程序员,CPU的这些硬核知识你必须会!
CPU对每个程序员来说,是个既熟悉又陌生的东西? 如果你只知道CPU是中央处理器的话,那可能对你并没有什么用,那么作为程序员的我们,必须要搞懂的就是CPU这家伙是如何运行的,尤其要搞懂它里面的寄存器是怎么一回事,因为这将让你从底层明白程序的运行机制。 随我一起,来好好认识下CPU这货吧 把CPU掰开来看 对于CPU来说,我们首先就要搞明白它是怎么回事,也就是它的内部构造,当然,CPU那么牛的一个东...
【综合篇】浏览器的工作原理:浏览器幕后揭秘
web(给达达前端加星标,提升前端技能)了解浏览器是如何工作的,能够让你站在更高的角度去理解前端浏览器的发展历程的三大路线,第一是应用程序web化,第二是web应用移动化,第三是web操...
破14亿,Python分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
死磕Lambda表达式(二):Lambda的使用
在哪使用Lambda表达式?怎么样正确的使用Lambda表达式?
史上最牛逼的 Eclipse 快捷键,提高开发效率!
如果你在使用IDEA,请参考博主另外的一篇idea快捷键的博客。
在三线城市工作爽吗?
我是一名程序员,从正值青春年华的 24 岁回到三线城市洛阳工作,至今已经 6 年有余。一不小心又暴露了自己的实际年龄,但老读者都知道,我驻颜有术,上次去看房子,业务员肯定地说:“小哥肯定比我小,我今年还不到 24。”我只好强颜欢笑:“你说得对。” 从我拥有记忆到现在进入而立之年,我觉得,我做过最明智的选择有下面三个: 1)高中三年,和一位女同学保持着算不上朋友的冷淡关系;大学半年,把这位女同学追到...
CSS操作之你不得不知的一些小技巧(一)ヾ(Ő∀Ő๑)ノ太棒了!!
目录 CSS单行/多行文本,超出隐藏并显示省略号 1. CSS单行/多行文本,超出隐藏并显示省略号 方法一:使用CSS属性 单行文本溢出显示省略号 width: 100px; overflow: hidden; text-overflow:ellipsis; //文本溢出显示省略号 white-space: nowrap; //文本不会换...
强烈推荐 10 款珍藏的 Chrome 浏览器插件
Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠;但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具。那段时间,不少人开始推荐 Chrome 浏览器,我想那就试试吧,期初我觉得用起来很别扭,毕竟我不是一个“喜新厌旧”的人。但用的次数越来越多,也就习惯了。 Chrome 浏览器有一个好处,就是插件极其丰富,只有你想不到的,没有你找不到的,这恐怕是...
我以为我对数据库索引十分了解,直到我遇到了阿里面试官。
索引的数据结构分析,数据库面试到索引最常见的问题分析,我总结了一下。
Java程序员都需要懂的「反射」
前言 只有光头才能变强。 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 今天来简单写一下Java的反射。本来没打算写反射这个知识点的,只是不少的读者都问过我:“你的知识点好像缺了反射阿。能不能补一下?” 这周末也有点空了,所以来写写我对反射的简单理解。这篇是入门文章,没有高深的知识点,希望能对新人有帮助。如果...
相关热词 c# singleton c#中类的默认值是 c#各种进制之间的转换 c# 正则表达式保留汉字 c#后台跨域 c#基础代码大全 c#指定combox选择 c#关系 mono c# 相差毫秒 用c#做一个简易计算器
立即提问