复制搜索效果作业

<!DOCTYPE html>

<html>

 <head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

   *{margin: 0; padding: 0;}

   #mian{

    width: 500px;

    height: 200px;

    border: 1px solid #FF0000;

    margin: 50px auto;

   }

   #c_serch{

    border: 1px solid #aaa;

    position: fixed;

    display: none;

    top: 0;

    left: 0;

   }

   #c_serch button{

    width: 35px;

    display: block;

    float: left;

    border: 0px;

    background: #FFFFFF;

    color: #008000;

   }

   

  </style>

 </head>

 <body>

  <div id="mian" onmouseup="change(event)">

   在JavaScript中，当一个对象被传递给期望一个字符串（如：window.alert()，或document.write()）的函数时，将调用该对象的toString()方法并将返回的值传递给该函数。当它与其他函数一起使用时，当它实际上是具有属性和方法的对象时，这可以使对象看起来像是一个字符串。 

在上面的示例中，在将它传递给window.alert()时会自动调用selObj.toString()。但是，如果没有该属性或方法，直接在Selection对象上尝试使用JavaScript String属性或方法（如length或substr）将导致错误，如果有，则可能会返回意外结果。要将Selection对象用作字符串，请直接调用其toString()方法：

  </div>

  <p id="c_serch"><button onclick="copyText()">复制</button><button onclick="getSearch()">搜索</button></p>

  

  <script type="text/javascript">

   

   //获取选中效果

   function getSelect(){

    return window.getSelection().toString();

   }

   

   //选中显示 <复制搜索>

   function change(event){

    var e = event || window.event;

    var str = getSelect();

    if (str.length>0) {

     var x=e.clientX;

     var y=e.clientY;

     var str = document.getElementById("c_serch");

     str.style.left=x+"px";

     str.style.top=y+15+"px";

     str.style.display="block";

    } else{

     str.style.display="none";

    }

   }

   

   //复制效果

   function copyText(){

    document.getElementById("c_serch").style.display="none";

   }

   

   function getSearch(){

    if(getSelect()){

     window.location.href="
http://www.baidu.com/s?wd="+getSelect
();

    }else{

     document.getElementById("c_serch").style.display="none";

    }

   }

   

   

  </script>

 </body>

</html>
相关文章
