js案例，鼠标坐标；文本复制；三级联动——第五期线上——2019-3-29 - js

Home > List of blog posts > js案例，鼠标坐标；文本复制；三级联动——第五期线上——2019-3-29

Blogger Information

Blog 34

fans 0

comment 0

visits 39320

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<title>实时获取鼠标在div中的【相对位置坐标】</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<style type="text/css">
	  #main{
	  	width: 500px;height:400px;
	  	margin: 100px auto 20px;
	  	border: 2px solid red;
	  }
	  p{
	  	width: 500px;height: 50px;
	  	margin: 0 auto;
	  	border: 2px solid green;
	  	line-height: 50px;
           
	  }
	</style>	
</head>
<body onload="moves()">
 <div id="main"></div>
 <p>坐标为:<b id="show">(0,0)</b></p>


<script>
	function moves(){
		var divobj=document.getElementById('main');
         var showobj=document.getElementById('show');
        divobj.onmousemove=function(event){
        	var e=event || window.event;
        	//获取鼠标坐标
        	var m_x=e.clientX; //鼠标指针横坐标
        	var m_y=e.clientY;//鼠标指针纵坐标
        	//获取div坐标
        	var d_x=this.offsetLeft;//offsetLeft:Html元素相对于文档的x轴位置
        	var d_y=this.offsetTop;  //offsetTop: Html元素相对于文档的y轴位置
        	//鼠标指针相对于区块的相对位置
        	var x=m_x-d_x;
        	var y=m_y-d_y;
        	showobj.innerHTML="("+x+","+y+")"
        }
	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

文本复制与搜索

这其中有4个方法，

getSelect(); Selection对象，用于表示用户选择的文本范围
change(): 在鼠标位置显示复制与搜索的div
copyText（）：执行浏览器的复制功能
getSearch（）：把选中的文本拼接到 url中，再执行跳转页面

实例

<!DOCTYPE html>
<html>
<head>
	<title>仿百度文库中的文字搜索效果</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
  <style type="text/css">
    #content {
    width:500px;
    height:200px;
    margin:50px auto;
    border:1px solid #ccc;
    padding:10px;
    border-radius: 5px;
    overflow: auto;
  }
  #nav_menu {
    width:100px;
    height:30px;
    background: #fff;
    line-height: 30px; 
    padding:5px;
    border-radius: 5px;
    border:1px solid #ccc;
    display: none;
    position: fixed;
    top:0;
    left:0;
  }
  #nav_menu button {
    background: transparent;
    border:0;
    color:green;
    cursor: pointer;
  }
  #nav_menu button:hover {
    color: red;
  }
  </style>
</head>
<body>
    <div id="content" onmouseup="change(event)">
    前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
   </div>
  <p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
	<script>
     function getSelect() {
       return window.getSelection().toString();//getSelection()方法可以返回一个Selection对象，用于表示用户选择的文本范围
     }
     function change(event){
      var str=getSelect()
      var e=event || window.event;
      if(str.length>0){
          var x=e.clientX; //鼠标指针横坐标
          var y=e.clientY;//鼠标指针纵坐标 
          var menu=document.getElementById('nav_menu');
          menu.style.left=x+'px';
          menu.style.top=y+'px';
          menu.style.display="block";
      }else{
          menu.style.display="none";
      }

     }
     //复制
     function copyText(){
      document.execCommand("Copy");
      document.getElementById('nav_menu').style.display="none"
     }
     //搜索
     function getSearch(){
      if(getSelect()){
        window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect()
      }
      document.getElementById('nav_menu').style.display="none"
     }

  </script>	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

省市县三级联动

不是很明白

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>省/市/区 三级联动</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
	<style type="text/css">
		
	</style>
</head>
<body>
  <form>
	<select name="sel" id="sheng">
	    <option value="">请选择省会</option>
	    <option value="江西省">江西省</option>
	    <option value="广东省">广东省</option>
	    <option value="安徽省">安徽省</option>
	</select>
	<select name="sel" id="shi">
	    <option value="">请选择城市</option>
	</select>
	<select name="sel" id="qu">
	    <option value="">请选择地区</option>
	</select>
</form>	

<script>
	window.onload=function(){

       function getId(id){
       	return document.getElementById(id);
       }
      var sheng=getId('sheng');
      var shi=getId('shi');
      var qu=getId('qu');
      var m;
      var n;
      var p;
      var that;
      var arr=[
               "江西省",["南昌市",["东湖区","西湖区","青山湖区"],"景德镇",["珠江区","西湖区","昌江区"]],
                "广东省",[
                        "广州市",["番禺区","天河区","黄埔区"],
                        "深圳市",["宝安区","龙岗区","福田区"],
                        "惠州市",["龙门区","惠城区","惠阳区"]
                ],
                 "安徽省",[
                        "合肥市",["政务区","庐阳区","包河区"],
                        "芜湖市",["经开区","庐阳区","包河区"],
                        "黄山市",["高新区","庐阳区","包河区"]
                ]
      ]
      // console.log(arr)
      // console.log(arr[0])//可以取到省 0 2 4
      // console.log(arr[1][0])//可以取到市 0 2 4
      // console.log(arr[1][1][2])//可以取到区 1 3 5
    //onchange 事件会在域的内容改变时发
      sheng.onchange=function(){
      	that=this;//that=this就是将当前的this对象复制一份到that变量中
      	for(var i=0;i<arr.length;i+=2){
      		if(arr[i]==this.value){
      			m=i;
      			printShi(m);
      			printQu(m,1)
      		}
      	} 
      	shi.onchange=function(){
      		for(var i=0;i<arr.length;i+=2){
      			if(arr[i]==that.value){
      				n=i
      				for(var j=0,len=arr[n+1].length;j<len;j+=2){
      					if(arr[n+1][j]==this.value){
                           p=j
                           printQu(n,p+1)
      					}
      				
      				}
      			}
      		}
      	}

      }
    
      function printShi(x){
      	shi.innerHTML="<option value="+arr[x+1][0]+">"+arr[x+1][0]+"</option>";
      	 for(var j=2,len=arr[x+1].length;j<len;j+=2){
      	 	//将市列表显示出来
      	 	var shioption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
      	 	shioption.setAttribute("value",arr[x+1][j])//修改value
      	 	shioption.innerHTML=arr[x+1][j];
      	 	//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
      	 	shi.appendChild(shioption);

      	 }
      }
       function printQu(x,y){
      	  qu.innerHTML="<option value="+arr[x+1][y][0]+">"+arr[x+1][y][0]+"</option>";
      	 for(var j=2,len=arr[x+1][y].length;j<len;j++){
      	 	//将市列表显示出来
      	 	var quoption=document.createElement("option") //createElement() 方法通过指定名称创建一个元素
      	 	quoption.setAttribute("value",arr[x+1][y][j])//修改value
      	 	quoption.innerHTML=arr[x+1][y][j];
      	 	//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点
      	 	qu.appendChild(quoption);

      	 }
      }


	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

滚动条下移到一定距离显示固定导航

实例

<!DOCTYPE html>
<html>
<head>
	<title>页面滚动条下移一定距离实现【固定的导航】</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">	
	<style>
	*{margin: 0;padding: 0;}
	#main{width: 100%;height: 70px;background: #ccc;line-height: 70px;text-align: center;}
	#box{width: 100%;height: 50px;background: #f00;line-height: 50px;text-align: center;
		position: fixed;top: 0;
		display: none;
	}
	input{width: 700px;height: 40px;border: 0;border-radius: 30px;}
	.main{height: 1500px;margin: 0 auto;background: pink;}
	</style>
</head>
<body>
 <div id="main">
 	<input type="" name="">
 </div>
 <div id="box">
 	<input type="" name="">
 </div>
 <div class="main"></div>
<script>
	window.onload=function(){
		document.onscroll=function(){//onscroll 事件在元素滚动条在滚动时触发
			//谷歌不识别document.documentElement.scrollTop，必须要加上document.body.scrollTop；
		var s=document.documentElement.scrollTop||document.body.scrollTop;
			if(s >300){//scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置
                 document.getElementById('box').style.display="block";
			}else{
				 document.getElementById('box').style.display="none";
			}
		}
	}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

tp5.1静态文件引用及配置

2019-01-29 12:58:44