JS入门

Veröffentlicht am 2016-08-22

JavaScript的组成

1
2
3

1.核心（ECMAScript）是一个标准 ES6
2.文档对象模型（DOM）Document Obj Model
3.浏览器对象模型（BOM）Browser Obj Model

特点

1.一种解释性执行的脚本语言（无需编译）
2.一种基于对象的脚本语言
3.一种简单弱类型的脚本语言（数字、字符、函数、对象、数组、undefined）
4.一种相对安全的脚本语言（只能在浏览器运行）
5.一种事件驱动的脚本语言
6.一种跨平台性的脚本语言

引入方式和弹出框

直接上颗栗子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--外部引入-->
		<script src="a.js" type="text/javascript" charset="utf-8"></script>
		<!--内部引入-->
		<script type="text/javascript">
		//消息框
			alert("a");
		//确认框
			var a = confirm("是否？");
			alert(a);
		//提示框
			var n = prompt("请输入姓名？");
			alert(n);
		</script>
	</head>
	<body>
	</body>
</html>

注释

1 2	单行注释 // 多行注释 /* */

变量

number 值为数值
string 值为字符串
boolean 值为布尔值（true、false）
undifined 值未定义
null 值为空

命名规范

区分大小写

1.首字符只能使用字母、下划线和$
2.其他字符可以使用字母下划线、$和数字
3.命名字符中间不能含有空格
4.不能以关键字或保留字命名
注：不能使用name命名

javascript操作符

赋值操作符

1	= 赋值运算符并不是等于 , var a = 5: 把5赋给a

算术操作符

+、- 、/ 、* 、%（模/取余）(输出数字）

模的算法栗子：
2%7 = 2              7%4  = 3     

(-2)%7 = -2         (-7)%4  = -3 

2%(-7) =  2          7%(-4) = 3 

(-2)%(-7) =  -2     (-7)%(-4)  = -3 

+= -= *= /=（算法简写）

直接上颗栗子

var a = 1;
a = 5+7;
//a = a+1;//a= 12+1
//简写
a += 1;//a= 12+1
a *= 2;//a= 13*2
alert(a);
//++ — （a=a+1 a=a-1 的简写）

关系操作符(返回布尔值)

1)>大于

2)<小于

3)==等于

4)===全等于（判断类型和值）

5)<=小于等于

6）>=大于等于

7）!=不等于

直接上颗栗子

var a = 5;
var b = 6;
var c = "5";
var bol = null;
bol = a<b;//true
bol = a>b;//false
bol = a==b;//false
bol = a!=b;//true
bol = a>c;//false
bol = a>=c;//true
bol = a==c;//true
bol = a===c;//false
bol = a!=c;//false
bol = !true;//false
bol = "abc" > "addd";//ASCII 码
alert(bol);

逻辑操作符

1
2
3

与 && 真真为真 真假为假 假假为假
或 || 真真为真 真假为真 假假为假
非 ！ 相反

直接上颗栗子

var a = 5;
var b = 10;
var c =15;
var bol = null;
bol = a>b && c>b;//false
bol = a<b && c>b;//true
bol = a>b || c>b;//true
bol = (a>b && c>b) || !false;//true
alert(bol);

条件操作符

if 语句语法

if (判断语句) {
    语句1  
              
} else{
    语句2 
               
}
语句3

if (判断语句1) {
    语句1
                
} else if(判断语句2){
    语句2  
              
}else{
    语句3 
               
}
语句4

简写: 判断表达式 ？ 表达式1 ：表达式2 例：a>b? c=1:c=2; true c=1, false c=2

获取元素

getElementById() 根据id获取元素
getElementByITagName() 根据标签名获取元素
getElementByName() 根据name获取元素
getElementByClassName() 根据类获取元素 ie6不兼容

直接上颗栗子

window.onload = function(){
//等页面内容加载完成后执行
	//根据ID获取
	var d = document.getElementById('d1');
	//document整个HTML文档
	alert(d);
	//[object HTMLDivElement] object--对象
	//根据name属性获取
	var p = document.getElementsByName('pp');
	alert(p);
	//[object NodeList] 数组集合
	alert(p[0]);
	//[object HTMLParagraphElement]
	//根据类名获取
	var a = document.getElementsByClassName('aa');
	alert(a[0]);
	//127.0.0.1:8020/20160524-js/js_link.html###
	//根据标签名获取
	var li = document.getElementsByTagName('li');
	alert(li[0]);
	//[object HTMLLIElement]
}

onclick 事件

直接上颗栗子

<!--例子：显示隐藏-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<input type="button" name="btn" id="btn" value="显示隐藏"/>
		<div id="d1"></div>
	</body>
	<script type="text/javascript">
		//根据id名获取
		var btn = document.getElementById('btn');
		var div = document.getElementById('d1');
		btn.onclick = function (){
		//显示隐藏
			if(div.style.display !="none") {
				div.style.display = 'none';
			} else{
				div.style.display = 'block';
			}
		//简写
//div.style.display=="block"?div.style.display = 'none':div.style.display = 'block';
			if (bol) {
				div.style.display = 'none';//语句1
			} else{
				div.style.display = 'block';//语句2
			}
			bol = !bol;
			//第一次点击
			//bol = true
			//判断,执行语句1
			//给bol赋值bol = !bol 得 bol = false
			//第二次点击
			//	bol = false
			//判断,执行语句2
			//给bol赋值bol = !bol 得 bol = true
			//第三次点击
			//bol = true
			//判断,执行语句1
			//给bol赋值bol = !bol 得 bol = false
			//...
		}
	</script>
</html>

onmouseover onmouseout 事件

直接上颗栗子

	var div = document.getElementById('d1');
//	div.onmouseover = function(){
//当鼠标移到div里面的时候触发的事件 有bug
//		div.style.background = "darkorange";
//	}
//	div.onmouseout = function(){
//当鼠标离开div里面的时候触发的事件  有bug
//		div.style.background ="cornflowerblue";
//	}
	div.onmouseenter = function(){
	//当鼠标移到div里面的时候触发的事件  无bug  兼容ie8
		div.style.background = "darkorange";
	}
	div.onmouseleave = function(){
	//当鼠标离开div里面的时候触发的事件  无bug  兼容ie8
	div.style.background ="";
	}

++a与a++

1	++a 先加再执行、a++ 先执行再加

直接上颗栗子

var i = 0;
var a = i++ + 1;//计算之前 i=0 计算完后i=1
var b = ++i +1;//i= 1 计算之前 i+=1 计算完后i=2
alert("a= "+a+", b= "+b);//a= 1, b= 3

() 提升优先级
[] 数组
{} 对象
Number() 转换为数字类型
paresInt() 整数
NaN 非数字，不知道类型，所以 NaN 不等于 NaN，这是个神奇的东西

小贴士

<head>
	<script type=“text/javascript”>
		var a = document.getElementById('a');
		alert(a);
	</script>
</head>
<body>
	<p id=“a"></p>
</body>

如果用上面的写法弹出的会是undefined，是因为代码是由上往下执行，a还没执行，js已经执行完了，所以没有找到a，解决方法有两种：

1.在或a后面写：

<body>
	<p id=“a"></p>
	<script type=“text/javascript”>
		var a = document.getElementById('a');
		alert(a);
	</script>
</body>
<!--或-->
<!--
<script type=“text/javascript”>
	var a = document.getElementById('a');
	alert(a);
</script>
-->

2.如果你想要在head里面写，可以给他加一个onload事件，然它先加载标签在运行js：

<head>
	<script type=“text/javascript”>
		window.onload = function (){
			var a = document.getElementById('a');
			alert(a);
		}
	</script>
</head>

兼容IE6

Veröffentlicht am 2016-08-22

1	做网站的都要保存一些兼容的方法，以下内容是一些涉及的是IE6的兼容，请拿好不谢！

1.a标签里嵌套img时，不同浏览器下会出现不同颜色边框：

1	解决：重置样式把border取消(重置样式请参考CSS入门)

2.各个浏览器下图片与图片之间有间隙：

1	解决：用float，或取消img标签的换行

3.清除浮动

.clear:after{
	content: "";
	clear:both;
	display:block;
	height:0;
	overflow:hidden;
}

以上清除浮动方法在IE6中无效果

1	解决：触发haslayout:position、float、zoom,因为前两者会影响下面的布局所以一般采用：.clear{zoom:1;}

在IE6中清除样式有可能需要设置

.clear:after{
	height:0;
	overflow:hidden;
	font-size:0;
	line-height:0;
}

4.opacity在IE6中无效

1	解决：filter:alpha(opacity = 50)；滤镜设置透明度

.a{
opacity:0.5;
filter:alpha(opacity=50);
}
/*（IE9支持opacity，很多CSS方法在IE9以上才支持）*/

5.ie6有float，有横向margin时，ie双倍间距

1	解决：设置display:inline;

6.在ie6，内容宽高超出我们设置的宽高时，内容会撑开设置好的宽高

1
2
3

要让谷歌浏览器有内容撑开设置好的宽高的特性并兼容IE6可设置min-height和_height

注：_height（仅IE6标识）

7.在ie6下最小高度19px,字体太大会溢出（默认行高）

1	解决：overflow: hidde

8.在ie6下png图片不透明

<!--条件注释：-->
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('*');
</script>
<![endif]-->

9.左浮元素margin-bottom失效

1	解决：用padding

10.ul、ol的li中,如有元素浮动,在ie6中会出现多出几像素的问题

1	解决：li浮动或者浮动元素inline-block

10.IE6怪异解析之padding与border算入宽高

1 2	原因：未加文档声明造成非盒模型解析解决方法：加入文档声明<!doctype html>

11.以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。

1）字体大小为奇数之边框高度少1px 
解决方法：字体大小设置为偶数或line-height为偶数 

2）line-height，文本垂直居中差1px 
解决方法：padding-top代替line-height居中，或line-height加1或减1 

3）与父标签的宽度的奇偶不同的居中造成1px的偏离 
解决方法：如果父标签是奇数宽度，则子标签也用奇数宽度;如果是父标签偶数宽度，则子标签也用偶数宽度

12.内部盒模型超出父级时，父级被撑大

1	解决方法：父标签使用overflow:hidden

13.line-height默认行高bug

1	解决方法：line-height设值

14.行标签之间会有一小段空白

1	解决方法：float或结构并排(可读性差，不建议)

15.标签高度无法小于19px

1	解决方法：overflow: hidden;

16.左浮元素margin-bottom失效

解决方法：显示设置高度 or 父标签设置_padding-bottom代替子标签的margin-bottom or 再放个标签让父标签浮动，子标签 
margin- bottom，即(margin-bottom与float不同时作用于一个标签)
``` 

### 17.img于块元素中，底边多出空白

解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

1 2	### 18.li之间会有间距

解决方法：float: left;

1 2	### 19.块元素中有文字及右浮动的行元素，行元素换行

解决方法：将行元素置于块元素内的文字前


### 20.position下的left，bottom错位

``` 
解决方法：为父级(relative层)设置宽高或添加*zoom:1

21.子级中有设置position，则父级overflow失效

1	解决方法：为父级设置position:relative

CSS入门

Veröffentlicht am 2016-08-22

CCS（是一组格式设置规则，用于控制web外观）

web标准结构

结构 HTML+

样式 CSS+

行为交互行为javascript

特点

1.页面内容与表现形式分离
2.可很好控制页面布局
3.提高网页加载速度
4.降低服务器的成本
5.呈现一致的效果

CSS引入方式

1) 有3中引入方式，第一种head标签内用link标签引入外部css文件，这种引入方式使用最为广泛，优点一个css文件可以控制n多个页面，便于维护，从整站上减少代码量，有效利用缓存机制。
2) 第二种head标签里加入style标签，写css样式。这种引入方式也比较常用，通常用在访问量大的网站或首页使用。优点是加载速度快，整站缺点代码多，不易维护。
3) 第三种标签内加style，这种引入方式用的比较少，优点是优先级最高，缺点是代码量大、不易维护。
4) @import url(css/name.css) 用户体验不好，不建议使用;
5)css !important作用是提高指定CSS样式规则的应用优先权。

<head>
<!--外部引入： 可以多页面引用-->
<link rel=“stylesheet” type=“text/css” href=“css.css” />
<style>
<!--头部引入：在head内引入 加载速度快-->
</style>
</head>
<body>
<!--标签内引入：在标签内引入 优先级最高，不利于维护-->
<p style=""></p>
</body>

CSS基础语法

选择器{属性：值；属性：值；}选择器是HTML元素
例如：p{color：red； width：100px；}
1.ID选择器  优先最高 使用方式：#+ID名
2.类选择器  优先仅次于ID 使用方式：.+类名
3.标签选择器 优先最低 使用方式：标签名
4.后代选择器 后代会影响优先级  使用方式 父级选择器+空格+子级选择器
5.群组选择器 使用方式： 选择器+，+选择器
6.筛选 使用方式：选择器+选择器
!important；绝对最高优先级

CSS属性

1
2
3

margin（外边框）
margin:盒子从上往顺时针方向设置值 （上、右、下、左）或可详细描述margin-top、margin-right、margin-bottom、margin-left
padding（内边框）与上类似

扩展：

1 2	兄弟之间用 margin 父子之间用 padding 处理父子之间margin的后遗症可用 overflow：hidden；

border（边框）

1 2	border-top/right/bottom/left、border-width 三角形制作（可改变其它属性来制作图形）例如

div{
width: 0;
height: 0;
border: 50px solid black;
border-color: transparent green transparent transparent;<!--（透明）-->
	}

display

block：块属性
inline：行属性
inline-block：并排
none：隐藏属性

小贴士：

网页body基本命名结构：

<div class="wrap">
  <div class=“header”></div>
  <div class=“content”></div>
  <div class=“footer”></div>
</div>

网页中主页一般命名为index.html

字体属性设置：

font-family:字体1,字体2,… 字体类型

p{
  font-family:“宋体”,Arail,Tahoma;
  /*建议：中文网站——宋体  英文网站——Arail，Tahoma,中英文网站——建议用英文字体   特殊符号——建议使用图片*/
}
font-size：px|%|em|rem 字体大小(body默认字体为16px）

1em=1父级字体大小（1rem用于手机移动端 1rem = 1html字体大小）


p{
  font-size:16px;
}
font-style：normal（常规字体） / italic（斜体） / oblique （倾斜）字体风格

font-weight： normal （常规字体） / bold（加粗字体） / bolder（更粗字体） / lighter（更细字体） / number（400-normal，700-bold ，100-900）

font：font-style / font-weight / font-size / font-family（按顺序可统一设置）

文本设置

1.颜色设置：
color：颜色值：（颜色值可以是一个名称标示的关键字，如 color：red；
也可以是一个RGB数字， 如color：rgb（0，0，0）；或color：#ffffff；或 color：#fff；）

2.文本修饰：
text-decoration：none / underline(下划线) / overline（上划线） / line-through（删除线）

3.行距：
line-height:normal （浏览器默认行高）/ length（px / em）；（可用于垂直居中，行距与高度一致时文本垂直居中）
文本缩进：text-indent：length（px / em）；
文本对齐： text-align:left （左对齐）| center（居中对齐） / right（右对齐） / justify(两端对齐)；
文本垂直对齐：vertical-align：top（靠上） / middle（居中） | bottom（靠下）根据行高调节（
注：本属性对行元素友好，在块元素里不存在垂直居中，一般使用行高）
字词间隔：word-spacing：normal / length 单词之间间距 （控制空格）
字符间隔：letter-spacing：normal /length 字符之间间距 （控制字符）

背景设置：
背景色：background-color：颜色值；
背景图：background-image：none / url();（挡住背景颜色）
背景图重复： background-repeat：no-repeat / repeat-x / repeat-y

背景图定位： background-position：x轴位移 y轴位移 ；
背景图滚动：background-attachment：scroll （）/ fixed（设置背景图随滚动条滚动）

简写： background：#ccc scroll …；

常用布局

1
2
3

1.float：none / left / right 浮动
float后行内元素可设置width和height，块元素可以并排
2.clear: none / left / right / both 清除浮动 需要兄弟级块元素属性才可以清除浮动

常用清除浮动方式

.clear:after{
      content:'';
      display:block;
      clear:both;
}/*在父级调用类clear*/

父级浮动也可清除浮动（不常用）

3.overflow:处理超出的内容（给x轴设超出处理：overflow-x，给y轴设置超出处理：overflow-y）

visble（显示超出内容） 

hidden（隐藏超出内容，也可以清除浮动）

auto （自动识别，超出就给予滚动条）

scroll（给超出的元素一个滚动条）

4.visitlity:visible| hidden 可视

visitlity:hidden;后元素不可见，但是还占据空间，而dispaly：none;后元素消失，空间会清除占 据位置

5.position:absolute（绝对定位：脱离） / relative（相对定位） / static（默认值） | fixed(浏览器窗口定位：ie8以下不兼容) / inherit（继承父级）

a标签的伪类（编辑时请注意按顺序编写）

link：有链接属性
visited：链接地址已被访问
hover：鼠标悬停在上面
active：被用户激活（鼠标在点击与释放之间发生的事件）
默认清除样式格式：

body,h1,h2,h3,h4,p,dl,dd,ul,ol,form,input,textarea,th,td,select{margin: 0;padding: 0;}
em{font-style: normal;}
li{list-style: none;}
a{text-decoration: none;}
img{border: none;vertical-align: top;}
table{border-collapse: collapse;}
input,textarea{outline: none;}
textarea{resize:none;overflow: auto;}
body{font-size:12px;font-family: arial;}

拓展

1
2
3

英文默认是不会换行，但是如果网站是全英文，不换行的话看起会好恶心，所以请拿好下面的一个英文换行的CSS样式

word-wrap:break-word;

盒模型

什么是“盒模型”，它都涉及什么css属性？

任何一个html元素都可以把它理解为一个“盒子”在浏览器里显示。
通过盒模型 可以更形象的理解什么是margin和padding。还有border。

CSS 注意的问题

1.子元素有相对定位并且溢出，父级overflow包不住子元素
2.兄弟之间用margin父子之间用padding
3.P不能嵌套DIV ,A不能嵌套A
4.英文字换行 word-wrap:break-word;
5.文字和块的水平居中和垂直居中

BFC

BFC(Block Formatting Contexts)直译为”块级格式化范围”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？

float的值不为none。 
overflow的值不为visible。 
position的值不为relative和static。
display的值为table-cell, table-caption, inline-block中的任何一个。 

那BFC一般有什么用呢？比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。

IFC

IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

那么IFC一般有什么用呢？

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

IE6怪癖解析

解释下IE6怪癖解析，如何解决的？

IE6怪癖解析其实是因为IE6存在两种解析模式，一种是hasLayout，一种是IE6私有的。触发怪癖解析有很多情况，比如最常见的当IE6没有书写doctype声明。

怪癖解析与正常解析有很多细微的差异，其中最明显的就是对盒模型的解析。怪癖解析下，盒模型的宽高是指盒子的border+padding+内容宽高。

解决办法就是触发hasLayout，使IE6进入正常的解析模式，比如css属性zoom:1;当然最好的解决办法就是避免进入怪癖解析，修改正确的doctype声明。

cCSS hack

1.大部分特殊字符IE浏览器支持，其他主流浏览器firefox，chrome，opera，safari不支持 。
2.\9    ：所有IE浏览器都支持 background:red\9;
3._和-  ：仅IE6支持 _background:orange;
4.*     ：IE6、E7支持 *background:black;
5.\0    ：IE8、IE9支持，opera部分支持
6.\9\0  ：IE8部分支持、IE9支持
7.\0\9  ：IE8、IE9支持

Html入门

Veröffentlicht am 2016-08-22

HTML是一种超文本标签语言

html的基本结构如下：

<!DOCTYPE html>    
<!--文档声明（告诉浏览器页面版本）-->
    <html lang=“en"> 
    <!-- 网页语言（中文：zh）-->
    <head>
     <meta charset=“UTF-8"> 
     <!-- 编码格式 （提供页面的元信息，常用属性：charset，name，content）-->
     <title>Document</title>      
     <!--  网页标题-->
    </head>     
    <!--  页头-->
    <body>
     <!--  页身-->
    </body>
    </html>  
    <!--  HTML文档-->

meta的其他属性值(与SEO优化有关联)

1 2	<meta name=“Keywords” content=“关键字”> <meta name=“Description” content=“描述”>

h1~h6:定义标题，作为标题使用

<h1>I'm H1</h1>
<h2>I'm H2</h2>
<h3>I'm H3</h3>
<h4>I'm H4</h4>
<h5>I'm H5</h5>
<h6>I'm H6</h6>

p:定义段落

1	<p>我是一个段落</p>

br:换行

1	<p>我是一个段落，这里准备换行<br>已经换行了</p>

ol:有序列表

<ol>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ol>

ul:无序列表

<ul>
	<li>我是li</li>
	<li>我是li</li>
	<li>我是li</li>
</ul>

dl:定义列表（dl—dt—dd）比如词典中的解释

<dl>
	<dt>我是DT</dt>
	<dd>我是DD</dd>
	<dt>我是DT</dt>
	<dd>我是DD</dd>
	<dt>我是DT</dt>
	<dd>我是DD</dd>
</dl>

table表格:(顺序thead-tbody-tfoot）

<table  border="1">
	<tr>
		<td>星期1</td>
		<td>星期2</td>
		<td>星期3</td>
	</tr>
	<tr>
		<td>内容1</td>
		<td>内容2</td>
		<td>内容3</td>
	</tr>
</table>

table的一些属性:

cellpadding 内边距、
cellspacing 外边距、
colspan 跨列合并、
rowspan 跨行合并.

行属性标签

1	在行内显示，内容撑开宽高，不可以设置宽高（img、input 除外），行只能套行

span：无语义标签(全角空格算中文)

1	<span>我是SPAN</span>

a:定义超链接

<a href="http://baidu.com" target="_blank">百度</a>

<a href="###">###</a> 
<!--不刷新页面-->

<a href=“#d1”>跳转</a> 
<!--（锚点链接# ）-->

<br><br><br><br><br><br><br><br><br>

<div id="d1">我是DIV</div>
<!--（锚点链接终点 ）-->

<!--(target:_blank ,_self 超链接链接方式)-->

img:定义图片

1
2
3

<img src="a.gif" alt=“我是百度图片” title="我是title">  
<!--alt：解释图片内容，只有在找不到图片时显示,title:鼠标停留时显示内容,相对路径： ../, 返回上一目录./,根目录|,绝对路径：详细路径
-->

var:显示为斜体定义变量文本

em:斜体定义强调文本

strong（更强的强调）显示为粗体定义强调文本

1
2
3

<var>I'm var</var>
<em>I'm em</em>
<strong>I'm strong</strong>

表单标签

textarea：定义多行的文本输入控件
select：定义选择列表
option: 定义列表的选项
input: 定义文本的变量部分

<form action=“http://baidu.com/s”>
	提交<input type="submit"><br>
	文本<input type="text"><br>
	密码<input type="password"><br>
	文件<input type="file"><br>
	单选框<input type="radio" name="a">
	<input type="radio" name="a">
	<!--以name为分组-->
	<input type="radio" name="a"><br>
	复选框<input type="checkbox" name="b">
	<input type="checkbox" name="b">
	<!--以name为分组-->
	<input type="checkbox" name="b"><br>
	<input type="reset"><br>
	<!--重置-->
	<input type="hidden" name="w" value="HTML5"><br>	<!--隐藏-->
</form>
<!--input 属性：disable （不可用状态）  placeholder（默认值） readonly （只读）,form 定义表单（块属性标签）向服务器传输数据--method,get：通过URL提交数据 ，容量小，不安全，有缓存
post：不通过URL提交数据 ，容量大，安全，无缓存,action： 提交数据的URL-->

SEO (搜索引擎优化)

1 2	对网站进行内部及外部的调整优化... 与SEO有关的属性:title,strong,h1-h3,a,em,img&alt

拓展

1
2
3

EMMET插件的初级应用—-emmet 快速添加类名、ID、文本和属性

在Emmet中，还有一个功效，能快速帮助你添加类名、ID、文本和属性。

<!--1.使用E#ID添加ID名-->
<!--a#a1-->
<a href="" id="a1"></a>
<!--2.使用E.class添加类名-->
<!--a.a1-->
<a href="" class="a1"></a>
<!--3.使用E[attr]添加属性-->
<!--a.a1[href="http://baidu.com"]-->
<a href="http://baidu.com" class="a1"></a>
<!--4.使用E{text}添加文本-->
<!--a.a1{我是a}-->
<a href="" class="a1">我是a</a>
<!--5.+并列元素-->
<!--a.a1+span-->
<a href="" class="a1"></a>
<span></sapn>
<!--6.*元素个数-->
<!--a.a1*3-->
<a href="" class="a1"></a>
<a href="" class="a1"></a>
<a href="" class="a1"></a>
<!--7.>元素向内创建子元素-->
<!--a.a1>span-->
<a href="" class="a1">
	<span></span>
</a>
<!--8.>元素向上创建子元素-->
<!--a.a1>span^span-->
<a href="" class="a1">
	<span></span>
</a>
<span></span>

game

Veröffentlicht am 2016-08-21

九九乘法表与do{}while()和while(){}

1	在讲九九乘法表之前，先讲下js写入标签的方法之一。（可选择不看，如果你已经会了的话）

for循环写入标签

有时候标签是可以在js里添加的，以下是方法之一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		
	</body>
	<script type="text/javascript">
	//document 运行缓慢
		document.write("<table border='1'>");
		for (var i=0;i < 5 ; i++) {
		//大循环
			document.write("<tr>");	
			for (var j=0;j < 5 ; j++) {
			//小循环 大循环循环一次，小循环循环5次 共循环5*5
				document.write("<td>"+j+"</td>");
			}
			//小循环结束后结果是<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
			document.write("</tr>")
		}
		/*两循环结束后结果是<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>*5 */
		document.write("</table>");
		//解决方案：字符串拼接(table的写入也是很慢的)
		var str ="<table border='1'>";	
		for (var i=0;i < 5 ; i++) {
			str+="<tr>";	
			for (var j=0;j < 5 ; j++) {
				str+="<td>"+j+"</td>";
			}
			str+="</tr>";
		}
		document.write(str + "</table>");

九九乘法表

最经典的例子就是九九乘法表，可谓是程序猿必经之路，以下纯属个人想法

九九乘法表思路

九九乘法表中是1-9*1-9
一个1-9就可以设置一个循环1,然后1-9里各乘一遍1-9，就可以再在循环1里设置循环2。
循环1第一遍循环时是i=1输出<tr>
然后进入循环2，循环2第一遍循环时是j=1，二者相乘可获得九九乘法表第一个<td>1*1=1</td>,输出<tr><td>1*1=1</td>
然后循环2 j=2 未达到退出循环条件，所以会继续循环，这时 i=1 ，j=2，如果按上一步的执行就会得出<td>1*1=1</td><td>1*2=2</td>,这样输出来就是在同一行内
而在九九乘法表内第一行只有一个1*1，所以我们需要在1*1的的后面输入空的td，也就是<td></td>，这时候就需要判断了，可是判断的标准是什么呢？
所以我们可以看一下九九乘法表的排布规律，九九乘法表中，每当第二个数大于第一个数时，就会输出空，所以判断的标准就是当j>i时，就输出<td></td>；
好了，接下来就是j>9,退出里面的循环时输出的是<tr><td>1*1=1</td>(<td></td>)*8</tr>
这时循环1的 i ++ 也就是i=2，循环1继续，i=2进入循环2，循环2执行完成后<tr><td>1*2=2</td><td>2*2=4</td>(<td></td>)*7</tr>

如此反复，最后得出九九乘法表。

看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
			var str ="<table border='1'>";
			for (var i=1;i <= 9; i++) {
			/*循环1  循环一次得出的内容为一列tr，tr里包含循环2循环结束后的内容*/
				str += "<tr>" ;
				for (var j = 1 ; j <= 9; j++) {
				//循环2 循环结束后得出的内容为一行td
					if(j>i ){
					//当j大于i时，输出空的空格
						str+="<td></td>";
					}else{
					//否则输出内容
						str += "<td>" ;
						str += j + "*" + i + "=" + (i*j);
						str += "</td>" ;
					}
					
				}
				str += "</tr>" ;
			}
			str += "<table>";
			document.write(str);
		</script>
</html>

1
2
3

do{}while()和while(){}
do{}while()先执行再判断，最少执行一次
while(){}先判断在执行

看代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/*for (var i=0;i <= 1000; i++) {
			if (i%7==0 && i%13==0) {
			document.write(i);
			document.write("<br/>");
			}
		}*/
		//获取一个可以同时整除 任意三个数的最小值
		
		//方法1
		function a (num1,num2 ,num3){
			//定义函数，输入三个数可以获取同时整除这三个数的最小值
			for (var i=1;i <=(num1*num2*num3); i++) {
				/*三个数的积一定可以同时整除这三个数，所以可以在这个积的范围内寻找最小值*/
				if (i%num1==0 && i%num2==0 && i%num3==0){
				//判断是否可以同时整除这三个数
				//是就写入，并退出循环
				document.write("可以同时整除"+num1+","+num2+","+num3+"三个数的最小值是"+i);
				document.write("<br />");
				break;
				}
			}
		}
		//调用函数
		a(7,13,5);
		
		//方法2，使用while，思路与上一个相似
		var i = 0;
		function b (num1,num2 ,num3){
			while(true){
			//死循环
			i++;
			if (i%num1==0 && i%num2==0 && i%num3==0) {
				document.write("可以同时整除"+num1+","+num2+","+num3+"三个数的最小值是"+i);
				document.write("<br />");
				break;//找到后退出死循环
			}
		}
	}
			b(7,13,15);
			/*do{}while()先执行再判断，最少执行一次 while(){}先判断在执行*/
			var j = 0;
			while(j<0){
				j++;
				document.write(j+"我是while（）{}");
			}
			do{
				j++;
				document.write(j+"我是do{}while（）");
			}while(j<0)
		</script>
</html>

font

Veröffentlicht am 2016-08-21

小游戏案例–选择与颜色相符的字

实现思路

1)获取元素

2)开始倒计时

3)点击五个颜色按钮

4)题目文字随机改变文字与颜色

5)五个颜色按钮随机改变文字的顺序和颜色

6)如果点击的内容文字与题目文字的颜色相等就加分，否则减分

7)时间为0时，停止游戏

<div id="wrap">
	<div id="dao">剩余时间：20</div>
	<div id="wan">完成：0</div>
	<div id="show">红</div>
	<div id="menu">根据上面的字的颜色从下面选择正确的字，选择正确计一分,否则扣一分</div>
	<ul id="ul1">
		<li>绿</li>
		<li>蓝</li>
		<li>黑</li>
		<li>黄</li>
		<li>红</li>
	</ul>
</div>
<input type="button" id="start" value="开始" />

*{
	margin:0;
	padding: 0;
	font-family: "微软雅黑";
}
body,html{
	height: 100%;
	font-size: 15px;
}
#wrap{
	width: 400px;
	margin: 0 auto;
	position: relative;
	height: 100%;
	min-height: 500px;
	max-height: 600px;
	border: 1px solid #ccc;
}
#dao{
	position: absolute;
	left: 20px;
	top: 20px;
	font-size: 2em;
}
#wan{
	position: absolute;
	top: 20px;
	font-size: 2em;
	right: 20px;
}
#show{
	font-size: 10em;
	top: 90px;
	left: 120px;
	position: absolute;
}
#menu{
	padding: 40px;
	font-size: 2em;
	top: 250px;
	position: absolute;
}
#ul1{
	position: absolute;
	left: 0;
	bottom: 0;
	list-style: none;
}
#ul1 li{
	float: left;
	font-size: 5em;

}
body{
	text-align: center;
}
#start{
	width: 100px;
	height: 50px;
	line-height: 50px;
	font-size: 45px;
	border: none;
}

//1.获取元素
//获取显示倒计时的标签
var time = document.getElementById('dao');
//获取分数标签
var fs = document.getElementById('wan');
//获取题目文字标签
var show = document.getElementById('show');
//获取五个颜色按钮标签
var li = document.getElementsByTagName('li');
//获取开始按钮标签
var start = document.getElementById('start');
	
//定义变量
var arrFont = ['绿','蓝','黑','黄','红'];
//字数组
var arrColor = ['green','blue','black','yellow','red'];
//颜色数组
var score = 0;
//分数
var start_bol = false;
//判断是否开始游戏
//开始按钮点击事件
start.onclick = function(){
	if(start_bol){return}
	//如果游戏开始后不可以再执行开始游戏函数，反之执行
	start_bol = true ;
	//设定为游戏开始
	startFn();
}
//开始游戏函数
function startFn(){
	//初始化
	score = 0;
	//分数初始为0
	fs.innerHTML = "完成："+score;
	//页面显示也为0
	timeFn(20);
	//2.倒计时
	btnFn();
	//3.按钮点击
	//初始化
	changeShow();
	//改变题目
	changeBnts();
	//改变按钮
}
//五个颜色按钮的点击事件
function btnFn(){
	for (var i=0; i<li.length; i++) {
		li[i].onclick = function(){
			if(!start_bol){return;}
			//如果游戏开始后执行点击，反之不执行
			//判断点击是否正确
			checkFn(this.innerHTML);
			//改变题目
			changeShow();
			//改变按钮
			changeBnts();
		}
	}
}
//游戏剩余时间函数
function timeFn(n){
	var timer = setInterval(function(){
		n-=0.02;
		//每20毫秒减0.02
		if(n<=0){
		//如果小于0
			clearInterval(timer);
			//清除定时器
			n=0;
			//n会有偏差所以需要强制设为0
			start_bol = false;
			//设定游戏结束
		}
		time.innerHTML = "剩余时间："+n.toFixed(2);
		//每20毫秒修改剩余时间标签内容
	},20)
}
//随机函数
function rndFn(min,max){
	return Math.round(Math.random()*(max-min)+min);//返回max到min的随机数
}
//随机打乱数组内容
function sortFn(arr){
	arr.sort(function(){return Math.random()-0.5});
	return arr;
}
//题目文字随机改变文字与颜色
function changeShow(){
	show.innerHTML = arrFont[rndFn(0,4)];
	//随机获取文字
	show.style.color = arrColor[rndFn(0,4)];
	//随机获取颜色
}
//五个颜色按钮随机改变文字的顺序和颜色
function changeBnts(){
	arrFont = sortFn(arrFont);
	//打乱文字数组
	arrColor = sortFn(arrColor);
	//打乱颜色数组
	for (var i=0; i<li.length; i++) {
	//分配值
		li[i].innerHTML = arrFont[i];
		li[i].style.color = arrColor[i];
	}
}
//判断统计
function checkFn(btnFont){
	var color = show.style.color;
	//获取题目字体颜色
	var str ='';
	//定义存放题目字体颜色的中文值
	//判断颜色并赋值给str
	switch (color){
		case 'green':str = '绿';break;
		case 'black':str = '黑';break;
		case 'blue':str = '蓝';break;
		case 'yellow':str = '黄';break;
		case 'red':str = '红';break;
	}
	//判断点击的内容文字与题目文字的颜色并统计分数
	if(btnFont == str){
		score++
	}else{
		score--
	}
	fs.innerHTML = "完成："+score;
	//显示分数在页面
}

大图tab

Veröffentlicht am 2016-08-21

首页头部的图片切换案例

1
2

做前端的一定要会做头部的图片切换，例如淘宝、京东等等页面都有这些功能，所以我们可以做好一些例子把它封成一个函数，以备不时之需！！
以下所介绍的是，以淘宝和京东为例子的切换案例，喜欢就收下

左右移动的图片切换

<div class="wrap">
	<div class="inner">
		<img src="1.jpg"/>
		<img src="2.jpg"/>
		<img src="3.jpg"/>
		<img src="4.jpg"/>
		<img src="1.jpg"/>
	</div>
	<div id="left"><</div>
	<div id="right">></div>
	<div id="dd">
		<span class="select"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

.wrap{
	width: 520px;
	height: 280px;
	border: 5px solid skyblue;
	overflow: hidden;
	position: relative;
}
.inner{
	width: 500%;
	overflow: hidden;
	position: relative;
}
.inner img{
	width: 520px;
	float: left;
}
#left{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	left: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
}
#right{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	right: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
}
#dd{
	width: 60px;
	height: 13px;
	border-radius: 5px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 10px;
}
#dd span{
	width: 9px;
	height: 9px;
	background: #b7b7b7;
	border-radius: 5px;
	float: left;
	margin-left: 5px;
}
#dd .select{
	background: red;
}

//获取移动标签
var inner = document.getElementsByClassName('inner')[0];
//获取左右按钮
var lBtn = document.getElementById('left');
var rBtn = document.getElementById('right');
//获取图片位置点
var span = document.getElementsByTagName('span');
	
//定义记录图片位置值
var index = 0;
//定义布尔值记录动画是否开始
var move_bol = false;
	
//自动化动画
var mytimer =setInterval(function(){
	rBtn.click();
	//模拟手动点击下一张，每3000毫秒点击一次
},3000);
//下一张点击事件
rBtn.onclick = function(){
	if(move_bol){return}
	//动画正在移动就退出点击事件
	index ++;//记录位置
	if (index > 4) {
		index = 1;
		//最后一张时记录位置为第二张
		inner.style.left = '0px';
		//回到第一张
	}
	moveFn();
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//上一张点击事件
lBtn.onclick = function(){
	if(move_bol){return}
	//动画正在移动就退出点击事件
	index --;//记录位置
	if (index < 0) {
		index = 3;
		//第一张时记录位置为最后一张
		inner.style.left = '-2080px';
		//到达末尾第一张（注：末尾就是第一张  ）
	}
	moveFn();
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//图片位置点切换的点击事件
for (var i=0; i < span.length; i++) {
	span[i].index = i;
	//记录图片位置点位置
	span[i].onclick = function(){
		if(move_bol){return}
		//动画正在移动就退出点击事件
		index = this.index;
		//把图片位置点位置赋值给位置
		changespanFn();
		//执行动画函数
		moveFn();
		//执行图片位置点切换函数
	}
}
	
//图片位置点切换的函数
function changespanFn(){
	for(var i=0; i< span.length; i++){
		span[i].className = '';
		//清空所有图片位置点的样式，防止样式重叠
	}
	var j;
	if (index == 4) {
	//末尾时是第一张
		j = 0;
	}else{
		j = index;
	}
	span[j].className ='select';
	//设置当前图片位置点的样式
}
//图片动画函数	
function moveFn(){
	move_bol = true;
	//记录动画开始
	var start = parseInt(inner.style.left) || 0;
	//初始位置
	var change = -(inner.children[0].offsetWidth)*index-start;
	//移动的距离
	var t = 0;
	//第几步开始
	var endT = 30;
	//执行步数
	
	var timer = setInterval(function(){
		t++;
		//每30毫秒加一步
		if(t >= endT){
			clearInterval(timer);
			//endT步后清除计时器
			move_bol = false;
			//记录动画结束
		}
		//调用运动曲线Bounce的easeOut函数参数顺序：第几步开始，初始位置，移动的距离，执行步数
		var l = Tween.Bounce.easeOut(t, start, change, endT);
		//计算每30毫秒移动的距离
		inner.style.left = l+'px';
		//移动
	},30)
}

最后附上Tween的js代码

// JavaScript Document
var Tween = {
    Linear: function(t,b,c,d){ return c*t/d + b; },
    Quad: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c *(t/=d)*(t-2) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
        }
    },
    Cubic: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
        }
    },
    Quart: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
        }
    },
    Quint: {
        easeIn: function(t,b,c,d){
            return c*(t/=d)*t*t*t*t + b;
        },
        easeOut: function(t,b,c,d){
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
        }
    },
    Sine: {
        easeIn: function(t,b,c,d){
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sin(t/d * (Math.PI/2)) + b;
        },
        easeInOut: function(t,b,c,d){
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
        }
    },
    Expo: {
        easeIn: function(t,b,c,d){
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
        },
        easeOut: function(t,b,c,d){
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
        },
        easeInOut: function(t,b,c,d){
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
        }
    },
    Circ: {
        easeIn: function(t,b,c,d){
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
        },
        easeOut: function(t,b,c,d){
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
        },
        easeInOut: function(t,b,c,d){
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
        }
    },
    Elastic: {
        easeIn: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        },
        easeOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
        },
        easeInOut: function(t,b,c,d,a,p){
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
            else var s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
        }
    },
    Back: {
        easeIn: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*(t/=d)*t*((s+1)*t - s) + b;
        },
        easeOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158;
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
        },
        easeInOut: function(t,b,c,d,s){
            if (s == undefined) s = 1.70158; 
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        }
    },
    Bounce: {
        easeIn: function(t,b,c,d){
            return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;
        },
        easeOut: function(t,b,c,d){
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }
        },
        easeInOut: function(t,b,c,d){
            if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;
            else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
        }
    }
}

淡入类型的图片切换

<div class="wrap">
	<div class="inner">
		<img style="opacity: 1;" src="1.jpg"/>
		<img src="2.jpg"/>
		<img src="3.jpg"/>
		<img src="4.jpg"/>
	</div>
	<div id="left"><</div>
	<div id="right">></div>
	<div id="dd">
		<span class="select"></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

.wrap{
	width: 520px;
	height: 280px;
	border: 5px solid skyblue;
	overflow: hidden;
	position: relative;
}
.inner{
	width: 500%;
	overflow: hidden;
	height: 100%;
	position: relative;
}
.inner img{
	width: 520px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 0;
}
#left{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	left: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
	z-index: 2;
}
#right{
	width: 24px;
	height: 36px;
	position: absolute;
	background: rgba(0,0,0,0.5);
	right: 0;
	top: 46.538461%;
	font-size: 30px;
	text-align: center;
	line-height: 36px;
	color: white;
	cursor: pointer;
	z-index: 2;
}
#dd{
	width: 60px;
	height: 13px;
	border-radius: 5px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 10px;
	z-index: 2;
}
#dd span{
	width: 9px;
	height: 9px;
	background: #b7b7b7;
	border-radius: 5px;
	float: left;
	margin-left: 5px;
}
#dd .select{
	background: red;
}

//获取移动标签
var inner = document.getElementsByClassName('inner')[0];
//获取左右按钮
var lBtn = document.getElementById('left');
var rBtn = document.getElementById('right');
//获取图片位置点
var span = document.getElementsByTagName('span');
var img = inner.getElementsByTagName('img');
//定义记录图片位置值
var index = 0;
//定义布尔值记录动画是否开始
var move_bol = false;
	
//自动化动画
var mytimer =setInterval(function(){
	rBtn.click();
	//模拟手动点击下一张，每3000毫秒点击一次
},3000);
//下一张点击事件
rBtn.onclick = function(){
	if(move_bol){return}
	//动画正在执行就退出点击事件
	var before = index;
	index ++;//记录位置
	if (index > 3) {
		index = 0;
		//最后一张时记录位置为第二张
	}
	showFn(before);
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//上一张点击事件
lBtn.onclick = function(){
	if(move_bol){return}
	//动画正在执行就退出点击事件
	var before = index;
	index --;//记录位置
	if (index < 0) {
		index = 3;
		//第一张时记录位置为最后一张
	}
	showFn(before);
	//执行动画函数
	changespanFn();
	//执行图片位置点切换函数
}
//图片位置点切换的点击事件
for (var i=0; i < span.length; i++) {
	span[i].index = i;
	//记录图片位置点位置
	span[i].onclick = function(){
		if(move_bol){return}
		//动画正在执行就退出点击事件
		var before = index;
		index = this.index;
		//把图片位置点位置赋值给位置
		changespanFn();
		//执行动画函数
		showFn(before);
		//执行图片位置点切换函数
	}
}
	
//图片位置点切换的函数
function changespanFn(){
	for(var i=0; i< span.length; i++){
		span[i].className = '';
		//清空所有图片位置点的样式，防止样式重叠
	}
	span[index].className ='select';
	//设置当前图片位置点的样式
}
//图片动画函数
function showFn(before){
	move_bol = true;
	//记录动画开始
	var t = 0;
	//初始透明度
	for(var i=0; i< img.length; i++){
		img[i].style.zIndex = 0;
		if(before!=i){
			img[i].style.opacity = 0;
			//除上一张以外其他设为透明，让显示不违和
		}
	}
	img[index].style.zIndex = 1;
	//当前张位置上移覆盖上一张
	var timer = setInterval(function(){
		t++;
		//逐渐增加不透明度
		if(t >= 50){
			clearInterval(timer);
			move_bol = false;
			//记录动画结束
		}
		img[index].style.opacity = t/50 ;
	},30)
}

案例

Veröffentlicht am 2016-08-21

案例 – JS实现留言（DOM练习）

DOM 是 Document Object Model（文档对象模型）的缩写。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1)整个文档是一个文档节点
2)每个 HTML 元素是元素节点
3)HTML 元素内的文本是文本节点
4)每个 HTML 属性是属性节点
5)注释是注释节点

js实现留言板

<div class="wrap">
	<p>姓名:<input type="text" id="username" value=""/></p>
	<p>内容:<textarea  rows="10" cols="35" id="message"></textarea></p>
	<p class="p"><input type="button" id="btn" value="提交" /></p>
	<div class="d">
		<h2>显示留言</h2>
	</div>
	<ul>
		<!--<li>
			<div>1</div><div><span>1</span><a href="###">删除</a></div>
		</li>-->
	</ul>
</div>

html,body{
	margin: 0;
	padding: 0;
}
.wrap{
	width: 500px;
	min-height: 500px;
	margin: auto;
	background-color: #ddd;
	padding-top: 10px;
}
#username{
	width: 410px;
	height: 30px;
	font-size: 20px;
	border: 1px solid #bbb;
	vertical-align: middle;
}
p{
	width: 500px;
	line-height: 16px;
	text-align: center;
	font-weight: bolder;
}
textarea{
	vertical-align: text-top;
	font-size: 20px;
	border: 1px solid #bbb;
}
.p{
	width: 220px;
}
#btn{
	width: 90px;
	height: 30px;
	border: 1px solid #bbb;
	background: white;
}
.d{
	width: 450px;
	margin: auto;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
li{
	border-bottom: 1px solid #999999;
	height: 80px;
	overflow: hidden;
	/*margin-bottom: 10px;*/
}
li div{
	width: 450px;
	margin: auto;
}
li div:nth-child(1){
	width: 435px;
	background: #999;
	line-height: 30px;
	padding-left: 1em;
}
li div:nth-child(2){
	background: white;
	min-height: 40px;
	overflow: hidden;
}
ul li span{
	text-indent: 3em;
	float: left;
}
ul li a{
	float: right;
	margin-right: 1em;
}

/*
 * 知识点
 * Selector参照jQuery的元素获取，通过css选择器获取元素
 *querySelector获取一个元素，如果有多个同名的只选择第一个
 *querySelectorAll获取一组元素，结果得到一个数组，使用方法与数组一样
*/
//获取姓名文本框
var username = document.querySelector('#username');
//获取内容文本框
var message = document.querySelector('#message');
//获取按钮
var btn = document.querySelector('#btn');
//获取留言区ul
var ul = document.querySelector('ul');
	
//按钮点击事件
btn.onclick = function (){
	//判断文本框是否为空，一个为空都要执行if里的代码块
	if (username.value == '' || message.value == '') {
		alert('请输入完整信息！');
		return;
	}
	/*
	 * 知识点
	 * 在document（文档）中创建一个标签节点 document.createElement(obj)
	 * 在元素里的后面添加 obj.appendChild(newNode)
	 * 在元素里某个节点前面添加 obj.insertBefore(newNode, node)
	 * 在元素里替换某个节点	obj.replaceChild(newNode, oldNode)
	 * 在元素里移除某个节点	obj.removeChild(node)
	 * 在元素里添加文本/HTML代码  obj.innerHTML = 文本/HTML代码
	 * 获取文本框的光标 input.focus()
	 */
	var li = document.createElement('li');//创建一个li节点
	//给li添加内容
	li.innerHTML = '<div>'+username.value+'</div><div><span>'+message.value+'</span><a href="###">删除</a></div>';
	li.style.height = '0px';//高度设为0
	ul.appendChild(li);//在ul里面的最后面添加li
	myFn(li,80);//启动动画函数
	message.value = '';//清空内容
	message.focus();//让内容文本框获取光标
	//获取当前li里的删除标签
	var a = li.querySelector('a');
	//设置当前li里的删除标签的点击事件
	a.onclick = function(){
		//启动动画函数
		myFn(li,0,function(obj){
			//在动画末端添加函数执行另外操作
			ul.removeChild(obj);//移除当前a的爷爷li
			//退出函数
			return;
		});
	}
}
/*
 * 函数注释
 * 改变元素高度动画函数
 * obj参数是你的元素，不可为空
 * end参数是最终高度，不可为空
 * fn参数是计时器结束后执行的回调函数，可为空
 */
function myFn(obj,end,fn){
	var start = parseInt(getStyle(obj,'height')) ;
	//初始高度
	var change = end - start;
	//改变的高度值
	var t = 0;
	//第几步开始
	var endT = 30;
	//执行步数
	var timer = setInterval(function(){
	//设置计时器
		t++;
		//每30毫秒加一步
		if(t >= endT){
		//当到达第30步时执行if里的代码块
			clearInterval(timer);
			//endT步后清除计时器
			//如果fn是一个函数则执行fn()，否则不执行
			fn && fn(obj);
		}
		var h = Tween.Bounce.easeOut(t, start, change, endT);//计算每30毫秒移动的距离
		obj.style.height = h+'px';
	},30);
}
/*
 * 函数注释
 * 获取元素非行内样式函数
 * obj参数是你的元素，不可为空
 * attr参数是样式属性，不可为空
 * 返回的是属性值
 */
function getStyle(obj,attr){
	/*
	 * 知识点
	 * currentStyle  IE下有，非IE下没有
	 * getComputedStyle 非IE下有，IE下没有
	 */
	//判断是否有obj.currentStyle，有就返回obj.currentStyle[attr]，没有返回getComputedStyle(obj,null)[attr]
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}

补充知识点

复制节点

<div style="background: bisque;">
	I'm Div
	<span>I'm Span</span>
</div>

var div =document.querySelector('div');
/*
 * cloneNode:复制节点 参数为布尔值
 * 参数为false：浅复制，只复制标签
 * 参数为true： 深复制，复制标签所有内容
 */
var clone_div = div.cloneNode(false);
clone_div.innerHTML += "浅复制";
var clone_div1 = div.cloneNode(true);
clone_div1.innerHTML += "深复制";
document.body.appendChild(clone_div);
document.body.appendChild(clone_div1);

标签属性操作

1
2
3

<div id="d1" class="d1" abc="a" index="0">
	I'm Div
</div>

var div = document.getElementById('d1');
//alert(div.index);//undefined
//获取标签里的属性
alert(div.getAttribute("index"));//0
//修改标签里的属性
div.setAttribute('index', '5');
alert(div.getAttribute("index"));//5
//删除标签里的属性
alert(div.getAttribute("abc"));//a
div.removeAttribute('abc');
alert(div.getAttribute("abc"));//null

children

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</li>
</ul>

var ul = document.querySelector('ul');
//children获取所有是标签类型的子节点
var li = ul.children;
//获取ul里所有标签子节点
for (var i = 0; i<li.length;i++) {
	if(i%2 == 0){
		li[i].style.background = 'lavender'
	}else{
		li[i].style.background = 'blanchedalmond'
	}
}
var l11 = li[9].children[0].children[1];
l11.style.background = 'forestgreen';

查找节点

ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

var ul = document.querySelector('ul');
var li = ul.children;
/*
 * nextSibling
 * 在IE下nextSibling查找的下一个节点只有节点类型为标签的节点，非IE下查找下一个节点为节点类型所有类型节点
 */
//alert(li[0].nextSibling.nodeName);//#text
//解决方法
//if(li[0].nextElementSibling){
	//li[0].nextElementSibling.style.background = 'forestgreen';//非IE的方法（IE下没有这一方法）
//}else{
	//li[0].nextSibling.style.background = 'forestgreen';
	//IE的方法
//}
//***************************************************************************
	
//查找下一个节点函数
/*
 * obj参数为当前标签元素
 */
function nextFn (obj) {
	return obj.nextElementSibling?obj.nextElementSibling:obj.nextSibling;
}
//调用
nextFn(li[1]).style.background = 'burlywood';
	
//****************************************************************************
	
//查找上一个节点函数
/*
 * obj参数为当前标签元素
 */
function previousFn(obj){
	return obj.previousElementSibling?obj.previousElementSibling:obj.previousSibling;
}
//调用
previousFn(li[4]).style.background = 'skyblue';
	
//***************************************************************************
	
//查找第一个子节点函数
/*
 * obj参数为第一个子节点的父级标签元素
 */
function firstFn(obj){
	return obj.firstElementChild?obj.firstElementChild:obj.firstChild;
}
//调用
firstFn(ul).style.background = 'palegreen';
	
//*****************************************************************************
	
//查找最后一个子节点函数
/*
 * obj参数为最后一个子节点的父级标签元素
 */
function lastFn(obj){
	return obj.lastElementChild?obj.lastElementChild:obj.lastChild;
}
//调用
lastFn(ul).style.background = 'coral';
	
//******************************************************************************

查找元素在文档的top和left

/*
*offsetFn 查找元素在文档的top和left
*obj 目标元素 不可为空
*逐级询问父子的top和left 并返回json
*/
function offsetFn(obj) {
	var t = 0;
	var l = 0;
	while(obj){			
		var bT = parseInt(getStyle(obj,"borderTopWidth"));
		var bL = parseInt(getStyle(obj,"borderLeftWidth"));
		t += obj.offsetTop + bT ;
		l += obj.offsetLeft + bL;
		obj = obj.offsetParent;
	}
	return {"top":t,"left":l};
}
/*
 * 函数注释
 * 获取元素非行内样式函数
 * obj参数是你的元素，不可为空
 * attr参数是样式属性，不可为空
 * 返回的是属性值
 */
function getStyle(obj,attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,null)[attr];
	}
}
//调用
var Dtop = offsetFn(div).top;
var Dleft = offsetFn(div).left;

loading...

Veröffentlicht am 2016-08-21

图片加载

懒加载

1 2	<div></div> <img data-src="img/1.jpg" alt=""/>

body{
	height: 3000px;
}
*{
	margin: 0;
	padding: 0;
}
img{
	position: absolute;
	top: 1000px;
}
div{
	height: 1000px;
	background: skyblue;
}

//获取 img 标签
var img = document.querySelector('img');
//获取 img 的top值
var imgTop = img.offsetTop;
//滚动条滚动时
window.onscroll = function(){
	//获取滚动条高度
	var sTop = document.body.scrollTop || document.documentElement.scrollTop;
	//获取窗口高度
	var wTop = document.documentElement.clientHeight;
	//判断位置是否抵达图片位置
	if (sTop+wTop > imgTop) {
		//赋值给src
		img.src = img.getAttribute('data-src');
	}
}

预加载

div{
	position: absolute;
	width: 100%;
	height: 100%;
	background: black;
	color: white;
	font-size: 50px;
	text-align: center;
}

<div>
	<span>0%</span>
	loading ... ...
</div>

var div = document.querySelector('div');
var span = document.querySelector('span');
var imgArr = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg','7.jpg','8.jpg'];
	
loadImageFn(imgArr,function(index){
	span.innerHTML = parseInt(index/imgArr.length*100) + '%';
//alert(index);
},function(){
	div.style.display = 'none';
});
/*
 * loadImageFn 预加载图片函数
 * arr参数是图片数组
 * fn是过程回调函数
 * over是结束回调函数
 * IE6判断不了
 */
function loadImageFn (arr,fn,over) {
	var index = 0;
	//加载第几张
	for (var i=0; i < arr.length; i++) {
		var img = new Image();
		//定义一个图片的对象
		img.src = 'img/'+ arr[i];
		//设置路径
		img.onload = function(){
			index ++; 
			//加载
			if (index == arr.length) {
			//图片加载完成后
				alert('加载完成!')
				over && over();
				//结束回调函数
			}
			fn && fn(index);
			//过程回调函数
		}
	}
}

tab

Veröffentlicht am 2016-08-21

切换

利用滚动条原理可以做到切换效果，举一栗子：

.wrap{
	width: 300px;
	height: 300px;
	border: 5px solid darkcyan;
	overflow: hidden;
}
.inner{
	width: 400%;
	height: 100%;
	overflow: hidden;
}
.inner div{
	width: 25%;
	height: 100%;
	text-align: center;
	line-height: 300px;
	font-size: 50px;
	background: darkkhaki;
	float: left;
	
}

<input type="button" id="" value="1" />
<input type="button" id="" value="2" />
<input type="button" id="" value="3" />
<input type="button" id="" value="4" />
<div class="wrap">
	<div class="inner">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
</div>

var btn = document.querySelectorAll('input');
var wrap = document.querySelector('.wrap');
for (var i = 0; i< btn.length; i++) {
	btn[i].index = i;
	btn[i].onclick = function (){
		wrap.scrollLeft = this.index*(wrap.offsetWidth-10);
	}
}

JavaScript的组成

特点

引入方式和弹出框

直接上颗栗子

注释

变量

命名规范

javascript操作符

赋值操作符

算术操作符

直接上颗栗子

关系操作符(返回布尔值)

直接上颗栗子

逻辑操作符

直接上颗栗子

条件操作符

获取元素

直接上颗栗子

onclick 事件

直接上颗栗子

onmouseover onmouseout 事件

直接上颗栗子

++a与a++

直接上颗栗子

小贴士

如果用上面的写法弹出的会是undefined，是因为代码是由上往下执行，a还没执行，js已经执行完了，所以没有找到a，解决方法有两种：

1.在或a后面写：

2.如果你想要在head里面写，可以给他加一个onload事件，然它先加载标签在运行js：

1.a标签里嵌套img时，不同浏览器下会出现不同颜色边框：

2.各个浏览器下图片与图片之间有间隙：

3.清除浮动

以上清除浮动方法在IE6中无效果

4.opacity在IE6中无效

5.ie6有float，有横向margin时，ie双倍间距

6.在ie6，内容宽高超出我们设置的宽高时，内容会撑开设置好的宽高

7.在ie6下最小高度19px,字体太大会溢出（默认行高）

8.在ie6下png图片不透明

9.左浮元素margin-bottom失效

10.ul、ol的li中,如有元素浮动,在ie6中会出现多出几像素的问题

10.IE6怪异解析之padding与border算入宽高

11.以下三种其实是同一种bug，其实也不算是个bug，举个例子：父标签高度20，子标签11，垂直居中，20-11=9，9要分给文字的上面与下面，怎么分？IE6就会与其它的不同，所以，尽量避免。

12.内部盒模型超出父级时，父级被撑大

13.line-height默认行高bug

14.行标签之间会有一小段空白

15.标签高度无法小于19px

16.左浮元素margin-bottom失效

21.子级中有设置position，则父级overflow失效

CCS（是一组格式设置规则，用于控制web外观）

web标准结构

结构 HTML+

样式 CSS+

行为 交互行为javascript

特点

CSS引入方式

CSS基础语法

CSS属性

扩展：

border（边框）

display

小贴士：

文本设置

常用布局

a标签的伪类（编辑时请注意按顺序编写）

拓展

盒模型

CSS 注意的问题

BFC

IFC

IE6怪癖解析

cCSS hack

HTML是一种超文本标签语言

html的基本结构如下：

meta的其他属性值(与SEO优化有关联)

h1~h6:定义标题，作为标题使用

p:定义段落

br:换行

ol:有序列表

ul:无序列表

dl:定义列表（dl—dt—dd）比如词典中的解释

table表格:(顺序thead-tbody-tfoot）

行为交互行为javascript

var:显示为斜体定义变量文本

em:斜体定义强调文本

strong（更强的强调）显示为粗体定义强调文本