渡一教育公开课web前端开发JavaScript精英课学习笔记（十四）Window对象

最新推荐文章于 2019-04-07 00:08:55 发布

じоνё靁〃

最新推荐文章于 2019-04-07 00:08:55 发布

阅读量1.6k

点赞数

分类专栏： JavaScript、CSS、HTML

本文链接：https://blog.csdn.net/jingliuting/article/details/87306536

版权

JavaScript、CSS、HTML 专栏收录该内容

38 篇文章 9 订阅

订阅专栏

获取元素位置信息

<!DOCTYPE html>
<html lang="en">
<body>
<div style ="width:1000px;height:2000px">
  <div style ="position:absolute; width:300px;height:300px;border:1px solid #000;margin-top:100px;margin-left:100px;">
    <div class='demo' style ="width:100px;height:100px;position: absolute;margin-left:100px;margin-top:100px;background-color:red">
    </div>
  </div>
</div>
<script type = "text/javascript">
  //获取滚动条位置
  function getScrollOffset(){
    if(window.pageXOffset){
      //标准方法
      return {
        x:window.pageXOffset,
        y:window.pageYOffset
      }
    }else{
      //兼容IE
      return{
        x:document.body.scrollLeft + document.documentElement.scrollLeft,
        y:document.body.scrollTop + document.documentElement.scrollTop
      }
    }
  }
  //获取可视区窗口大小,未验证
  function getViewportOffset(){
    if(window.innerwidth){
      return {
        x:window.innerWidth,
        y:window.innerHeight
      }
    }else{
      //浏览器有两种渲染模式：标准模式、怪异/混杂模式（兼容以前的版本）
      //启用混杂/怪异模式,文档头不写<!DOCTYPE html>
      //浏览器渲染模式：混杂模式BackCompat，标准模式CSS1Compat
      if(document.compatMode =='BackCompat'){
        return{
          x:document.body.clientWidth,
          x:document.body.clientHeight
        }
      }else{
        return{
        x:document.documentElement.clientWidth,
        y:document.documentElement.clientHeight
      }
      }
    }
  }
  //查看元素的尺寸
  function getElementSize(){
    var div = document.getElementsByClassName('demo')[0];
    //元素尺寸
    console.log(div.offsetWidth);
    console.log(div.offsetHeight);
    //元素位置，相对于有定位父级的距离,设置父级div的position属性查看效果。
    console.log(div.offsetTop);
    console.log(div.offsetLeft);
    //获取有定位的父级元素
    console.log(div.offsetParent);
  }
  //求元素相对于文档的坐标
  function getElementPosition(){
    var div = document.getElementsByClassName('demo')[0];
    var x = div.offsetLeft;
    var y = div.offsetTop;
    var parent = div.offsetParent;
    while (parent) {
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent = parent.offsetParent;
    }
    return {x:x,y:y}
  }
</script>
</body>
</html>

window滚动条

scroll(x,y);scrollTo(x,y);设置滚动条的位置（实现展开、收起）.

scrollBy(x,y);设置滚动条滚动距离.

阅读器简单实现（还不能保持坐标点）

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    .start{
      width:80px;
      height:80px;
      right:50px;
      bottom:150px;
      border-radius:50%;
      position:fixed;
      background-color:orange;
      text-align:center;
      line-height: 80px;
      font-size:32px;
      font-weight:bold;
      color:white;
      opacity: 0.5;
    }
    .stop{
      width:80px;
      height:80px;
      right:50px;
      bottom:50px;
      border-radius:50%;
      position:fixed;
      background-color:green;
      text-align:center;
      line-height: 80px;
      font-size:32px;
      font-weight:bold;
      color:white;
      opacity: 0.5;
    }
    .top{
      width:80px;
      height:80px;
      right:50px;
      bottom:250px;
      border-radius:50%;
      position:fixed;
      background-color:blue;
      text-align:center;
      line-height: 80px;
      font-size:32px;
      font-weight:bold;
      color:white;
      opacity: 0.5;
    }
    </style>
  </head>
<body>
<div style ="width:300px;margin:auto">
  JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
  在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1] 
  为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
  JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 [3] 
  是一种解释性脚本语言（代码不进行预编译）。 [4] 
  主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 [4] 
  可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 [4] 
  跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
  Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。 [5] 
  它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。 [7] 
  Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。 [8] 
  发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
  JavaScript脚本语言具有以下特点:
  (1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
  (2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
  (3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
  (4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
  (5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。 [3] 
  不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。
  而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。
</div>
<div class='start' >开始</div>
<div class='stop'>暂停</div>
<div class='top'>重新</div>
<script type = "text/javascript">
  var start = document.getElementsByClassName("start")[0];
  var stop = document.getElementsByClassName('stop')[0];
  var top = document.getElementsByClassName('top')[0];
  var timer = -1;
  start.onclick = function(){
    if(timer < 0){
      timer = setInterval(function(){
        scrollBy(0,5);
      },100)
    }
  }
  stop.onclick = function(){
    clearInterval(timer);
    timer = -1;
  }
  top.onclick = function(){
    scrollTo(0,0);
  }
  
</script>
</body>
</html>

元素的style属性

style属性是一个类数组，展示的是行间样式。可间接改变CSS样式。碰到关键字样式前面加css，如cssFloat。复合属性建议拆解开设置。写入的值必须是字符串形式。

查询计算样式

window.getComputedStyle(ele,null);获取CSS样式的显示值，包括默认值。

<!DOCTYPE html>
<html>
  <head>
    <style>
    .orange{
      width:100px!important;
      height:10em;
      background-color:orange;
    }
    .yellow{
      width:100px!important;
      height:10em;
      background-color:red;
    }
    .blue{
      width:100px!important;
      height:10em;
      background-color:green;
    }
   .yellow::after{
      content:"";
      width:50px;
      height:50px;
      background-color:yellow;
      display:inline-block;
    }
    .blue::after{
      content:"";
      width:50px;
      height:50px;
      background-color:blue;
      display:inline-block;
    }
    </style>
  </head>
<body>
CSS样式属性使用 !important ，行间样式不起作用。
<div class='orange' style="width:200px;height:200px;position:absolute;left:0px"></div>
<script type = "text/javascript">
  var div = document.getElementsByTagName("div")[0];
  //修改div的样式和伪元素的样式。
  div.onclick = function(){
    if(div.className == "blue"){
      div.className = "yellow";
    }else{
      div.className = "blue";
    }
  }
  console.log(div.style.width);
  console.log(window.getComputedStyle(div,null).width);
  //window.getComputedStyle(div,null)获得的值是计算后的绝对值。如：height：10em 计算后为200px;
  //IE浏览器相似方法 div.currentSytle.
  console.log(window.getComputedStyle(div,null).height);
  console.log(window.getComputedStyle(div,null).backgroundColor);
//window.getComputedStyle(div,null)第二个参数作用获取伪元素样式。
  console.log(window.getComputedStyle(div,"after").width);
  //封装通用的getStyle方法
  function getStyle(elem,prop){
    if(window.getComputedStyle){
      return window.getComputedStyle(elem,null)[prop];
    }else{
      return elem.currentStyle[prop];
    }
  }
  //设置 div 的 left 属性值。
  setInterval(function(){
    div.style.left = parseInt(getStyle(div,"left")) + 10 + 'px'
  },100)
</script>
</body>
</html>

轮播图示例

<h1>轮播图</h1>
<style>
	*{
		margin:0;
		padding:0;
	}
	a{
		text-decoration:none;
	}
	.container{
		position:relative;
		width:600px;
		height:200px;
		margin:100px auto 0 auto;
		box-shadow:0 0 5px green;
		overflow:hidden; /* 超出容器部分隐藏 */
	}
	.wrap{
		position:absolute;
		width:4200px;
		height:200px;
		z-index:1;
		transition:left 1s;/* 设置改变left时使用过渡效果 */
	}
	.container .wrap img{
		float:left;
		width:600px;
		height:200px;
	}
	.container .buttons{ /* 序号标签容器 */
		position:absolute;
		right:220px;
		bottom:20px;
		width:150px;
		height:10px;
		z-index:2;
	}
	.container .buttons span{/* 序号标签样式 */
		margin-left:5px;
		display:inline-block;
		width:20px;
		height:20px;
		border-radius: 50%;
		background-color:green;
		text-align:center;
		color:white;
		cursor:pointer;
	}
	.container .buttons span.on{/* 序号标签激活时改变的样式 */
		background-color:red;
	}
	.container .arrow{ /* 翻页按钮的样式  */
		position:absolute;
		top:35%;
		color:white;
		padding:0px 14px;
		border-radius:50%;
		font-size:50px;
		z-index:2;
		display:none; /* 默认不显示 */
	}
	.container .arrow_left{
		left:10px;
	}
	.container .arrow_right{
		right:10px;
	}
	.container:hover .arrow{ /* 鼠标移动到容器时显示翻页按钮  */
		display:block;
	}
	.container .arrow:hover{/* 鼠标移动到翻页按钮时改变背景色  */
		background-color:rgba(0,0,0,0.2);
	}
</style>
<div class='container'>
	<div class="wrap" style = 'left:0px;'>
		<img src="imgs/1.jpg" >
		<img src="imgs/2.jpg" >
		<img src="imgs/3.jpg"  >
		<img src="imgs/4.jpg"  >
		<img src="imgs/5.jpg"  >
	</div>
	<div class="buttons">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
	</div>
	<a href="javascript:;" class='arrow arrow_left'>&lt;</a>
	<a href="javascript:;" class="arrow arrow_right">&gt;</a>
</div>
<script type = "text/javascript">
	var container = document.querySelector('.container');
	var wrap = document.querySelector(".wrap");
	var next = document.querySelector('.arrow_right');
	var prev = document.querySelector('.arrow_left');
	var dots = document.getElementsByTagName('span');
	var timer = 0;
	var dotIndex = 0;
	next.onclick = function(){
		nextPic();
	}
	prev.onclick = function(){
		dotIndex --;
		if(dotIndex < 0){
			dotIndex = 4;
		}
		setDotsStyle();
		var newLeft = parseInt(wrap.style.left) + 600;
		if(newLeft > 0){
			newLeft = -2400;
		}
		wrap.style.left = newLeft + 'px';
	}

	container.onmouseenter = function(){
		clearInterval(timer);
	}
	container.onmouseleave = function(){
		autoPlay();
	}
	for(var i = 0 ; i < dots.length ; i ++){
		//这里要使用立即执行函数和闭包，保证点击事件执行时 idx 是正确的值。
		(function(idx){
			dots[idx].onclick = function(){
				wrap.style.left = - idx * 600 + 'px';
				dotIndex = idx;
				setDotsStyle();
			}
		}(i));
	}
	function nextPic(){
		dotIndex ++;
		if(dotIndex > 4){
			dotIndex = 0;
		}
		setDotsStyle();
		var newLeft = parseInt(wrap.style.left) - 600;
		if(newLeft < -2400 ){
			newLeft = 0;
		}
		wrap.style.left = newLeft + 'px';
	}
	function autoPlay(){
		timer = setInterval(function(){
			nextPic();
		},2000)
	}
	function setDotsStyle(){
		for(var i = 0; i < dots.length ; i ++){
			dots[i].className = "";
		}
		dots[dotIndex].className = "on";
	}
	setDotsStyle();
	autoPlay();

 </script>

じоνё靁〃

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
渡一教育公开课web前端开发JavaScript精英课学习笔记（十四）Window对象

获取元素位置信息&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;body&gt;&lt;div style ="width:1000px;height:2000px"&gt; &lt;div style ="position:absolute; width:300px;height:300px;border:1px solid
复制链接

扫一扫