js案例学习***五期线上班 - 作业

Home > List of blog posts > js案例学习***五期线上班

Blogger Information

Blog 18

fans 0

comment 0

visits 11532

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<title>javascript学习-获取指针坐标</title>
	<meta charset="utf-8">
	<!-- <script type="text/javascript" src="static/a.js"></script> -->
	<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 >
<div id="main"></div>
<p>坐标为：<b id="show">(0,0)</b></p>

<script type="text/javascript">
	window.onload=function(){
		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; //纵坐标

			var d_x=this.offsetLeft;  //相对语文当中x轴的位置
			var d_y=this.offsetTop;

			//鼠标指针相对于区块的相对位置
			var x=m_x-d_x;
			var y=m_y-d_y;
			showObj.innerHTML="("+x+","+y+")";

		}
	}
	

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

运行实例 »

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

2网页中文字复制，搜索效果

实例

<!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)">
    1956年9月15日至27日，中国***第八次全国代表大会在北京举行。大会提出的党和国家主要任务是集中力量发展***力的思想，对于社会主义事业的发展和党的建设具有长远的重要的意义。图为毛泽东在大会上致开幕词。1982年9月1日至11日，中国***第十二次全国代表大会在北京举行。邓小平致开幕词。他在开幕词中明确提出了“建设有中国特色的社会主义”的重大命题。图为邓小平在大会上致开幕词
   </div>
  <p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
	<script>
    function getSelect(){
      return getSelection().toString();  //返回一个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 cocument.getElengmentById('nav_menu')
        menu.style.left=x+"px";
        menu.style.top=y+"px";
        menu.style.display=block;
      }else{
        menu.style.display=none;
      }
    }
     function copyText(){
      cocument.getElengmentById('nav_menu').style.display="none";
    }
    function copySearch(){
      if(getSelect()){
        window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect();
      }
      cocument.getElengmentById('nav_menu').style.display="none";
    }
  </script>	
   
</body>
</html>

运行实例 »

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

运行实例 »

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

3固定导航条

之前在做优酷页面的时候，最上边的导航条一直解决不了，现在可以用scollTop的值来控制它了；

实例

<!DOCTYPE html>
<html>
<head>
	<title>固定导航条</title>
	<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
  <style type="text/css">
    *{margin: 0;padding: 0;}
    #main{
      width: 100%;
      height: 70px;
      background: #ccc;
      line-height: 70px;
      text-align: center;
    }
    #box{
      width: 100%;
      height: 70px;
      background: #ccc;
      line-height: 50px;
      text-align: center;
      position: fixed;
      top: 0;
      display: none;
    }
    input{
      width: 700px;
      height: 40px;
      border: none;
      border-radius: 40px;
    }
    .main{
      height: 1500px;
      margin: 0 auto;
      background: skyblue;
    }

  </style>
</head>
<body>
    <div id="main"> <input type="" name=""></input>    </div>
    <div id="box"> <input type="" name=""></input>    </div>
    <div class="main"></div>
<script type="text/javascript">
  window.onload=function(){
    document.onscroll=function(){//onsroll滚动触发
      if(document.documentElement.scrollTop>300){ //匹配元素滚动的垂直位置
         document.getElementById('box').style.display="block";
      }else{
        document.getElementById('box').style.display="none";
      }

    }

  }

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

运行实例 »

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

4三级联动

心血的方法很实用，之前别处的难点刚好可以用到这个地方的知识；

//createElement() 方法通过指定名称创建一个元素

var shioption=document.createElement("option")

//修改value

shioption.setAttribute("value",arr[x+1][j])

shioption.innerHTML=arr[x+1][j];

//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点

shi.appendChild(shioption);

实例

<!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>
      <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);
    sheng.onchange=function(){
      that=this;  //临时储存
      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");
        shiOption.setAttribute("value",arr[x+1][j]);//修改value值
        shiOption.innerHTML=arr[x+1][j];
        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=1,len=arr[x+1][y].length;j<len;j++){
        var quOption=document.createElement("option");
        quOption.setAttribute("value",arr[x+1][y][j]);//修改value值
        quOption.innerHTML=arr[x+1][y][j];
        qu.appendChild(quOption);//子节点末尾插入节点
      }
    }

}
</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

0311前端知识

2019-03-13 18:00:42