Javascript

2016年12月19日整理

JS基础

Chapter1

JS是一门运行在浏览器客户端的脚本编程语言，前台语言

组成部分

 1. ECMAscript	JS标准

 2. DOM			通过JS操作网页元素

 3. BOM			通过调用API操作浏览器

特点：封装，继承，多态

 1. 简单易用

 2. 基于对象

    编程中万事万物皆对象。

    相对的是：基于过程

 3. 解释执行（JS属于解释执行的语言）

使用范围

 1. 表单验证

 2. 轮播特效

 3. 游戏开发

JS书写位置非常*

行内式写法

一般采取的是外双内单的格式

 <button onclick="alert('你好吗')">点击我</button>

 <a href=”javascript: void(0);”></a>

内嵌式写法

 <script type="text/javascript">

 	...

 </script>

外链式写法

 <script type="text/javascript"  src="xxx.js">这面不能写任何代码</script>

页面中输入消息的几种方法
1. 在页面中以弹窗的形式输出消息
```
 alert(“信息”);

 早期用来配合js代码调试。
```
2. 页面输出消息显示，确定和取消按钮
```
 confirm(“消息”);

 一般和条件判断配合使用
```
3. 接收用户输入信息，得到的是字符串
```
 prompt(“信息”);
```
4. 在网页控制台显示消息的方式
```
 console.log("信息");
```
5. 直接在页面中输出消息，可以写上html标签
```
 document.write("信息");
```
代码注释
1. 单行注释 // 或者 <!--（不推荐）
2. 多行注释 /* */
  
  在写js代码过程中分号 “ ; ” 必须的写。

变量var

不需要给变量添加引号
变量名中不能有空格

变量的命名规范

只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字

 1. 不能使用纯数字或者以数字开头定义变量

 2. 不推荐使用汉字定义变量

 3. 不能使用纯特殊字符或者以特殊字符开头（"_"除外）定义变量

 4. 不能使用关键字定义变量

 5. 不推荐使用保留字定义变量

 6. JS中是严格区分字母大小写

变量的作用域

根据变量的作用范围,可以分为全局变量和局部变量

全局变量

 1. 在最外层声明的变量

 2. 隐式的全局变量: 在函数体内部，但是没有声明var的变量也是全局变量

局部变量
```
 1. 在函数体内部声明的变量
```

数据类型

简单数据类型

 1. number		数字类型

 2. string		字符串类型

    “直接量”也称为“字面量”，简单的直接量有2种：数字、字符串

 3. boolean		布尔类型

 4. undefined	变量未初始化

复杂数据类型
```
 1. object	对象

 2. Array	数组
```

数字类型（number）：所有的数字赋值给以变量，那么该变量的数据类型就是数字类型

分类
```
 1. 小数

 2. 负数

 3. 正数
```

取值范围

 能表示的最大值是±1.7976931348623157乘以10的308次方

 能表示的最小值是±5 乘以10的-324次方

表示方式

 1. 十进制表示法

 2. 十六进制表示法

 	以0x开头 数字0-9 和 a(A)-f(F)

 3. 八进制表示法

 	以数字0开头   0-7之间的组合。

字符串类型：所有用双引号或者单引号包含起来的都是字符串类型
1. 转义字符
```
 \"		转双引号

 \'		转单引号

 \r		回车

 \n		换行
```

布尔数据类型（boolean）

 true

 false

 数据类型转换中：数字1代表true，数字0代表false

比较运算符 > < >= <=

比较运算符最后的结果为： true 和false
undefined 变量未初始化

定义了变量，但是没有过给变量进行赋值
变量取值为null的时候：该变量的引用为空，内存中不存在该值
数据类型的判断：typeof(变量)
算术运算符、算数运算符
```
+，如果加号两边都是数值，此时是加。否则，就是连字符，可以连接字符串

-

*

/

%   取余（获取余数）

()  优先级
```
1. 加运算
  1. 两个数字类型变量相加，结果为数字类型
  2. 一个数字类型和一个字符串类型变量相加，最后结果为字符串，加号起的是一个连接的作用。
2. 减运算
  1. 如果两个数字类型的变量相减，最后的结果为数字类型
  2. 如果一个数字类型的变量和一个数字的字符串类型的变量相减，最后结果为数字类型
  3. 如果一个数字类型的变量和一个非数字类型的变量相减，最后结果为NaN
  4. NaN: not a number （不是一个数字）
    
    NaN的数据类型属于number类型。
3. 除运算
  1. 如果两个数字类型的变量相除，最后结果为数字类型
  2. 如果一个数字类型的变量和一个数字的字符串变量相除，最后结果为数字类型
  3. 如果一个将数字0作为除数，得出的结果是infinity（无穷大）
    
    infinity的数据类型属于number类型
4. 取余
  1. 获取最后结果的余数
5. 优先级()
  1. 有括号先计算括号里面的数据
带操作的赋值的运算符

Chapter2

Date用法

getTime() 返回累计毫秒数(从1970/1/1午夜)

getMilliseconds() 获取当前的毫秒

getYear()返回的值不总是4位的数字，对于介于1900与1999之间的年份，getYear()方法返回两位数字。

对于1900与1999之后的年份，则返回4位数字

从ECMAscript v3开始，javascript就不不使用该方法，改用getFullYear()
```
 // 得到当前的距离1970.1.1的秒数

 var date  = new Date();  // 声明

 console.log(date.getTime());  // 提倡使用的

 console.log(date.valueOf());

 //直接使用Date

 console.log(Date.now());

 console.log(+new Date());
```

Math对象

Math.ceil() 天花板函数

 返回一个数字的整数部分。对该数字进行向上舍入。

 注意：该方法不会对数字进行四舍五入运算。

Math.floor() 地板函数

 返回一个数字的整数部分。对该数字进行向下舍入

Math.round(x)

 对数字进行四舍五入运算，最后的结果为整数

Math.max(x,y)
Math.min(x,y)
Math.random()
```
 返回0-1之间的随机数
```
Math.pow(x,y)
```
 返回x值的y次方
```
Math.sqrt(x)
```
 返回x的开根号
```

数据类型转换

隐式类型转换

将变量参与到程序运算中，程序将变量进行类型转换（不是程序员直接进行的类型转换）

强制类型转换

将数字转换为字符串

 1. 方法：String(number)

 2. number.toString(进制/基数);默认是10进制

 2. number + ""

将字符串转换为数字

 1. 利用 -  *  / 都可以转换

 2. Number() 可以将数字类型的字符串转换为数字

 	1. 如果是数字类型的字符串，最后的结果保留的原数据，不会对数字进行四舍五入运算

 	2. 如果是非数字类型的字符串，最后结果为NaN

 3. parseInt(值, 进制)（默认是十进制）

 	parseInt带有自动净化的功能，会清除字符串后面的不是数字类型的字符。自动带有截断小数功能

  	1. 如果是数字类型的字符串，最后的结果只保留数字的整数部分，不会进行四舍五入运算

  	2. 如果在数字后加上非数字的字符，也可以转换成功

 	3. 非数字类型的字符串转换后的结果为NaN

 4. parseFloat()

 	1. 如果是数字类型的字符串，最后的结果保留原数据，不会对数字进行四舍五入运算

 	2. 如果在数字后加上非数字的字符，也可以转换成功

将其他类型转换为Boolean类型

 1. !!number

 2. Boolean()

 	1. false、0、undefined 、null、"" 为 false

 	2. true、1、"somestring"、[Object]  为 true

逻辑运算符
```
 或运算（||）

 且运算（&&）

 非运算（!）
```
1. 逻辑运算的前提：必须是两个boolean类型的结果进行运算
2. 或运算：一真则真，相当于并联电路
  1. 只有一个结果为true,最后的结果为true
  2. 两个结果都为false,最后的结果为false
3. 且运算：一假则假，相当于串联电路
  1. 只有一个结果为false ,最后的结果都为false
  2. 只有两个结果都为true的时候，最后的结果才为true
4. 非运算
  1. 一个结果为false ,非运算后结果为true
  2. 一个结果为true，非运算后结果为false
等号运算符
1. "=" 赋值运算符
2. '==" 判断是否相同
  
  判断变量是否相同，只判断变量的内容是否相同，与变量的数据类型无关。
3. "===" 判断是否相同
  
  判断变量是否相同，除了判断变量的内容还要判断变量的数据类型是否一致。
4. "!=" 不相等
  
  判断内容是否不相同，不考虑数据类型
5. "!==" 不相等
  
  判断的是内容和数据类型是否不相同

逗号运算符","：可以将变量进行集体声明

 Var a = 10, b = 20;

 等价于

 Var a = 10;

 Var b = 20;

选择语句、条件判断语句，如果else内部没有执行的语法，else部分可以省略

 if(条件表达式) {

 	如果结果为true,执行该处代码，后面的代码不再执行

 } else if (条件表达式) {

 	如果结果为true,执行该处代码，后面的代码不再执行

 } else if (条件表达式) {

 	如果结果为true,执行该处代码，后面的代码不再执行

 } else {

 	如果以上条件都不满足，执行该处代码

 }

三元运算符

表达式 ? 如果表达式结果为true执行这里的代码 : 如果表达式结果为false执行冒号后面的代码 ;
```
 一元：  a++  b++    +a  -a

 二元:   a+b   a>=b
```

运算符计算顺序

 1  ()

 2  !、-、++、--    (-10)  负号  正号

 3 *、/、%

 4 +、-

 5 <、<=、<、>=

 6 ==、!=、===、!==、

 7 &&

 8 ||

 9 ?:

 10 =、+=、-=、*=、/=、%=     赋值

记忆，容易混淆
1. a && b 相当于串连电路
  1. 如果 a 为假，则返回 a
  2. 如果 a 为真，则返回 b
  3. var cc = 1&&10; //cc = 10;
2. a || b 相当于并联电路
  1. 如果 a 为假，则返回b
  2. 如果 a 为真，则返回a

Chapter3

switch语句

switch语句后面的变量数据类型必须和case后面的数据类型保持一致

 switch (变量n) {

 	case n1:

 		执行的代码;

 		break; //让程序停止执行

 	case n2:

 		执行的代码;

 		break;

 	case n3:

 		执行的代码;

 		break;

 	default:

 		执行的代码;

 		break;

 }

switch语句可以对变量进行集体判断

 switch (变量n) {

 	case n1:

 	case n2:

 	case n3:

 		执行的代码;

 		break;

 	default:

 		执行的代码;

 }

自增 i++/ ++i 自减 i--/ --i

while循环

while循环的过程中，首先在while循环外部定义一个变量，然后判断条件

 while(条件表达式){

 	当条件表达式结果为true,会一直执行while循环体内的代码。

 	当条件表达式的结果为false，while循环不再执行。

 }

do...while循环

do...while循环在条件不满足的情况下会比while循环多执行一次代码
```
 do{

 	循环体;

 }while(条件表达式);
```

for循环

 for(var i=0; i<=10; i++){

 	循环体代码

 }

break语句
1. 在循环体内，只要代码遇到break,程序立马结束当前循环体
2. 当前循环指的是break语句所在的循环体
continue语句

continue语句指的是跳出本次循环，该语句后面的代码不再执行
数组（定义，赋值，取值）
1. 定义
  1. 通过创建对象得方式创建数组
    
    var ary = new Array();
  2. 直接创建一个数组
    
    var ary1 = [];
2. 赋值
  
  数组中通过下标的方式进行赋值。下标从0开始
3. 属性介绍
  1. 数组名.length 可以获取数组中的元素个数
  2. 数组遍历及赋值
```
 var ary = [2, 4, 5, 6, 7, 8, 9];

 for (var i = 0; i < ary.length; i++) {

 	if (ary[i] % 2 == 0) {

 		alert(ary[i]);

 	} else {

 	}

 }
```
  3. 数组合并
    
    数组的合并（将ary和ary1进行合并，最后得到的依然是一个数组）
```
 var ary = [123,456];

 var ary1 = ["asdf","dsaf"];

 var ary3 = ary.concat(ary1);
```
  4. join方法将数组返回的是一个字符串
```
 var ary = [123, 456, 789];

 var str = ary.join("|");
```
函数（函数的定义和调用）

函数，是一种封装。就是将一些语句，封装到函数里面。通过调用的形式，执行这些语句。

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1. 函数的声明
  
  定义函数，可以在调用的后面：这是JS的语法特性，函数声明头的提升
  1. 自定义函数：
```
 function  test(形式参数) {

 	JS代码;

 }

 test(实际参数);
```
  2. 函数直接量声明：
```
 var fun1 = function(){

 	JS代码;

 }

 fun1(实际参数);
```
  3. 通过Function这个关键字：
```
 var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");

 fun2();
```
2. 函数的调用
```
 函数名字(实际参数);
```
3. 函数的返回值return
```
 	1. 函数里面可以没有return，如果有，只能有一个。不能有多个return；

 	2. 函数里面，return后面不允许书写程序了，也就是说写在后面的程序无效；

 	3. return 后面不要换行
```
4. 变量声明提升
  
  在函数体内部，声明变量，会把该声明提升到函数体的最顶端。只提升变量声明，不赋值。
```
 function fun(){

 	console.log(num);

 	var num = 20;

 }
```
  相当于 ---
```
 function fun(){

 	var num;

 	console.log(num);

 	num = 20;

 }
```
5. 函数参数、arguments
  1. arguments存储了函数传送过过来实参
  2. Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例
  3. arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同
  4. arguments对象的长度是由实参个数而不是形参个数决定的
  5. arguments.length; 返回的是实参的个数。但是这个对象有讲究，他只在正在使用的函数内使用。
  6. arguments.callee; 返回的是正在执行的函数。也是在函数体内使用。
    
    在使用函数递归调用时推荐使用arguments.callee代替函数名本身。
```
 function fn() { console.log(arguments.callee); }

 这个callee 就是： function fn() { console.log(arguments.callee); }
```

JS进阶

Chapter1

事件三要素

事件源：要触发的对象，一般情况下是个名词
事件：怎么触发的这个事情，一般情况下这个是动词

事件处理程序： fucntion(){ 执行的代码 }

 onclick		鼠标单击

 ondblclick	鼠标双击

 onkeyup		按下并释放键盘上的一个键时触发 

 onchange 	文本内容或下拉菜单中的选项发生改变

 onfocus		获得焦点，表示文本框等获得鼠标光标。

 onblur 		失去焦点，表示文本框等失去鼠标光标。

 onmouseover	鼠标悬停，即鼠标停留在图片等的上方

 onmouseout 	鼠标移出，即离开图片等所在的区域

 onload		网页文档加载事件

 onunload	关闭网页时

 onsubmit	表单提交事件

 onreset		重置表单时

入口函数
```
 window.onload = function(){

 	js代码

 }
```
当我们页面加载完毕（包括页面的图片全部加载完毕）之后，才执行函数体里面的js部分
this：指向的是事件的调用者，或者是函数的使用者

一般情况下，我们喜欢 var that = this;
方法
1. .className
2. .innerHTML
3. .isNaN("xxx") 如果里面的不是个数字,返回 true 否则返回false
4. .value;（属性，不是方法）表单的内容
5. .focus(); 表单自动获得焦点
6. .select(); 选择表单内容
7. .oninput 正常浏览器检测用户表单输入内容
8. .onpropertychange IE678检测用户表单输入内容
```
 $("txt").oninput = $("txt").onpropertychange = function {

 	if (this.value == " ") {

 		$("message").style.display = "block";

 	} else {

 		$("message").style.display = "none";

 	}

 }
```

数组 array

声明数组

 var arr = [1,3,5,7,9];

 var arr = new Array(1,3,5);

使用数组
```
 数组名[索引值];
```
数组的长度
```
 数组名.length;
```

4.遍历数组

 	使用for循环

排他思想

先用for循环清空全部

再用this.className

 window.onload = function() {

 	var btns = document.getElementsByTagName("button");

 	for (var i = 0; i < btns.length; i++) {

 		btns[i].index = i; // 给每个button 定义了一个index属性 索引号

 		btns[i].onclick = function() {

 			//清除所有人的类名,只能用 for 遍历

 			for (var j = 0; j < btns.length; j++) {

 				btns[j].className = "";

 			}

 			//就剩下自己，而且是点击那个

 			this.className = "current";

 		}

 	}

 }

7.多个的tab栏切换

	window.onload = function() {

		function tab(obj) {

			var target = document.getElementById(obj);

			var spans = target.getElementsByTagName("span");

			var lis = target.getElementsByTagName("li");

			for (var i = 0; i < spans.length; i++) {

				spans[i].index = i; // 难点

				spans[i].onmouseover = function() {

					//让所有的span, li的类名清空

					for (var j = 0; j < spans.length; j++) {

						spans[j].className = "";

						lis[j].className = "";

					}

					// 当前的span的添加类名

					this.className = "current";

					//先隐藏下面所有的 div盒子

					//留下中意的那个，跟点击的序号有关系的

					lis[this.index].className = "show";

				}

			}

		}

		tab("one");

		tab("two");

		tab("three");

	}

Chapter2

数组操作
1. 添加
  1. push() 向数组的末尾添加一个或多个元素，并返回新的数组的长度
  2. unshift()可向数组的开头添加一个或更多元素，并返回新的数组的长度
2. 删除
  1. pop() 删除最后一个元素，并返回返回删除的最后一个元素的值
  2. shift() 删除第一个元素，并返回返回删除的第一个元素的值
3. concat()连接两个数组
  1. 数组a.concat(数组b);
  2. 该方法用于连接两个或多个数组。它不会改变现有的数组，而仅仅会返回被连接数组的一个副本
4. join() 把数组转换为字符串
  1. 数组名.join("separator")
  2. 将数组各个元素是通过指定的分隔符进行连接成为一个字符串
  3. 如果省略separator，则使用逗号作为分隔符
5. split() 把字符串转换为数组
  1. stringObject.split(separator,howmany)
  2. 如果省略separator，则使用逗号作为分隔符
  3. howmany 可选。该参数可指定返回的数组的最大长度
DOM (重点)为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构
节点
1. 元素节点 nodeType == 1
2. 属性节点 nodeType == 2
3. 文本节点 nodeType == 3
访问节点
1. document.getElementById("");
2. document.getElementsByClassName("");（少用，IE678浏览器有兼容问题）
3. getElementsByTagName(""); 得到的是一个伪数组
节点之间的关系
1. IE678认识
  
  nextSibling/previousSibling/firstChild/lastChild
2. 其他浏览器认识的
  
  nextElementSibling/previousElementSibling/firstElementChild/lastElementChild
3. 为了兼容，可以合写：必须先写正常浏览器，后写IE678
  
  var div = one.nextElementSibling || one.nextSibling;
4. childNodes：它是标准属性，它返回指定元素的子元素集合
  
  包括HTML节点，所有属性，文本节点（嫡出）
  
  火狐，谷歌等高本版会把换行也看做是子节点
  
  可以利用 nodeType == 1 时才是元素节点，来获取元素节点
5. children：选取所有的孩子（只有元素节点）（庶出）
  
  IE678包含注释节点，这个要避免开

节点操作

创建新节点

  var div = document.creatElement("li");

插入子节点

 1. 父节点.appendChild();

 	添加孩子，放到盒子的最后面

 2. 父节点.insertBefore(插入的子节点，参照子节点);

 	添加孩子到参照子节点的前面

 	1. 如果第二个参数为null，则默认这新生成的子节点放到最后面

 	2. 父节点.insertBefore(插入的子节点，null);相当于父节点.appendChild();

移除子节点

 父节点名字.removeChild(子节点);

克隆节点

 1. 要复制的节点.cloneNode(true); 深层复制，除了复制本节点，还复制所有子节点

 2. 要复制的节点.cloneNode(false); 浅层复制，只复制本节点，不复制子节点

 3. 默认是false

设置节点属性
1. 获取节点属性
  
  节点.getAttribute("属性")
2. 设置节点属性
  
  节点.setAttribute("属性","值");
3. 删除某个属性
  
  节点.removeAttribute("属性");

封装自己class类

 window.onload = function() {

 	//封装自己的类名

 	function getClass(classname) {

 		//判断浏览器支不支持

 		//如果支持

 		if (document.getElementsByClassName) {

 			return document.getElementsByClassName(classname);

 		}

 		//如果不支持

 		var arr = []; //用于返回数组

 		var dom = document.getElementsByTagName("*");

 		for (var i = 0; i < dom.length; i++) {

 			//分割类名，并且转换为数组

 			var txtArr = dom[i].className.split(" ");

 			for (var j = 0; j < txtarr.length; j++) {

 				if (txtArr[j] == classname) {

 					//将我们选择的类名所选择的单个元素添加进数组

 					arr.push(dom[i]);

 				}

 			}

 		}

 	return arr;//得到我们选择的类名所选择的所有元素

 }

封装自己class类，带id父亲

 window.onload = function () {

 	function getClass(classname,id) {

 		if(document.getElementsByClassName) {

 			if(id) {

 				var eleId = document.getElementById(id);

 				return eleId.getElementsByClassName(classname);

 			} else {

 			return document.getElementsByClassName(classname);

 			}

 		}

 		if(id) {

 			var eleId = document.getElementById(id);

 			var dom = eleId.getElementsByTagName("*");

 		} else {

 			var dom = document.getElementsByTagName("*");

 		}

 		var arr = [];

 		for(var i=0; i<dom.length; i++) {

 			var txtArr = dom[i].className.split(" ");

 			for(var j=0; j<txtArr.length; j++) {

 				if(txtArr[j] == classname) {

 					arr.push(dom[i]);

 				}

 			}

 		}

 	return arr;

 	}##  ##

 }

Chapter3

定时器
1. window.setInterval(“执行的函数”,间隔时间（毫秒数）)
2. setInterval(fun, 1000);
3. setInterval("fun()",1000)
4. setInterval(function(){}, 1000)
5. 不能setInterval(function(), 1000)
6. setTimeout(“函数”, 时间) 只执行一次
7. setInterval与setTimeout定时器的区别
  
  1. setInterval是排队执行的。
  
  假如间隔时间是1秒，而执行的程序的时间是2秒。上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间变为2秒
  
  2. 假如setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒
定义自己的时间
1. var endTime = new Date(“2015/12/12 17:30:00”);
  
  如果date括号里面写日期，就是定义自己的时间
2. var date = new Date();
  
  如果date括号里面不写日期，就是当前时间

设计倒计时抢购

 window.onload = function() {

 	var demo = document.getElementById("demo");

 	var endTime = new Date("2017/1/1 17:30:00"); // 最终时间

 	setInterval(clock, 1000); // 开启定时器

 	function clock() {

 		var nowTime = new Date(); // 一定是要获取最新的时间

 		var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);

 		// 用将来的时间毫秒 - 现在的毫秒 / 1000 得到的还剩下的秒数，可能不断取整

 		// 一小时 3600 秒

 		// second / 3600  一共的小时数  /24   天数

 		var d = parseInt(second / 3600 / 24); //天数

 		var h = parseInt(second / 3600 % 24); // 小时

 		var m = parseInt(second / 60 % 60);

 		var s = parseInt(second % 60); // 当前的秒数

 		d < 10 ? d = "0" + d : d;

 		h < 10 ? h = "0" + h : h;

 		m < 10 ? m = "0" + m : m;

 		s < 10 ? s = "0" + s : s;

 		demo.innerHTML = "距离抢购时间还剩: " + d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";

 	}

 }

Javascript学习笔记

制作日历

 window.onload = function() {

 	var box = document.getElementById("box");

 	var boys = box.children;

 	//日期函数

 	var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

 	var date = new Date(); // 声明日期函数

 	boys[0].innerHTML = date.getFullYear() + "年" + (date.getMonth() + 1) +

 	"月" + date.getDate() + "日" + "  " + arr[date.getDay()];

 	boys[1].innerHTML = date.getDate(); // 今天的日子

 	}

Javascript学习笔记

模仿微博发布

 window.onload = function() {

 	//获取对象   再次操作对象

 	var btn = document.getElementsByTagName("button")[0];

 	var txt = document.getElementsByTagName("textarea")[0];

 	var ul = document.createElement("ul"); // 创建ul

 	btn.parentNode.appendChild(ul); // 追加到  他的父亲里面

 	btn.onclick = function() {

 		if (txt.value == "") {

 			alert("输入不能为空");

 		return false; // 终止函数执行

 		}

 		var newli = document.createElement("li");

 		newli.innerHTML = txt.value + "<a href ='javascript:;'>删除</a>"; // 吧表单的值给  新li

 		txt.value = ""; // 清空 表单

 		var lis = ul.children; // 获得有多少个li

 		//  if else  这个片段  让我们新发布的内容 最上显示

 		if (lis.length == 0) { //  第一次创建

 			ul.appendChild(newli); // ul 的后面追加

 		} else {

 			ul.insertBefore(newli, lis[0]); // 每次生成的新的li 放到第一个li 的前面

 		}

 		var as = document.getElementsByTagName("a"); // 获得所 a

 		for (var i = 0; i < as.length; i++) {

 			as[i].onclick = function() {

 				//removeChild

 				ul.removeChild(this.parentNode); // UL 他的爸爸

 			}

 		}

 	}

 }

Javascript学习笔记

Chapter4

时钟案例

 window.onload = function() {

 	var hour = document.getElementById("hour");

 	var minute = document.getElementById("minute");

 	var second = document.getElementById("second");

 	// 开始定时器

 	var s = 0,

 	m = 0,

 	h = 0,

 	ms = 0;

 	setInterval(function() {

 	// 内容就可以了

 	var date = new Date(); // 得到最新的时间

 	ms = date.getMilliseconds(); // 现在的毫秒数

 	s = date.getSeconds() + ms / 1000; //  得到秒 1.3 s

 	m = date.getMinutes() + s / 60; //  得到的是分数  45.6分钟

 	h = date.getHours() % 12 + m / 60;

 	//时钟旋转角度

 	second.style.WebkitTransform = "rotate(" + s * 6 + "deg)";

 	minute.style.WebkitTransform = "rotate(" + m * 6 + "deg)";

 	hour.style.WebkitTransform = "rotate(" + h * 30 + "deg)";

 	second.style.MozTransform = "rotate(" + s * 6 + "deg)";

 	minute.style.MozTransform = "rotate(" + m * 6 + "deg)";

 	hour.style.MozTransform = "rotate(" + h * 30 + "deg)";

 	}, 1);

 }

Javascript学习笔记

点击倒计时

 var btn = document.getElementById("btn");

 var count = 5;

 var timer = null; // 定时器的名字

 btn.onclick = function() {

 	clearInterval(timer); // 先清除掉原来的定时器

 	this.disabled = true;

 	// this 指向的是 btn

 	var that = this; // 把 btn 对象 给 that  var _this = this;

 	timer = setInterval(sendTextMessage, 1000); // 开启定时器 名字  timer

 	function sendTextMessage() {

 		count--;

 		if (count >= 0) {

 			that.innerHTML = "还剩余" + count + "秒";

 		} else {

 			that.innerHTML = "重新发送短信";

 			that.disabled = false;

 			clearInterval(timer); // 清除定时器

 			count = 5;

 		}

 	}

 }

Javascript学习笔记

5秒钟自动跳转页面

window.location.href = " ";

 var demo = document.getElementById("demo");

 var count = 5;

 var speed = 1000;

 setTimeout(goIndexPage, speed); //1秒钟之后去执行goIndexPage这个函数

 function goIndexPage() {

 	count--;

 	demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第" + count + "秒钟之后跳转页面</a>";

 	if (count <= 0) {

 		// 如果count小于0就到了时间了,我们应该跳转页面

 		window.location.href = "http://www.baidu.com";

 	} else {

 		setTimeout(arguments.callee, speed); //  递归调用  自己调用自己

 	}

 }

获取字符位置方法
1. charAt() 获取相应位置字符
2. charCodeAt() 获取相应位置字符unicode编码
3. unicode编码，是我们字符的字符的唯一表示

秒客网

Javascript学习笔记

Javascript

2016年12月19日整理

JS基础

Chapter1

Chapter2

Chapter3

JS进阶

Chapter1

Chapter2

Chapter3

Chapter4

Chapter5

相关文章