• JavaScript学习笔记——BOM

    相关知识点

    什么是BOM

    • ECMAScript无疑是JavaScript的核心，但是要想在浏 览器中使用JavaScript，那么BOM（浏览器对象模型） 才是真正的核心。

    • BOM 提供了很多对象，用于访问浏览器的功能，这些 功能与任何网页内容无关。

    • BOM将浏览器中的各个部分转换成了一个一个的对象， 我们通过修改这些对象的属性，调用他们的方法，从而 控制浏览器的各种行为。

    window对象

    • window对象是BOM的核心，它表示一个浏览器的实例。

    • 在浏览器中我们可以通过window对象来访问操作浏览 器，同时window也是作为全局对象存在的。

    • 全局作用域： – window对象是浏览器中的全局对象，因此所有在全局作用 域中声明的变量、对象、函数都会变成window对象的属性 和方法。

    窗口大小

    • 浏览器中提供了四个属性用来确定窗口的

    大小： – 网页窗口的大小

    • innerWidth

    • innerHeight

    – 浏览器本身的尺寸

    • outerWidth

    • outerHeight 打开窗口

    • 使用 window.open() 方法既可以导航到一个 特定的 URL，也可以打开一个新的浏览器窗口。

    • 这个方法需要四个参数：

    – 需要加载的url地址

    – 窗口的目标

    – 一个特性的字符串

    – 是否创建新的历史记录

    超时调用

    • 超时调用：

    – setTimeout() – 超过一定时间以后执行指定函数 – 需要连个参数：

    • 要执行的内容

    • 超过的时间

    • 取消超时调用 – clearTimeout()

    • 超时调用都是在全局作用域中执行的。

    间歇调用

    • 间歇调用： – setInterval() – 每隔一段时间执行指定代码

    – 需要两个参数：

    • 要执行的代码 • 间隔的时间 • 取消间隔调用： – clearInterval() 系统对话框

    • 浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。

    • 它们的外观由操作系统及（或）浏览器设置决 定，而不是由 CSS 决定。

    • 显示系统对话框时会导致程序终止，当关闭对 话框程序会恢复执行。

    alert

    • alert()接收一个字符串并显示给用户。调用 alert()方法会向用户显示一个包含一个确认 按钮的对话框。

    • 例如： – alert("Hello World"); confirm • confirm和alert类似，只不过confirm弹出的对话 框有一个确认和取消按钮。用户可以通过按钮来 确认是否执行操作。

    • 例如： – confirm('你确定吗？');

    • 这个函数的执行会返回一个布尔值，如果选择确 定则返回true，如果点击取消则返回false。

    prompt

    • prompt会弹出一个带输入框的提示框，并 可以将用户输入的内容返回。

    • 它需要两个值作为参数： – 显示的提示文字 – 文本框中的默认值

    • 例子： – prompt('你的年龄是？','18');

    location对象

    • location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导 航功能。

    • href属性： – href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面。

    • assign() 方法 – 所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中

    • replace()方法 – 功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。

    • reload() 方法 – 用于强制刷新当前页面

    navigator对象

    • navigator 对象包含了浏览器的版本、浏览 器所支持的插件、浏览器所使用的语言等 各种与浏览器相关的信息。

    • 我们有时会使用navigator的userAgent属 性来检查用户浏览器的版本。 screen对象

    • screen 对象基本上只用来表明客户端的能 力，其中包括浏览器窗口外部的显示器的 信息，如像素宽度和高度等。

    • 该对象作用不大，我们一般不太使用。

    history对象

    • history 对象保存着用户上网的历史记录， 从窗口被打开的那一刻算起。

    • go() – 使用 go() 方法可以在用户的历史记录中任意跳 转，可以向后也可以向前。

    • back() – 向后跳转

    • forward() – 向前跳转 document

    • document对象也是window的一个属性， 这个对象代表的是整个网页的文档对象。

    • 我们对网页的大部分操作都需要以 document对象作为起点。

    • 关于document对象的内容，我们后边还要 具体讲解。

    BOM

                 *  - 浏览器对象模型

                 *  - BOM可以使我们通过JS来操作浏览器

                 *  - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作

                 *  - BOM对象

                 *      Window

                 *          - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象

                 *      Navigator

                 *          - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

                 *      Location

                 *          - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

                 *      History

                 *          - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

                 *              由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页

                 *              而且该操作只在当次访问时有效

                 *      Screen

                 *          - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

                 *

                 *

                 *      这些BOM对象在浏览器中都是作为window对象的属性保存的，

                 *          可以通过window对象来使用，也可以直接使用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7.  
    8. 			//console.log(navigator);
    9. 			//console.log(location);
    10. 			//console.log(history);
    11. 			
    12. 			/*
    13. 			 * Navigator
    14. 			 * 	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
    15. 			 * 	- 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
    16. 			 * 	- 一般我们只会使用userAgent来判断浏览器的信息，
    17. 			 * 		userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
    18. 			 * 		不同的浏览器会有不同的userAgent
    19. 			 * 
    20. 			 * 火狐的userAgent
    21. 			 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
    22. 			 * 
    23. 			 * Chrome的userAgent
    24. 			 *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
    25. 			 * 
    26. 			 * IE8
    27. 			 * 	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)
    28. 			 * 
    29. 			 * IE9
    30. 			 * 	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)
    31. 			 * 
    32. 			 * IE10
    33. 			 * 	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)
    34. 			 * 
    35. 			 * IE11
    36. 			 * 	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
    37. 			 * 	- 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
    38. 			 */
    39. 			
    40. 			//alert(navigator.appName);
    41. 			
    42. 			var ua = navigator.userAgent;
    43. 			
    44. 			console.log(ua);
    45. 			
    46. 			if(/firefox/i.test(ua)){
    47. 				alert("你是火狐！！！");
    48. 			}else if(/chrome/i.test(ua)){
    49. 				alert("你是Chrome");
    50. 			}else if(/msie/i.test(ua)){
    51. 				alert("你是IE浏览器~~~");
    52. 			}else if("ActiveXObject" in window){
    53. 				alert("你是IE11，枪毙了你~~~");
    54. 			}
    55. 			
    56. 			/*
    57. 			 * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
    58. 			 * 比如：ActiveXObject
    59. 			 */
    60. 			/*if("ActiveXObject" in window){
    61. 				alert("你是IE，我已经抓住你了~~~");
    62. 			}else{
    63. 				alert("你不是IE~~~");
    64. 			}*/
    65. 			
    66. 			/*alert("ActiveXObject" in window);*/
    67. 			
    68. 			
    69. 			
    70. 		script>
    71. 	head>
    72. 	<body>
    73. 		
    74. 	body>
    75. html>

     History

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 			/*
    8. 			 * History
    9. 			 * 	- 对象可以用来操作浏览器向前或向后翻页
    10. 			 */
    11. 			window.onload = function(){
    12. 				
    13. 				//获取按钮对象
    14. 				var btn = document.getElementById("btn");
    15. 				
    16. 				btn.onclick = function(){
    17. 					/*
    18. 					 * length
    19. 					 * 	- 属性，可以获取到当成访问的链接数量
    20. 					 */
    21. 					//alert(history.length);
    22. 					
    23. 					/*
    24. 					 * back()
    25. 					 * 	- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
    26. 					 */
    27. 					//history.back();
    28. 					
    29. 					/*
    30. 					 * forward()
    31. 					 * 	- 可以跳转下一个页面，作用和浏览器的前进按钮一样
    32. 					 */
    33. 					//history.forward();
    34. 					
    35. 					/*
    36. 					 * go()
    37. 					 * 	- 可以用来跳转到指定的页面
    38. 					 * 	- 它需要一个整数作为参数
    39. 					 * 		1:表示向前跳转一个页面 相当于forward()
    40. 					 * 		2:表示向前跳转两个页面
    41. 					 * 		-1:表示向后跳转一个页面
    42. 					 * 		-2:表示向后跳转两个页面
    43. 					 */
    44. 					history.go(-2);
    45. 				};
    46. 				
    47. 			};
    48. 			
    49. 		script>
    50. 	head>
    51. 	<body>
    52. 		
    53. 		<button id="btn">点我一下button>
    54. 		
    55. 		<h1>Historyh1>
    56. 		
    57. 		<a href="01.BOM.html">去BOMa>
    58. 	body>
    59. html>

     Location

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 			/*
    8. 			 * Location
    9. 			 * 	- 该对象中封装了浏览器的地址栏的信息
    10. 			 */
    11. 			window.onload = function(){
    12. 				
    13. 				//获取按钮对象
    14. 				var btn = document.getElementById("btn");
    15. 				
    16. 				btn.onclick = function(){
    17. 					
    18. 					//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
    19. 					//alert(location);
    20. 					
    21. 					/*
    22. 					 * 如果直接将location属性修改为一个完整的路径，或相对路径
    23. 					 * 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录
    24. 					 */
    25. 					//location = "http://www.baidu.com";
    26. 					//location = "01.BOM.html";
    27. 					
    28. 					/*
    29. 					 * assign()
    30. 					 * 	- 用来跳转到其他的页面，作用和直接修改location一样
    31. 					 */
    32. 					//location.assign("http://www.baidu.com");
    33. 					
    34. 					/*
    35. 					 * reload()
    36. 					 * 	- 用于重新加载当前页面，作用和刷新按钮一样
    37. 					 * 	- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
    38. 					 */
    39. 					//location.reload(true);
    40. 					
    41. 					/*
    42. 					 * replace()
    43. 					 * 	- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
    44. 					 * 		不会生成历史记录，不能使用回退按钮回退
    45. 					 */
    46. 					location.replace("01.BOM.html");
    47. 					
    48. 				};
    49. 				
    50. 			};
    51. 			
    52. 		script>
    53. 	head>
    54. 	<body>
    55. 		
    56. 		<button id="btn">点我一下button>
    57. 		
    58. 		<h1>Locationh1>
    59. 		
    60. 		<input type="text" />
    61. 		<a href="01.BOM.html">去BOMa>
    62. 	body>
    63. html>

     定时调用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 			
    8. 			window.onload = function(){
    9. 				
    10. 				//获取count
    11. 				var count = document.getElementById("count");
    12. 				
    13. 				//使count中的内容，自动切换
    14. 				/*
    15. 				 * JS的程序的执行速度是非常非常快的
    16. 				 * 	如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
    17. 				 */
    18. 				/*for(var i=0 ; i<10000 ; i++){
    19. 					count.innerHTML = i;
    20. 					
    21. 					alert("hello");
    22. 				}*/
    23. 				
    24. 				/*
    25. 				 * setInterval()
    26. 				 * 	- 定时调用
    27. 				 * 	- 可以将一个函数，每隔一段时间执行一次
    28. 				 * 	- 参数：
    29. 				 * 		1.回调函数，该函数会每隔一段时间被调用一次
    30. 				 * 		2.每次调用间隔的时间，单位是毫秒
    31. 				 * 
    32. 				 * 	- 返回值：
    33. 				 * 		返回一个Number类型的数据
    34. 				 * 		这个数字用来作为定时器的唯一标识
    35. 				 */
    36. 				var num = 1;
    37. 				
    38. 				var timer = setInterval(function(){
    39. 					
    40. 					count.innerHTML = num++;
    41. 					
    42. 					if(num == 11){
    43. 						//关闭定时器
    44. 						clearInterval(timer);
    45. 					}
    46. 					
    47. 				},1000);
    48. 				
    49. 				//console.log(timer);
    50. 				
    51. 				//clearInterval()可以用来关闭一个定时器
    52. 				//方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
    53. 				//clearInterval(timer);
    54. 				
    55. 			};
    56. 			
    57. 			
    58. 		script>
    59. 	head>
    60. 	<body>
    61. 		<h1 id="count">h1>
    62. 	body>
    63. html>

      练习

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 			
    8. 			window.onload = function(){
    9. 				
    10. 				/*
    11. 				 * 使图片可以自动切换
    12. 				 */
    13. 				
    14. 				//获取img标签
    15. 				var img1 = document.getElementById("img1");
    16. 				
    17. 				//创建一个数组来保存图片的路径
    18. 				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    19. 				
    20. 				//创建一个变量，用来保存当前图片的索引
    21. 				var index = 0;
    22. 				
    23. 				//定义一个变量，用来保存定时器的标识
    24. 				var timer;
    25. 				
    26. 				//为btn01绑定一个单击响应函数
    27. 				var btn01 = document.getElementById("btn01");
    28. 				btn01.onclick = function(){
    29. 					
    30. 					/*
    31. 					 * 目前，我们每点击一次按钮，就会开启一个定时器，
    32. 					 * 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
    33. 					 * 	并且我们只能关闭最后一次开启的定时器
    34. 					 */
    35. 					
    36. 					//在开启定时器之前，需要将当前元素上的其他定时器关闭
    37. 					clearInterval(timer);
    38. 					
    39. 					/*
    40. 					 * 开启一个定时器，来自动切换图片
    41. 					 */
    42. 					timer = setInterval(function(){
    43. 						//使索引自增
    44. 						index++;
    45. 						//判断索引是否超过最大索引
    46. 						/*if(index >= imgArr.length){
    47. 							//则将index设置为0
    48. 							index = 0;
    49. 						}*/
    50. 						index %= imgArr.length;
    51. 						//修改img1的src属性
    52. 						img1.src = imgArr[index];
    53. 						
    54. 					},1000);
    55. 				};
    56. 				
    57. 				//为btn02绑定一个单击响应函数
    58. 				var btn02 = document.getElementById("btn02");
    59. 				btn02.onclick = function(){
    60. 					//点击按钮以后，停止图片的自动切换，关闭定时器
    61. 					/*
    62. 					 * clearInterval()可以接收任意参数，
    63. 					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
    64. 					 * 	如果参数不是一个有效的标识，则什么也不做
    65. 					 */
    66. 					clearInterval(timer);
    67. 					
    68. 				};
    69. 				
    70. 				
    71. 			};
    72. 			
    73. 		script>
    74. 	head>
    75. 	<body>
    76. 		
    77. 		<img id="img1" src="img/1.jpg"/>
    78. 		<br /><br />
    79. 		<button id="btn01">开始button>
    80. 		<button id="btn02">停止button>
    81. 	body>
    82. html>

    移动div练习

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			#box1{
    8. 				width: 100px;
    9. 				height: 100px;
    10. 				background-color: red;
    11. 				position: absolute;
    12. 			}
    13. 			
    14. 			
    15. 		style>
    16. 		
    17. 		<script type="text/javascript">
    18. 			
    19. 			//使div可以根据不同的方向键向不同的方向移动
    20. 			/*
    21. 			 * 按左键，div向左移
    22. 			 * 按右键，div向右移
    23. 			 * 。。。
    24. 			 */
    25. 			window.onload = function(){
    26. 				
    27. 					
    28. 				//定义一个变量，来表示移动的速度
    29. 				var speed = 10;
    30. 				
    31. 				//创建一个变量表示方向
    32. 				//通过修改dir来影响移动的方向
    33. 				var dir = 0;
    34. 				
    35. 				//开启一个定时器，来控制div的移动
    36. 				setInterval(function(){
    37. 					/*
    38. 					 * 37 左
    39. 					 * 38 上
    40. 					 * 39 右
    41. 					 * 40 下
    42. 					 */
    43. 					switch(dir){
    44. 						case 37:
    45. 							//alert("向左"); left值减小
    46. 							box1.style.left = box1.offsetLeft - speed + "px";
    47. 							break;
    48. 						case 39:
    49. 							//alert("向右");
    50. 							box1.style.left = box1.offsetLeft + speed + "px";
    51. 							break;
    52. 						case 38:
    53. 							//alert("向上");
    54. 							box1.style.top = box1.offsetTop - speed + "px";
    55. 							break;
    56. 						case 40:
    57. 							//alert("向下");
    58. 							box1.style.top = box1.offsetTop + speed + "px";
    59. 							break;
    60. 					}
    61. 				},30);
    62. 				
    63. 				
    64. 				
    65. 				//为document绑定一个按键按下的事件
    66. 				document.onkeydown = function(event){
    67. 					event = event || window.event;
    68. 					
    69. 					//当用户按了ctrl以后，速度加快
    70. 					if(event.ctrlKey){
    71. 						speed = 500;
    72. 					}else{
    73. 						speed = 10;
    74. 					}
    75. 					
    76. 					//使dir等于按键的值
    77. 					dir = event.keyCode;
    78. 				};
    79. 				
    80. 				//当按键松开时，div不再移动
    81. 				document.onkeyup = function(){
    82. 					//设置方向为0
    83. 					dir = 0;
    84. 				};
    85. 				
    86. 			};
    87. 			
    88. 			
    89. 		script>
    90. 	head>
    91. 	<body>
    92. 		<div id="box1">div>
    93. 	body>
    94. html>

    延时调用

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 			
    8. 			var num = 1;
    9. 			
    10. 			//开启一个定时器
    11. 			/*setInterval(function(){
    12. 				console.log(num++);
    13. 			},3000);*/
    14. 			
    15. 			
    16. 			/*
    17. 			 * 延时调用，
    18. 			 * 	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
    19. 			 * 
    20. 			 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
    21. 			 * 
    22. 			 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
    23. 			 */
    24. 			var timer = setTimeout(function(){
    25. 				console.log(num++);
    26. 			},3000);
    27. 			
    28. 			//使用clearTimeout()来关闭一个延时调用
    29. 			clearTimeout(timer);
    30. 			
    31. 		script>
    32. 	head>
    33. 	<body>
    34. 	body>
    35. html>

     定时器

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			
    8. 			*{
    9. 				margin: 0;
    10. 				padding: 0;
    11. 			}
    12. 			
    13. 			#box1{
    14. 				width: 100px;
    15. 				height: 100px;
    16. 				background-color: red;
    17. 				position: absolute;
    18. 				left: 0;
    19. 			}
    20. 			
    21. 		style>
    22. 		
    23. 		<script type="text/javascript">
    24. 			
    25. 			window.onload = function(){
    26. 				
    27. 				//获取box1
    28. 				var box1 = document.getElementById("box1");
    29. 				//获取btn01
    30. 				var btn01 = document.getElementById("btn01");
    31. 				
    32. 				//定义一个变量，用来保存定时器的标识
    33. 				var timer;
    34. 				
    35. 				//点击按钮以后，使box1向右移动（left值增大）
    36. 				btn01.onclick = function(){
    37. 					
    38. 					//关闭上一个定时器
    39. 					clearInterval(timer);
    40. 					
    41. 					//开启一个定时器，用来执行动画效果
    42. 					timer = setInterval(function(){
    43. 						
    44. 						//获取box1的原来的left值
    45. 						var oldValue = parseInt(getStyle(box1,"left"));
    46. 						
    47. 						//在旧值的基础上增加
    48. 						var newValue = oldValue + 1;
    49. 						
    50. 						//判断newValue是否大于800
    51. 						if(newValue > 800){
    52. 							newValue = 800;
    53. 						}
    54. 						
    55. 						//将新值设置给box1
    56. 						box1.style.left = newValue + "px";
    57. 						
    58. 						//当元素移动到800px时，使其停止执行动画
    59. 						if(newValue == 800){
    60. 							//达到目标，关闭定时器
    61. 							clearInterval(timer);
    62. 						}
    63. 						
    64. 						
    65. 					},30);
    66. 					
    67. 					
    68. 				};
    69. 				
    70. 			};
    71. 			
    72. 			
    73. 			/*
    74. 			 * 定义一个函数，用来获取指定元素的当前的样式
    75. 			 * 参数：
    76. 			 * 		obj 要获取样式的元素
    77. 			 * 		name 要获取的样式名
    78. 			 */
    79. 			function getStyle(obj , name){
    80. 				
    81. 				if(window.getComputedStyle){
    82. 					//正常浏览器的方式，具有getComputedStyle()方法
    83. 					return getComputedStyle(obj , null)[name];
    84. 				}else{
    85. 					//IE8的方式，没有getComputedStyle()方法
    86. 					return obj.currentStyle[name];
    87. 				}
    88. 				
    89. 			}
    90. 			
    91. 			
    92. 		script>
    93. 	head>
    94. 	<body>
    95. 		
    96. 		<button id="btn01">点击按钮以后box1向右移动button>
    97. 		
    98. 		<br /><br />
    99. 		
    100. 		<div id="box1">div>
    101. 		
    102. 		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
    103. 		
    104. 	body>
    105. html>

     定时器2

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			
    8. 			*{
    9. 				margin: 0;
    10. 				padding: 0;
    11. 			}
    12. 			
    13. 			#box1{
    14. 				width: 100px;
    15. 				height: 100px;
    16. 				background-color: red;
    17. 				position: absolute;
    18. 				left: 0;
    19. 			}
    20. 			
    21. 		style>
    22. 		
    23. 		<script type="text/javascript">
    24. 			
    25. 			window.onload = function(){
    26. 				
    27. 				//获取box1
    28. 				var box1 = document.getElementById("box1");
    29. 				//获取btn01
    30. 				var btn01 = document.getElementById("btn01");
    31. 				
    32. 				//获取btn02
    33. 				var btn02 = document.getElementById("btn02");
    34. 				
    35. 				
    36. 				//点击按钮以后，使box1向右移动（left值增大）
    37. 				btn01.onclick = function(){
    38. 					move(box1 , 800 , 10);
    39. 				};
    40. 				
    41. 				
    42. 				//点击按钮以后，使box1向左移动（left值减小）
    43. 				btn02.onclick = function(){
    44. 					move(box1 , 0 , 10);
    45. 				};
    46. 				
    47. 			};
    48. 			
    49. 			//定义一个变量，用来保存定时器的标识
    50. 			var timer;
    51. 			
    52. 			//尝试创建一个可以执行简单动画的函数
    53. 			/*
    54. 			 * 参数：
    55. 			 * 	obj:要执行动画的对象
    56. 			 * 	target:执行动画的目标位置
    57. 			 * 	speed:移动的速度(正数向右移动，负数向左移动)
    58. 			 */
    59. 			function move(obj , target ,speed){
    60. 				//关闭上一个定时器
    61. 				clearInterval(timer);
    62. 				
    63. 				//获取元素目前的位置
    64. 				var current = parseInt(getStyle(obj,"left"));
    65. 				
    66. 				//判断速度的正负值
    67. 				//如果从0 向 800移动，则speed为正
    68. 				//如果从800向0移动，则speed为负
    69. 				if(current > target){
    70. 					//此时速度应为负值
    71. 					speed = -speed;
    72. 				}
    73. 				
    74. 				//开启一个定时器，用来执行动画效果
    75. 				timer = setInterval(function(){
    76. 					
    77. 					//获取box1的原来的left值
    78. 					var oldValue = parseInt(getStyle(obj,"left"));
    79. 					
    80. 					//在旧值的基础上增加
    81. 					var newValue = oldValue + speed;
    82. 					
    83. 					//判断newValue是否大于800
    84. 					//从800 向 0移动
    85. 					//向左移动时，需要判断newValue是否小于target
    86. 					//向右移动时，需要判断newValue是否大于target
    87. 					if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){
    88. 						newValue = target;
    89. 					}
    90. 					
    91. 					//将新值设置给box1
    92. 					obj.style.left = newValue + "px";
    93. 					
    94. 					//当元素移动到0px时，使其停止执行动画
    95. 					if(newValue == target){
    96. 						//达到目标，关闭定时器
    97. 						clearInterval(timer);
    98. 					}
    99. 					
    100. 					
    101. 				},30);
    102. 			}
    103. 			
    104. 			
    105. 			/*
    106. 			 * 定义一个函数，用来获取指定元素的当前的样式
    107. 			 * 参数：
    108. 			 * 		obj 要获取样式的元素
    109. 			 * 		name 要获取的样式名
    110. 			 */
    111. 			function getStyle(obj , name){
    112. 				
    113. 				if(window.getComputedStyle){
    114. 					//正常浏览器的方式，具有getComputedStyle()方法
    115. 					return getComputedStyle(obj , null)[name];
    116. 				}else{
    117. 					//IE8的方式，没有getComputedStyle()方法
    118. 					return obj.currentStyle[name];
    119. 				}
    120. 				
    121. 			}
    122. 			
    123. 			
    124. 		script>
    125. 	head>
    126. 	<body>
    127. 		
    128. 		<button id="btn01">点击按钮以后box1向右移动button>
    129. 		<button id="btn02">点击按钮以后box1向左移动button>
    130. 		
    131. 		<br /><br />
    132. 		
    133. 		<div id="box1">div>
    134. 		
    135. 		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
    136. 		
    137. 	body>
    138. html>

     定时器3

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			
    8. 			*{
    9. 				margin: 0;
    10. 				padding: 0;
    11. 			}
    12. 			
    13. 			#box1{
    14. 				width: 100px;
    15. 				height: 100px;
    16. 				background-color: red;
    17. 				position: absolute;
    18. 				left: 0;
    19. 			}
    20. 			
    21. 			#box2{
    22. 				width: 100px;
    23. 				height: 100px;
    24. 				background-color: yellow;
    25. 				position: absolute;
    26. 				left: 0;
    27. 				top: 200px;
    28. 			}
    29. 			
    30. 		style>
    31. 		<script type="text/javascript" src="js/tools.js">script>
    32. 		<script type="text/javascript">
    33. 			
    34. 			window.onload = function(){
    35. 				
    36. 				//获取box1
    37. 				var box1 = document.getElementById("box1");
    38. 				//获取btn01
    39. 				var btn01 = document.getElementById("btn01");
    40. 				
    41. 				//获取btn02
    42. 				var btn02 = document.getElementById("btn02");
    43. 				
    44. 				
    45. 				//点击按钮以后，使box1向右移动（left值增大）
    46. 				btn01.onclick = function(){
    47. 					move(box1 ,"left", 800 , 20);
    48. 				};
    49. 				
    50. 				
    51. 				//点击按钮以后，使box1向左移动（left值减小）
    52. 				btn02.onclick = function(){
    53. 					move(box1 ,"left", 0 , 10);
    54. 				};
    55. 				
    56. 				
    57. 				//获取btn03
    58. 				var btn03 = document.getElementById("btn03");
    59. 				btn03.onclick = function(){
    60. 					move(box2 , "left",800 , 10);
    61. 				};
    62. 				
    63. 				//测试按钮
    64. 				var btn04 = document.getElementById("btn04");
    65. 				btn04.onclick = function(){
    66. 					//move(box2 ,"width", 800 , 10);
    67. 					//move(box2 ,"top", 800 , 10);
    68. 					//move(box2 ,"height", 800 , 10);
    69. 					move(box2 , "width" , 800 , 10 , function(){
    70. 						move(box2 , "height" , 400 , 10 , function(){
    71. 							move(box2 , "top" , 0 , 10 , function(){
    72. 								move(box2 , "width" , 100 , 10 , function(){
    73. 							
    74. 								});
    75. 							});
    76. 						});
    77. 					});
    78. 				};
    79. 			};
    80. 			
    81. 			//定义一个变量，用来保存定时器的标识
    82. 			/*
    83. 			 * 目前我们的定时器的标识由全局变量timer保存，
    84. 			 * 	所有的执行正在执行的定时器都在这个变量中保存
    85. 			 */
    86. 			//var timer;
    87. 			
    88. 			
    89. 			
    90. 			
    91. 		script>
    92. 	head>
    93. 	<body>
    94. 		
    95. 		<button id="btn01">点击按钮以后box1向右移动button>
    96. 		<button id="btn02">点击按钮以后box1向左移动button>
    97. 		<button id="btn03">点击按钮以后box2向右移动button>
    98. 		<button id="btn04">测试按钮button>
    99. 		
    100. 		<br /><br />
    101. 		
    102. 		<div id="box1">div>
    103. 		<div id="box2">div>
    104. 		
    105. 		<div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;">div>
    106. 		
    107. 	body>
    108. html>

    tool.js

    1. //尝试创建一个可以执行简单动画的函数
    2. /*
    3.  * 参数：
    4.  * 	obj:要执行动画的对象
    5.  * 	attr:要执行动画的样式，比如：left top width height
    6.  * 	target:执行动画的目标位置
    7.  * 	speed:移动的速度(正数向右移动，负数向左移动)
    8.  *  callback:回调函数，这个函数将会在动画执行完毕以后执行
    9.  */
    10. function move(obj, attr, target, speed, callback) {
    11. 	//关闭上一个定时器
    12. 	clearInterval(obj.timer);
    13.  
    14. 	//获取元素目前的位置
    15. 	var current = parseInt(getStyle(obj, attr));
    16.  
    17. 	//判断速度的正负值
    18. 	//如果从0 向 800移动，则speed为正
    19. 	//如果从800向0移动，则speed为负
    20. 	if(current > target) {
    21. 		//此时速度应为负值
    22. 		speed = -speed;
    23. 	}
    24.  
    25. 	//开启一个定时器，用来执行动画效果
    26. 	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
    27. 	obj.timer = setInterval(function() {
    28.  
    29. 		//获取box1的原来的left值
    30. 		var oldValue = parseInt(getStyle(obj, attr));
    31.  
    32. 		//在旧值的基础上增加
    33. 		var newValue = oldValue + speed;
    34.  
    35. 		//判断newValue是否大于800
    36. 		//从800 向 0移动
    37. 		//向左移动时，需要判断newValue是否小于target
    38. 		//向右移动时，需要判断newValue是否大于target
    39. 		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
    40. 			newValue = target;
    41. 		}
    42.  
    43. 		//将新值设置给box1
    44. 		obj.style[attr] = newValue + "px";
    45.  
    46. 		//当元素移动到0px时，使其停止执行动画
    47. 		if(newValue == target) {
    48. 			//达到目标，关闭定时器
    49. 			clearInterval(obj.timer);
    50. 			//动画执行完毕，调用回调函数
    51. 			callback && callback();
    52. 		}
    53.  
    54. 	}, 30);
    55. }
    56.  
    57. /*
    58.  * 定义一个函数，用来获取指定元素的当前的样式
    59.  * 参数：
    60.  * 		obj 要获取样式的元素
    61.  * 		name 要获取的样式名
    62.  */
    63. function getStyle(obj, name) {
    64.  
    65. 	if(window.getComputedStyle) {
    66. 		//正常浏览器的方式，具有getComputedStyle()方法
    67. 		return getComputedStyle(obj, null)[name];
    68. 	} else {
    69. 		//IE8的方式，没有getComputedStyle()方法
    70. 		return obj.currentStyle[name];
    71. 	}
    72.  
    73. }

     轮播图

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		
    7. 		<style type="text/css">
    8. 			*{
    9. 				margin: 0;
    10. 				padding: 0;
    11. 			}
    12. 			
    13. 			/*
    14. 			 * 设置outer的样式
    15. 			 */
    16. 			#outer{
    17. 				/*设置宽和高*/
    18. 				width: 520px;
    19. 				height: 333px;
    20. 				/*居中*/
    21. 				margin: 50px auto;
    22. 				/*设置背景颜色*/
    23. 				background-color: greenyellow;
    24. 				/*设置padding*/
    25. 				padding: 10px 0;
    26. 				/*开启相对定位*/
    27. 				position: relative;
    28. 				/*裁剪溢出的内容*/
    29. 				overflow: hidden;
    30. 			}
    31. 			
    32. 			/*设置imgList*/
    33. 			#imgList{
    34. 				/*去除项目符号*/
    35. 				list-style: none;
    36. 				/*设置ul的宽度*/
    37. 				/*width: 2600px;*/
    38. 				/*开启绝对定位*/
    39. 				position: absolute;
    40. 				/*设置偏移量*/
    41. 				/*
    42. 				 * 每向左移动520px，就会显示到下一张图片
    43. 				 */
    44. 				left: 0px;
    45. 			}
    46. 			
    47. 			/*设置图片中的li*/
    48. 			#imgList li{
    49. 				/*设置浮动*/
    50. 				float: left;
    51. 				/*设置左右外边距*/
    52. 				margin: 0 10px;
    53. 			}
    54. 			
    55. 			/*设置导航按钮*/
    56. 			#navDiv{
    57. 				/*开启绝对定位*/
    58. 				position: absolute;
    59. 				/*设置位置*/
    60. 				bottom: 15px;
    61. 				/*设置left值
    62. 				 	outer宽度  520
    63. 				 	navDiv宽度 25*5 = 125
    64. 				 		520 - 125 = 395/2 = 197.5
    65. 				 * */
    66. 				/*left: 197px;*/
    67. 			}
    68. 			
    69. 			#navDiv a{
    70. 				/*设置超链接浮动*/
    71. 				float: left;
    72. 				/*设置超链接的宽和高*/
    73. 				width: 15px;
    74. 				height: 15px;
    75. 				/*设置背景颜色*/
    76. 				background-color: red;
    77. 				/*设置左右外边距*/
    78. 				margin: 0 5px;
    79. 				/*设置透明*/
    80. 				opacity: 0.5;
    81. 				/*兼容IE8透明*/
    82. 				filter: alpha(opacity=50);
    83. 			}
    84. 			
    85. 			/*设置鼠标移入的效果*/
    86. 			#navDiv a:hover{
    87. 				background-color: black;
    88. 			}
    89. 		style>
    90. 		
    91. 		
    92. 		<script type="text/javascript" src="js/tools.js">script>
    93. 		<script type="text/javascript">
    94. 			window.onload = function(){
    95. 				//获取imgList
    96. 				var imgList = document.getElementById("imgList");
    97. 				//获取页面中所有的img标签
    98. 				var imgArr = document.getElementsByTagName("img");
    99. 				//设置imgList的宽度
    100. 				imgList.style.width = 520*imgArr.length+"px";
    101. 				
    102. 				/*设置导航按钮居中*/
    103. 				//获取navDiv
    104. 				var navDiv = document.getElementById("navDiv");
    105. 				//获取outer
    106. 				var outer = document.getElementById("outer");
    107. 				//设置navDiv的left值
    108. 				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
    109. 				
    110. 				//默认显示图片的索引
    111. 				var index = 0;
    112. 				//获取所有的a
    113. 				var allA = document.getElementsByTagName("a");
    114. 				//设置默认选中的效果
    115. 				allA[index].style.backgroundColor = "black";
    116. 				
    117. 				/*
    118. 				 	点击超链接切换到指定的图片
    119. 				 		点击第一个超链接，显示第一个图片
    120. 				 		点击第二个超链接，显示第二个图片
    121. 				 * */
    122. 				
    123. 				//为所有的超链接都绑定单击响应函数
    124. 				for(var i=0; ilength ; i++){
    125. 					
    126. 					//为每一个超链接都添加一个num属性
    127. 					allA[i].num = i;
    128. 					
    129. 					//为超链接绑定单击响应函数
    130. 					allA[i].onclick = function(){
    131. 						
    132. 						//获取点击超链接的索引,并将其设置为index
    133. 						index = this.num;
    134. 						
    135. 						//切换图片
    136. 						/*
    137. 						 * 第一张  0 0
    138. 						 * 第二张  1 -520
    139. 						 * 第三张  2 -1040
    140. 						 */
    141. 						//imgList.style.left = -520*index + "px";
    142. 						//设置选中的a
    143. 						setA();
    144. 						
    145. 						//使用move函数来切换图片
    146. 						move(imgList , "left" , -520*index , 20 , function(){
    147. 							
    148. 						});
    149. 						
    150. 					};
    151. 				}
    152. 				
    153. 				//创建一个方法用来设置选中的a
    154. 				function setA(){
    155. 					
    156. 					//遍历所有a，并将它们的背景颜色设置为红色
    157. 					for(var i=0 ; ilength ; i++){
    158. 						allA[i].style.backgroundColor = "";
    159. 					}
    160. 					
    161. 					//将选中的a设置为黑色
    162. 					allA[index].style.backgroundColor = "black";
    163. 				};
    164. 				
    165. 				
    166. 			};
    167. 			
    168. 		script>
    169. 	head>
    170. 	<body>
    171. 		
    172. 		<div id="outer">
    173. 			
    174. 			<ul id="imgList">
    175. 				<li><img src="img/1.jpg"/>li>
    176. 				<li><img src="img/2.jpg"/>li>
    177. 				<li><img src="img/3.jpg"/>li>
    178. 				<li><img src="img/4.jpg"/>li>
    179. 				<li><img src="img/5.jpg"/>li>
    180. 			ul>
    181. 			
    182. 			<div id="navDiv">
    183. 				<a href="javascript:;">a>
    184. 				<a href="javascript:;">a>
    185. 				<a href="javascript:;">a>
    186. 				<a href="javascript:;">a>
    187. 				<a href="javascript:;">a>
    188. 			div>
    189. 		div>
    190. 	body>
    191. html>

    完善

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		
    7. 		<style type="text/css">
    8. 			*{
    9. 				margin: 0;
    10. 				padding: 0;
    11. 			}
    12. 			
    13. 			/*
    14. 			 * 设置outer的样式
    15. 			 */
    16. 			#outer{
    17. 				/*设置宽和高*/
    18. 				width: 520px;
    19. 				height: 333px;
    20. 				/*居中*/
    21. 				margin: 50px auto;
    22. 				/*设置背景颜色*/
    23. 				background-color: greenyellow;
    24. 				/*设置padding*/
    25. 				padding: 10px 0;
    26. 				/*开启相对定位*/
    27. 				position: relative;
    28. 				/*裁剪溢出的内容*/
    29. 				overflow: hidden;
    30. 			}
    31. 			
    32. 			/*设置imgList*/
    33. 			#imgList{
    34. 				/*去除项目符号*/
    35. 				list-style: none;
    36. 				/*设置ul的宽度*/
    37. 				/*width: 2600px;*/
    38. 				/*开启绝对定位*/
    39. 				position: absolute;
    40. 				/*设置偏移量*/
    41. 				/*
    42. 				 * 每向左移动520px，就会显示到下一张图片
    43. 				 */
    44. 				left: 0px;
    45. 			}
    46. 			
    47. 			/*设置图片中的li*/
    48. 			#imgList li{
    49. 				/*设置浮动*/
    50. 				float: left;
    51. 				/*设置左右外边距*/
    52. 				margin: 0 10px;
    53. 			}
    54. 			
    55. 			/*设置导航按钮*/
    56. 			#navDiv{
    57. 				/*开启绝对定位*/
    58. 				position: absolute;
    59. 				/*设置位置*/
    60. 				bottom: 15px;
    61. 				/*设置left值
    62. 				 	outer宽度  520
    63. 				 	navDiv宽度 25*5 = 125
    64. 				 		520 - 125 = 395/2 = 197.5
    65. 				 * */
    66. 				/*left: 197px;*/
    67. 			}
    68. 			
    69. 			#navDiv a{
    70. 				/*设置超链接浮动*/
    71. 				float: left;
    72. 				/*设置超链接的宽和高*/
    73. 				width: 15px;
    74. 				height: 15px;
    75. 				/*设置背景颜色*/
    76. 				background-color: red;
    77. 				/*设置左右外边距*/
    78. 				margin: 0 5px;
    79. 				/*设置透明*/
    80. 				opacity: 0.5;
    81. 				/*兼容IE8透明*/
    82. 				filter: alpha(opacity=50);
    83. 			}
    84. 			
    85. 			/*设置鼠标移入的效果*/
    86. 			#navDiv a:hover{
    87. 				background-color: black;
    88. 			}
    89. 		style>
    90. 		
    91. 		
    92. 		<script type="text/javascript" src="js/tools.js">script>
    93. 		<script type="text/javascript">
    94. 			window.onload = function(){
    95. 				//获取imgList
    96. 				var imgList = document.getElementById("imgList");
    97. 				//获取页面中所有的img标签
    98. 				var imgArr = document.getElementsByTagName("img");
    99. 				//设置imgList的宽度
    100. 				imgList.style.width = 520*imgArr.length+"px";
    101. 				
    102. 				
    103. 				/*设置导航按钮居中*/
    104. 				//获取navDiv
    105. 				var navDiv = document.getElementById("navDiv");
    106. 				//获取outer
    107. 				var outer = document.getElementById("outer");
    108. 				//设置navDiv的left值
    109. 				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
    110. 				
    111. 				//默认显示图片的索引
    112. 				var index = 0;
    113. 				//获取所有的a
    114. 				var allA = document.getElementsByTagName("a");
    115. 				//设置默认选中的效果
    116. 				allA[index].style.backgroundColor = "black";
    117. 				
    118. 				/*
    119. 				 	点击超链接切换到指定的图片
    120. 				 		点击第一个超链接，显示第一个图片
    121. 				 		点击第二个超链接，显示第二个图片
    122. 				 * */
    123. 				
    124. 				//为所有的超链接都绑定单击响应函数
    125. 				for(var i=0; ilength ; i++){
    126. 					
    127. 					//为每一个超链接都添加一个num属性
    128. 					allA[i].num = i;
    129. 					
    130. 					//为超链接绑定单击响应函数
    131. 					allA[i].onclick = function(){
    132. 						
    133. 						//关闭自动切换的定时器
    134. 						clearInterval(timer);
    135. 						//获取点击超链接的索引,并将其设置为index
    136. 						index = this.num;
    137. 						
    138. 						//切换图片
    139. 						/*
    140. 						 * 第一张  0 0
    141. 						 * 第二张  1 -520
    142. 						 * 第三张  2 -1040
    143. 						 */
    144. 						//imgList.style.left = -520*index + "px";
    145. 						//设置选中的a
    146. 						setA();
    147. 						
    148. 						//使用move函数来切换图片
    149. 						move(imgList , "left" , -520*index , 20 , function(){
    150. 							//动画执行完毕，开启自动切换
    151. 							autoChange();
    152. 						});
    153. 						
    154. 					};
    155. 				}
    156. 				
    157. 				
    158. 				//开启自动切换图片
    159. 				autoChange();
    160. 				
    161. 				
    162. 				//创建一个方法用来设置选中的a
    163. 				function setA(){
    164. 					
    165. 					//判断当前索引是否是最后一张图片
    166. 					if(index >= imgArr.length - 1){
    167. 						//则将index设置为0
    168. 						index = 0;
    169. 						
    170. 						//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
    171. 						//通过CSS将最后一张切换成第一张
    172. 						imgList.style.left = 0;
    173. 					}
    174. 					
    175. 					//遍历所有a，并将它们的背景颜色设置为红色
    176. 					for(var i=0 ; ilength ; i++){
    177. 						allA[i].style.backgroundColor = "";
    178. 					}
    179. 					
    180. 					//将选中的a设置为黑色
    181. 					allA[index].style.backgroundColor = "black";
    182. 				};
    183. 				
    184. 				//定义一个自动切换的定时器的标识
    185. 				var timer;
    186. 				//创建一个函数，用来开启自动切换图片
    187. 				function autoChange(){
    188. 					
    189. 					//开启一个定时器，用来定时去切换图片
    190. 					timer = setInterval(function(){
    191. 						
    192. 						//使索引自增
    193. 						index++;
    194. 						
    195. 						//判断index的值
    196. 						index %= imgArr.length;
    197. 						
    198. 						//执行动画，切换图片
    199. 						move(imgList , "left" , -520*index , 20 , function(){
    200. 							//修改导航按钮
    201. 							setA();
    202. 						});
    203. 						
    204. 					},3000);
    205. 					
    206. 				}
    207. 				
    208. 				
    209. 			};
    210. 			
    211. 		script>
    212. 	head>
    213. 	<body>
    214. 		
    215. 		<div id="outer">
    216. 			
    217. 			<ul id="imgList">
    218. 				<li><img src="img/1.jpg"/>li>
    219. 				<li><img src="img/2.jpg"/>li>
    220. 				<li><img src="img/3.jpg"/>li>
    221. 				<li><img src="img/4.jpg"/>li>
    222. 				<li><img src="img/5.jpg"/>li>
    223. 				<li><img src="img/1.jpg"/>li>
    224. 			ul>
    225. 			
    226. 			<div id="navDiv">
    227. 				<a href="javascript:;">a>
    228. 				<a href="javascript:;">a>
    229. 				<a href="javascript:;">a>
    230. 				<a href="javascript:;">a>
    231. 				<a href="javascript:;">a>
    232. 			div>
    233. 		div>
    234. 	body>
    235. html>

     类的操作

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			
    8. 			.b1{
    9. 				width: 100px;
    10. 				height: 100px;
    11. 				background-color: red;
    12. 			}
    13. 			
    14. 			.b2{
    15. 				height: 300px;
    16. 				background-color: yellow;
    17. 			}
    18. 			
    19. 		style>
    20. 		
    21. 		<script type="text/javascript">
    22. 			
    23. 			window.onload = function(){
    24. 				//获取box
    25. 				var box = document.getElementById("box");
    26. 				//获取btn01
    27. 				var btn01 = document.getElementById("btn01");
    28. 				
    29. 				//为btn01绑定单击响应函数
    30. 				btn01.onclick = function(){
    31. 					//修改box的样式
    32. 					/*
    33. 					 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
    34. 					 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
    35. 					 */
    36. 					/*box.style.width = "200px";
    37. 					box.style.height = "200px";
    38. 					box.style.backgroundColor = "yellow";*/
    39. 					
    40. 					/*
    41. 					 * 我希望一行代码，可以同时修改多个样式
    42. 					 */
    43. 					
    44. 					//修改box的class属性
    45. 					/*
    46. 					 * 我们可以通过修改元素的class属性来间接的修改样式
    47. 					 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
    48. 					 * 	浏览器只需要重新渲染页面一次，性能比较好，
    49. 					 * 	并且这种方式，可以使表现和行为进一步的分离
    50. 					 */
    51. 					//box.className += " b2";
    52. 					//addClass(box,"b2");
    53. 					
    54. 					//alert(hasClass(box,"hello"));
    55. 					
    56. 					//removeClass(box,"b2");
    57. 					
    58. 					toggleClass(box,"b2");
    59. 				};
    60. 				
    61. 			};
    62. 			
    63. 			//定义一个函数，用来向一个元素中添加指定的class属性值
    64. 			/*
    65. 			 * 参数:
    66. 			 * 	obj 要添加class属性的元素
    67. 			 *  cn 要添加的class值
    68. 			 * 	
    69. 			 */
    70. 			function addClass(obj , cn){
    71. 				
    72. 				//检查obj中是否含有cn
    73. 				if(!hasClass(obj , cn)){
    74. 					obj.className += " "+cn;
    75. 				}
    76. 				
    77. 			}
    78. 			
    79. 			/*
    80. 			 * 判断一个元素中是否含有指定的class属性值
    81. 			 * 	如果有该class，则返回true，没有则返回false
    82. 			 * 	
    83. 			 */
    84. 			function hasClass(obj , cn){
    85. 				
    86. 				//判断obj中有没有cn class
    87. 				//创建一个正则表达式
    88. 				//var reg = /\bb2\b/;
    89. 				var reg = new RegExp("\\b"+cn+"\\b");
    90. 				
    91. 				return reg.test(obj.className);
    92. 				
    93. 			}
    94. 			
    95. 			/*
    96. 			 * 删除一个元素中的指定的class属性
    97. 			 */
    98. 			function removeClass(obj , cn){
    99. 				//创建一个正则表达式
    100. 				var reg = new RegExp("\\b"+cn+"\\b");
    101. 				
    102. 				//删除class
    103. 				obj.className = obj.className.replace(reg , "");
    104. 				
    105. 			}
    106. 			
    107. 			/*
    108. 			 * toggleClass可以用来切换一个类
    109. 			 * 	如果元素中具有该类，则删除
    110. 			 * 	如果元素中没有该类，则添加
    111. 			 */
    112. 			function toggleClass(obj , cn){
    113. 				
    114. 				//判断obj中是否含有cn
    115. 				if(hasClass(obj , cn)){
    116. 					//有，则删除
    117. 					removeClass(obj , cn);
    118. 				}else{
    119. 					//没有，则添加
    120. 					addClass(obj , cn);
    121. 				}
    122. 				
    123. 			}
    124. 			
    125. 		script>
    126. 	head>
    127. 	<body>
    128. 		
    129. 		<button id="btn01">点击按钮以后修改box的样式button>
    130. 		
    131. 		<br /><br />
    132. 		
    133. 		<div id="box" class="b1 b2">div>
    134. 	body>
    135. html>

     二级菜单

    1. html>
    2. <html>
    3.  
    4. 	<head>
    5. 		<meta charset="UTF-8">
    6. 		<title>二级菜单title>
    7. 		<style type="text/css">
    8. 			* {
    9. 				margin: 0;
    10. 				padding: 0;
    11. 				list-style-type: none;
    12. 			}
    13. 			
    14. 			a,img {
    15. 				border: 0;
    16. 				text-decoration: none;
    17. 			}
    18. 			
    19. 			body {
    20. 				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
    21. 			}
    22. 		style>
    23.  
    24. 		<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
    25. 		
    26. 		<script type="text/javascript" src="js/tools.js">script>
    27. 		<script type="text/javascript">
    28. 			window.onload = function(){
    29. 				
    30. 				/*
    31. 				 * 我们的每一个菜单都是一个div
    32. 				 * 	当div具有collapsed这个类时，div就是折叠的状态
    33. 				 * 	当div没有这个类是，div就是展开的状态
    34. 				 */
    35. 				
    36. 				/*
    37. 				 * 点击菜单，切换菜单的显示状态
    38. 				 */
    39. 				//获取所有的class为menuSpan的元素
    40. 				var menuSpan = document.querySelectorAll(".menuSpan");
    41. 				
    42. 				//定义一个变量，来保存当前打开的菜单
    43. 				var openDiv = menuSpan[0].parentNode;
    44. 				
    45. 				//为span绑定单击响应函数
    46. 				for(var i=0 ; ilength ; i++){
    47. 					menuSpan[i].onclick = function(){
    48. 						
    49. 						//this代表我当前点击的span
    50. 						//获取当前span的父元素
    51. 						var parentDiv = this.parentNode;
    52. 						
    53. 						//切换菜单的显示状态
    54. 						toggleMenu(parentDiv);
    55. 						
    56. 						
    57. 						//判断openDiv和parentDiv是否相同
    58. 						if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
    59. 							//打开菜单以后，应该关闭之前打开的菜单
    60. 							//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
    61. 							//addClass(openDiv , "collapsed");
    62. 							//此处toggleClass()不需要有移除的功能
    63. 							//toggleClass(openDiv , "collapsed");
    64. 							//切换菜单的显示状态
    65. 							toggleMenu(openDiv);
    66. 						}
    67. 						
    68. 						//修改openDiv为当前打开的菜单
    69. 						openDiv = parentDiv;
    70. 						
    71. 					};
    72. 				}
    73. 				
    74. 				/*
    75. 				 * 用来切换菜单折叠和显示状态
    76. 				 */
    77. 				function toggleMenu(obj){
    78. 					//在切换类之前，获取元素的高度
    79. 					var begin = obj.offsetHeight;
    80. 					
    81. 					//切换parentDiv的显示
    82. 					toggleClass(obj , "collapsed");
    83. 					
    84. 					//在切换类之后获取一个高度
    85. 					var end = obj.offsetHeight;
    86. 					
    87. 					//console.log("begin = "+begin +" , end = "+end);
    88. 					//动画效果就是将高度从begin向end过渡
    89. 					//将元素的高度重置为begin
    90. 					obj.style.height = begin + "px";
    91. 					
    92. 					//执行动画，从bengin向end过渡
    93. 					move(obj,"height",end,10,function(){
    94. 						//动画执行完毕，内联样式已经没有存在的意义了，删除之
    95. 						obj.style.height = "";
    96. 					});
    97. 						
    98. 				}
    99. 				
    100. 				
    101. 			};
    102. 			
    103. 			
    104. 		script>
    105. 		
    106. 	head>
    107.  
    108. 	<body>
    109.  
    110. 		<div id="my_menu" class="sdmenu">
    111. 			<div>
    112. 				<span class="menuSpan">在线工具span>
    113. 				<a href="#">图像优化a>
    114. 				<a href="#">收藏夹图标生成器a>
    115. 				<a href="#">邮件a>
    116. 				<a href="#">htaccess密码a>
    117. 				<a href="#">梯度图像a>
    118. 				<a href="#">按钮生成器a>
    119. 			div>
    120. 			<div class="collapsed">
    121. 				<span class="menuSpan">支持我们span>
    122. 				<a href="#">推荐我们a>
    123. 				<a href="#">链接我们a>
    124. 				<a href="#">网络资源a>
    125. 			div>
    126. 			<div class="collapsed">
    127. 				<span class="menuSpan">合作伙伴span>
    128. 				<a href="#">JavaScript工具包a>
    129. 				<a href="#">CSS驱动a>
    130. 				<a href="#">CodingForumsa>
    131. 				<a href="#">CSS例子a>
    132. 			div>
    133. 			<div class="collapsed">
    134. 				<span class="menuSpan">测试电流span>
    135. 				<a href="#">Current or nota>
    136. 				<a href="#">Current or nota>
    137. 				<a href="#">Current or nota>
    138. 				<a href="#">Current or nota>
    139. 			div>
    140. 		div>
    141. 	body>
    142. html>

     JSON

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		
    7. 		
    8. 		<script type="text/javascript" src="js/json2.js">script>
    9. 		<script type="text/javascript">
    10. 			
    11. 			/*
    12. 			 * JSON
    13. 			 * 	- JS中的对象只有JS自己认识，其他的语言都不认识
    14. 			 * 	- JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
    15. 			 * 		并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
    16. 			 * 	- JSON
    17. 			 * 		- JavaScript Object Notation JS对象表示法
    18. 			 * 		- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号
    19. 			 * 			其他的和JS语法一致
    20. 			 * 		JSON分类：
    21. 			 * 			1.对象 {}
    22. 			 * 			2.数组 []
    23. 			 * 
    24. 			 * 		JSON中允许的值：
    25. 			 * 			1.字符串
    26. 			 * 			2.数值
    27. 			 * 			3.布尔值
    28. 			 * 			4.null
    29. 			 * 			5.对象
    30. 			 * 			6.数组
    31. 			 */
    32. 			
    33. 			//创建一个对象
    34. 			
    35. 			
    36. 			var arr = '[1,2,3,"hello",true]';
    37. 			
    38. 			var obj2 = '{"arr":[1,2,3]}';
    39. 			
    40. 			var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]';
    41. 			
    42. 			/*
    43. 			 * 将JSON字符串转换为JS中的对象
    44. 			 * 	在JS中，为我们提供了一个工具类，就叫JSON
    45. 			 * 	这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON
    46. 			 */
    47. 			
    48. 			var json = '{"name":"孙悟空","age":18,"gender":"男"}';
    49. 			
    50. 			/*
    51. 			 * json --> js对象
    52. 			 * 	 JSON.parse()
    53. 			 * 		- 可以将以JSON字符串转换为js对象
    54. 			 * 		- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
    55. 			 */
    56. 			
    57. 			var o = JSON.parse(json);
    58. 			var o2 = JSON.parse(arr);
    59. 			
    60. 			//console.log(o.gender);
    61. 			//console.log(o2[1]);
    62. 			
    63. 			var obj3 = {name:"猪八戒" , age:28 , gender:"男"};
    64. 			
    65. 			
    66. 			/*
    67. 			 * JS对象 ---> JSON
    68. 			 * 	JSON.stringify()
    69. 			 * 		- 可以将一个JS对象转换为JSON字符串
    70. 			 * 		- 需要一个js对象作为参数，会返回一个JSON字符串
    71. 			 */
    72. 			
    73. 			var str = JSON.stringify(obj3);
    74. 			//console.log(str);
    75. 			
    76. 			/*
    77. 			 * JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
    78. 			 */
    79. 			
    80. 			
    81. 			var str3 = '{"name":"孙悟空","age":18,"gender":"男"}';
    82. 			
    83. 			JSON.parse(str3);
    84. 			
    85. 			
    86. 			
    87. 			
    88. 		script>
    89. 	head>
    90. 	<body>
    91. 	body>
    92. html>

    练习

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>title>
    6. 		<script type="text/javascript">
    7. 		
    8. 			var str = '{"name":"孙悟空","age":18,"gender":"男"}';
    9. 			
    10. 			/*
    11. 			 * eval()
    12. 			 * 	- 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
    13. 			 * 	- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
    14. 			 * 		如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
    15. 			 * 
    16. 			 * 	- eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，
    17. 			 * 		但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
    18. 			 */
    19. 			
    20. 			var str2 = "alert('hello');";
    21. 			
    22. 			var obj = eval("("+str+")");
    23. 			
    24. 			//console.log(obj);
    25. 			
    26. 			
    27. 			
    28. 		script>
    29. 	head>
    30. 	<body>
    31. 	body>
    32. html>
  • 相关阅读:
    对称加密和非对称加密以及CA证书
    《Linux运维实战：创建LVM挂载到指定目录》
    redis-6.2.7 集群安装3主3从
    Linux getopt函数的使用
    WPF 控件专题 GridSplitter详解
    【问题记录】一次由filter引发的血案，如何定位上游链路的问题，问题排查与定位思路分享
    think\queue 消息队列
    4.4——数据库和前后端身份认证
    AI二次开发C#图案颜色
    LVS-DR模式
  • 原文地址：https://blog.csdn.net/Vivien_CC/article/details/125966843