如何用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; } } } } ```
新人求助!!做网页做了一个二级菜单,但是一级菜单放不进去盒子,二级菜单不对齐一级菜单
## 我的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> ``` ```
如果不用jquery,怎么用JS获取网页中指定标签内的选中内容?
网页有一个div,里面有些文字,鼠标选中其中一部分字,怎么能感知这一事件,然后返回选中内容。
请教,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文档里只可以执行一次呢?或者我哪里做的不对,恳请各位大哥帮忙看一下,以解大学生当下之急。
终于明白阿里百度这样的大公司,为什么面试经常拿ThreadLocal考验求职者了
点击上面↑「爱开发」关注我们每晚10点,捕获技术思考和创业资源洞察什么是ThreadLocalThreadLocal是一个本地线程副本变量工具类,各个线程都拥有一份线程私...
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小人工智障。 思路可以运用在不同地方,主要介绍的是思路。
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
阿里面试官问我:如何设计秒杀系统?我的回答让他比起大拇指
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图和个人联系方式,欢迎Star和指教 前言 Redis在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在Redis的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸,打败了...
C语言魔塔游戏
很早就很想写这个,今天终于写完了。 游戏截图: 编译环境: VS2017 游戏需要一些图片,如果有想要的或者对游戏有什么看法的可以加我的QQ 2985486630 讨论,如果暂时没有回应,可以在博客下方留言,到时候我会看到。 下面我来介绍一下游戏的主要功能和实现方式 首先是玩家的定义,使用结构体,这个名字是可以自己改变的 struct gamerole { char n...
面试官问我:什么是消息队列?什么场景需要他?用了会出现什么问题?
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Android性能优化(4):UI渲染机制以及优化
文章目录1. 渲染机制分析1.1 渲染机制1.2 卡顿现象1.3 内存抖动2. 渲染优化方式2.1 过度绘制优化2.1.1 Show GPU overdraw2.1.2 Profile GPU Rendering2.2 卡顿优化2.2.1 SysTrace2.2.2 TraceView 在从Android 6.0源码的角度剖析View的绘制原理一文中,我们了解到View的绘制流程有三个步骤,即m...
微服务中的Kafka与Micronaut
今天,我们将通过Apache Kafka主题构建一些彼此异步通信的微服务。我们使用Micronaut框架,它为与Kafka集成提供专门的库。让我们简要介绍一下示例系统的体系结构。我们有四个微型服务:订单服务,行程服务,司机服务和乘客服务。这些应用程序的实现非常简单。它们都有内存存储,并连接到同一个Kafka实例。 我们系统的主要目标是为客户安排行程。订单服务应用程序还充当网关。它接收来自客户的请求...
致 Python 初学者们!
作者| 许向武 责编 | 屠敏 出品 | CSDN 博客 前言 在 Python 进阶的过程中,相信很多同学应该大致上学习了很多 Python 的基础知识,也正在努力成长。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 Python 这门编程语言,从2009年开始单一使用 Python 应对所有的开发工作,直至今...
究竟你适不适合买Mac?
我清晰的记得,刚买的macbook pro回到家,开机后第一件事情,就是上了淘宝网,花了500元钱,找了一个上门维修电脑的师傅,上门给我装了一个windows系统。。。。。。 表砍我。。。 当时买mac的初衷,只是想要个固态硬盘的笔记本,用来运行一些复杂的扑克软件。而看了当时所有的SSD笔记本后,最终决定,还是买个好(xiong)看(da)的。 已经有好几个朋友问我mba怎么样了,所以今天尽量客观...
程序员一般通过什么途径接私活?
二哥,你好,我想知道一般程序猿都如何接私活,我也想接,能告诉我一些方法吗? 上面是一个读者“烦不烦”问我的一个问题。其实不止是“烦不烦”,还有很多读者问过我类似这样的问题。 我接的私活不算多,挣到的钱也没有多少,加起来不到 20W。说实话,这个数目说出来我是有点心虚的,毕竟太少了,大家轻喷。但我想,恰好配得上“一般程序员”这个称号啊。毕竟苍蝇再小也是肉,我也算是有经验的人了。 唾弃接私活、做外...
字节跳动面试官这样问消息队列:分布式事务、重复消费、顺序消费,我整理了一下
你知道的越多,你不知道的越多 点赞再看,养成习惯 GitHub上已经开源 https://github.com/JavaFamily 有一线大厂面试点脑图、个人联系方式和人才交流群,欢迎Star和完善 前言 消息队列在互联网技术存储方面使用如此广泛,几乎所有的后端技术面试官都要在消息队列的使用和原理方面对小伙伴们进行360°的刁难。 作为一个在互联网公司面一次拿一次Offer的面霸...
Python爬虫爬取淘宝,京东商品信息
小编是一个理科生,不善长说一些废话。简单介绍下原理然后直接上代码。 使用的工具(Python+pycharm2019.3+selenium+xpath+chromedriver)其中要使用pycharm也可以私聊我selenium是一个框架可以通过pip下载 pip installselenium -ihttps://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...
SpringBoot2.x系列教程(三十六)SpringBoot之Tomcat配置
Spring Boot默认内嵌的Tomcat为Servlet容器,关于Tomcat的所有属性都在ServerProperties配置类中。同时,也可以实现一些接口来自定义内嵌Servlet容器和内嵌Tomcat等的配置。 关于此配置,网络上有大量的资料,但都是基于SpringBoot1.5.x版本,并不适合当前最新版本。本文将带大家了解一下最新版本的使用。 ServerProperties的部分源...
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分析我国存在哪些人口危机!
一、背景 二、爬取数据 三、数据分析 1、总人口 2、男女人口比例 3、人口城镇化 4、人口增长率 5、人口老化(抚养比) 6、各省人口 7、世界人口 四、遇到的问题 遇到的问题 1、数据分页,需要获取从1949-2018年数据,观察到有近20年参数:LAST20,由此推测获取近70年的参数可设置为:LAST70 2、2019年数据没有放上去,可以手动添加上去 3、将数据进行 行列转换 4、列名...
听说想当黑客的都玩过这个Monyer游戏(1~14攻略)
第零关 进入传送门开始第0关(游戏链接) 请点击链接进入第1关: 连接在左边→ ←连接在右边 看不到啊。。。。(只能看到一堆大佬做完的留名,也能看到菜鸡的我,在后面~~) 直接fn+f12吧 &lt;span&gt;连接在左边→&lt;/span&gt; &lt;a href="first.php"&gt;&lt;/a&gt; &lt;span&gt;←连接在右边&lt;/span&gt; o...
在家远程办公效率低?那你一定要收好这个「在家办公」神器!
相信大家都已经收到国务院延长春节假期的消息,接下来,在家远程办公可能将会持续一段时间。 但是问题来了。远程办公不是人在电脑前就当坐班了,相反,对于沟通效率,文件协作,以及信息安全都有着极高的要求。有着非常多的挑战,比如: 1在异地互相不见面的会议上,如何提高沟通效率? 2文件之间的来往反馈如何做到及时性?如何保证信息安全? 3如何规划安排每天工作,以及如何进行成果验收? ...... ...
作为一个程序员,内存和磁盘的这些事情,你不得不知道啊!!!
截止目前,我已经分享了如下几篇文章: 一个程序在计算机中是如何运行的?超级干货!!! 作为一个程序员,CPU的这些硬核知识你必须会! 作为一个程序员,内存的这些硬核知识你必须懂! 这些知识可以说是我们之前都不太重视的基础知识,可能大家在上大学的时候都学习过了,但是嘞,当时由于老师讲解的没那么有趣,又加上这些知识本身就比较枯燥,所以嘞,大家当初几乎等于没学。 再说啦,学习这些,也看不出来有什么用啊!...
这个世界上人真的分三六九等,你信吗?
偶然间,在知乎上看到一个问题 一时间,勾起了我深深的回忆。 以前在厂里打过两次工,做过家教,干过辅导班,做过中介。零下几度的晚上,贴过广告,满脸、满手地长冻疮。 再回首那段岁月,虽然苦,但让我学会了坚持和忍耐。让我明白了,在这个世界上,无论环境多么的恶劣,只要心存希望,星星之火,亦可燎原。 下文是原回答,希望能对你能有所启发。 如果我说,这个世界上人真的分三六九等,...
2020年全新Java学习路线图,含配套视频,学完即为中级Java程序员!!
新的一年来临,突如其来的疫情打破了平静的生活! 在家的你是否很无聊,如果无聊就来学习吧! 世上只有一种投资只赚不赔,那就是学习!!! 传智播客于2020年升级了Java学习线路图,硬核升级,免费放送! 学完你就是中级程序员,能更快一步找到工作! 一、Java基础 JavaSE基础是Java中级程序员的起点,是帮助你从小白到懂得编程的必经之路。 在Java基础板块中有6个子模块的学...
B 站上有哪些很好的学习资源?
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!! 最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд ˇ◕ฺ;)ノ 下面我们就来盘点一下B站上优质的学习资源: 综合类 Oeasy: 综合...
爬取薅羊毛网站百度云资源
这是疫情期间无聊做的爬虫, 去获取暂时用不上的教程 import threading import time import pandas as pd import requests import re from threading import Thread, Lock # import urllib.request as request # req=urllib.request.Requ...
如何优雅地打印一个Java对象?
你好呀,我是沉默王二,一个和黄家驹一样身高,和刘德华一样颜值的程序员。虽然已经写了十多年的 Java 代码,但仍然觉得自己是个菜鸟(请允许我惭愧一下)。 在一个月黑风高的夜晚,我思前想后,觉得再也不能这么蹉跎下去了。于是痛下决心,准备通过输出的方式倒逼输入,以此来修炼自己的内功,从而进阶成为一名真正意义上的大神。与此同时,希望这些文章能够帮助到更多的读者,让大家在学习的路上不再寂寞、空虚和冷。 ...
雷火神山直播超两亿,Web播放器事件监听是怎么实现的?
Web播放器解决了在手机浏览器和PC浏览器上播放音视频数据的问题,让视音频内容可以不依赖用户安装App,就能进行播放以及在社交平台进行传播。在视频业务大数据平台中,播放数据的统计分析非常重要,所以Web播放器在使用过程中,需要对其内部的数据进行收集并上报至服务端,此时,就需要对发生在其内部的一些播放行为进行事件监听。 那么Web播放器事件监听是怎么实现的呢? 01 监听事件明细表 名...
3万字总结,Mysql优化之精髓
本文知识点较多,篇幅较长,请耐心学习 MySQL已经成为时下关系型数据库产品的中坚力量,备受互联网大厂的青睐,出门面试想进BAT,想拿高工资,不会点MySQL优化知识,拿offer的成功率会大大下降。 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计...
HTML5适合的情人节礼物有纪念日期功能
前言 利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下半部分的JS代码需要修改一下起始日期 注意月份为0~11月 也就是月份需要减一。 当然只有一部分HTML和JS代码不够运行的,文章最下面还附加了完整代码的下载地址 &lt;!...
Python新型冠状病毒疫情数据自动爬取+统计+发送报告+数据屏幕(三)发送篇
今天介绍的项目是使用 Itchat 发送统计报告 项目功能设计: 定时爬取疫情数据存入Mysql 进行数据分析制作疫情报告 使用itchat给亲人朋友发送分析报告 基于Django做数据屏幕 使用Tableau做数据分析 来看看最终效果 目前已经完成,预计2月12日前更新 使用 itchat 发送数据统计报告 itchat 是一个基于 web微信的一个框架,但微信官方并不允许使用这...
相关热词 c#如何定义数组列表 c#倒序读取txt文件 java代码生成c# c# tcp发送数据 c#解决时间格式带星期 c#类似hashmap c#设置istbox的值 c#获取多线程返回值 c# 包含数字 枚举 c# timespan
立即提问