JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】

学习地址:

  1. 谷粒学院——尚硅谷
  2. 哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】

目   录

P124 124.尚硅谷_JS基础_Navigator 41:16

Window 对象属性

P125 125.尚硅谷_JS基础_History 11:21

History 对象

P126 126.尚硅谷_JS基础_Location 11:44

Location 对象

P127 127.尚硅谷_JS基础_定时器简介 17:23

Screen 对象

Window 对象

setInterval():定时调用

clearInterval():关闭一个定时器

P128 128.尚硅谷_JS基础_切换图片练习 20:53

P129 129.尚硅谷_JS基础_修改div移动练习 10:21

P130 130.尚硅谷_JS基础_延时调用 05:47

P131 131.尚硅谷_JS基础_定时器的应用(一) 22:33

P132 132.尚硅谷_JS基础_定时器的应用(二) 17:11

P133 133.尚硅谷_JS基础_定时器的应用(三) 20:17

各自控制各自的定时器,互不干扰

obj.style[xxx]和obj.style.xxx

回调函数 callback()

P134 134.尚硅谷_JS基础_完成轮播图界面 34:49

P135 135.尚硅谷_JS基础_完成点击按钮切换图片 17:08


P124 124.尚硅谷_JS基础_Navigator 41:16

BOM

  • 浏览器对象模型。
  • BOM可以使我们通过JS来操作浏览器。
  • 在BOM中为我们提供了一组对象,用来完成对浏览器的操作。
  • BOM对象
  1. Window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象。
  2. Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器。
  3. Location:代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面。
  4. History:代表浏览器历史记录,可以通过该对象来操作浏览器的历史记录。由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页。而且该操作只在当次访问时有效。
  5. Screen:代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息。

这些BOM对象(全局对象)在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用。

Window 对象属性

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第1张图片  浏览器对象

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第2张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第3张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第4张图片

Navigator

  1. 代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器。
  2. 由于历史原因,Navigator对象中的大部分属性 都已经不能帮助我们识别浏览器了。
  3. 一般我们只会使用userAgent来判断浏览器的信息,userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容,不同的浏览器会有不同的userAgent。
  • 火狐的userAgent:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
  • Chrome的userAgent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
  • IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  • IE9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  • IE10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
  • IE11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko。在IE11中已经将微软和IE相关的标识都去除了,所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了。

!!:!取反,两个就是反反,但是会转为布尔类型。



	
		
		
		
	
	
	

P125 125.尚硅谷_JS基础_History 11:21

History 对象

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第5张图片

  1. length属性:获取到当成访问的链接数量
  2. back():回退到上一个页面,作用和浏览器的回退按钮一样
  3. forward():跳转下一个页面,作用和浏览器的前进按钮一样
  4. go():可以用来跳转到指定的页面

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第6张图片



	
		
		
		
	
	
		
		

History

去BOM

P126 126.尚硅谷_JS基础_Location 11:44

Location 对象

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第7张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第8张图片

  • Location:该对象中封装了浏览器的地址栏的信息。
  • assign():用来跳转到其他的页面,作用和直接修改location一样。
  • reload():用于重新加载当前页面,作用和刷新按钮一样。
  • replace():可以使用一个新的页面替换当前页面,调用完毕也会跳转页面。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第9张图片



	
		
		
		
	
	
		
		

Location

去BOM

P127 127.尚硅谷_JS基础_定时器简介 17:23

Screen 对象

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第10张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第11张图片

Window 对象

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第12张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第13张图片

setInterval():定时调用

clearInterval():关闭一个定时器

setInterval()

  • 定时调用
  • 可以将一个函数,每隔一段时间执行一次
  • 参数:1.回调函数,该函数会每隔一段时间被调用一次;2.每次调用间隔的时间,单位是毫秒。
  • 返回值:返回一个Number类型的数据,这个数字用来作为定时器的唯一标识。

clearInterval()

  • 可以用来关闭一个定时器,方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第14张图片



	
		
		
		
	
	
		

P128 128.尚硅谷_JS基础_切换图片练习 20:53

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第15张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第16张图片



	
		
		
		
	
	
		
		

P129 129.尚硅谷_JS基础_修改div移动练习 10:21

使用“定时器”解决方块移动卡顿问题。总思路:将方向、速度分开控制。键盘控制方向,速度由定时器控制。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第17张图片



	
		
		
		
		
	
	
		

P130 130.尚硅谷_JS基础_延时调用 05:47

延时调用

  • 延时调用一个函数不马上执行,而是隔一段时间以后再执行,而且只会执行一次。
  • 延时调用和定时调用的区别,定时调用会执行多次,而延时调用只会执行一次
  • 延时调用和定时调用实际上是可以互相代替的,在开发中可以根据自己需要去选择。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第18张图片

P131 131.尚硅谷_JS基础_定时器的应用(一) 22:33

parseInt():将字符串中的合法数字提取出来。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第19张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第20张图片  JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第21张图片



	
		
		
		
		
	
	
		
		

P132 132.尚硅谷_JS基础_定时器的应用(二) 17:11

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第22张图片



	
		
		
		
		
	
	
		
		
		

P133 133.尚硅谷_JS基础_定时器的应用(三) 20:17

各自控制各自的定时器,互不干扰

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第23张图片

obj.style[xxx]和obj.style.xxx

原文链接:https://www.jianshu.com/p/1e73b8e1b31d   常量用点,变量就用中括号。.有限制,[]可以操作特殊属性名。

回调函数 callback()

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第24张图片



	
		
		
		
		
		
	
	
		
		
		
		
		

P134 134.尚硅谷_JS基础_完成轮播图界面 34:49

overflow:hidden以后,横向超出框的部分被裁剪以后就不占其他元素的位置了。

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第25张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第26张图片

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第27张图片

P135 135.尚硅谷_JS基础_完成点击按钮切换图片 17:08

JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】_第28张图片

可以直接在css样式ul列表里面加个transition: all .5s(.5s为过度动画时间,自己可以随便改)。



	
		
		
		
		
		
		
	
	
		
		

加油,冲冲冲~   相信自己,改善自己~

你可能感兴趣的:(JavaScript,javascript,bom,navigator,History,Location)