前端基础学习笔记

HTML简介

　　HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)，专门制作网页的计算机语言。普通的文本就是英文单词，英文字母一样的存在。超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。比如：我们都是普通人，但是有些人经过国家的选拔，穿上警服之后，他就被赋予了执法的特殊权利，普通人是没有执法权的。字母img只是普通的字母，没什么特殊的含义。而<img>被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

换行标签

<br/>

段落标签

<p></p>

水平线标签

 <hr>标签会在页面上产生一个水平线

　　对于hr标签它有常用属性:

　　align：可取值有left right center 代表水平线位置

　　size：代表水平线厚度（粗细）

　　width：代表水平线宽度

　　color：水平线的颜色

分区标签

div是一个块标签，用来进行布局的

普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版

div与span都是“容器”的作用，具体区别:

　　div会自动换行，我们也叫这样的标签为块级元素

　　span标签它不会自动换行，我们也叫它为行内元素

　　div：整体划分区块

　　span：局部划分

字体标签

<font>标签可以设置字体，字的大小及颜色，常用属性：

　　face:用于设置字体，例如 宋体 隶书 楷体

　　size:用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）

　　color:用于设置字的颜色

格式化标签

<b>：字体加粗

<i>：字体倾斜

<del>：删除线

<u>：下划线

列表标记

ol：有序列表

　　type='A'：字母排序

　　type='I'：罗马排序

　　start=“3” 序列从几开始

ul：无序列表

　　type="disc"：默认，实心圆

　　type="square"：方块

　　type="circle"：空心圆

图像标签

<img>它可以让我们在网页引入一张图片，常用属性：

　　1. src 代表的图片的路径

　　2. width 图片的宽度

　　3. height 图片的高度

　　4. border 用于设置图片的边框

　　5. alt 如果图片不可以显示时，默认显示的文本信息

　　6. title鼠标悬停图片上，默认显示的文本信息

　　7. align 图片附件文字的对齐方式，可取值有

　　　　left：把图像对齐到左边

　　　　right：把图像对齐到右边

　　　　middle：把图像与中央对齐

　　　　top：把图像与顶部对齐

　　　　bottom：把图像与底部对齐（默认）

超连接标签

<a>标签,可以实现跳转到其它页面操作.

超链接内容不仅可以是文本，也可以是图片等信息

常用属性：

　　1. href 代表的我们要跳转的路径

　　2. target 这个属性规定在何处打开这个链接文档，可取值：

　　　　_ blank 在新窗口中打开页面

　　　　_ self 默认。在本窗口打开页面

功能性链接：

1.发邮件

<a href="mailto:sunguoan@163.com">联系站长</a>

2.QQ聊天窗口

<a href="tencent://message/?uin=19998539&Menu=yes"> <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/> </a>

表格

 <table>：定义一个表格

　　border：边框，取值是像素为单位

　　width 代表的表格的宽度

　　align 代表表格的对齐方式；取值

　　　　left 左对齐表格

　　　　right 右对齐表格

　　　　center 居中对齐表格

　　cellspacing：单元格间距（通常设置0表示单线表格）

<tr>：表格中的行 （Table Row）

　　align 代表表格的对齐方式；取值

　　　　left 左对齐内容（默认值）

　　　　right 右对齐内容

　　　　center 居中对齐内容（th 元素的默认值）

<td>：表格中的数据单元格 （Table DataCell）

　　colspan 指示列的合并

　　rowspan 指示行的合并

form属性

action：整个表单提交的目的地

method：表单提交的方式

　　get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）

　　post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

表单中的元素(控件)

 <input>元素的type属性

　　text：默认值，普通的文本输入框

　　　　placeholder属性：提示文本

　　　　maxlength属性：最多能输入字符数量

　　password：密码输入框

　　checkbox：多选框/复选框

　　　　checked：被选中

　　radio：单选按钮

　　file：上传文件

　　reset：重置按钮

　　submit：提交按钮

　　button：普通按钮

<select>：下拉列表/下拉框

　　<option>：列表中的项

　　　　selected：被选中

<textarea>：文本域（多行文本框）

　　可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。

<button>：按钮

　　在form表单中，作用和submit一样

　　不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

框架标签

通过<frameset>和<frame>框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。

注意，框架标签和body标签不共存。“有你没我，有我没你”

<meta>标签

<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge">

1. 当前页面的字符编码 gbk：中文简体

2. 这里 的 名字 是 viewport （显示窗口）

　　数据 是 文本 内容 content="width=device-width, initial-scale=1.0"

　　也就是 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是1.0

3. 每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染

 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

<meta http-equiv="refresh" content="5; url=http://www.lagou.com">

H5新增语义标签

 新增许多语义化标签，让div“见名知意”

　　section标签：表示页面中的内容区域，部分，页面的主体部分

　　article标签：文章

　　aside标签：文章内容之外的，标题

　　header标签：头部，页眉，页面的顶部

　　hgroup标签：内容与标题的组合

　　nav标签：导航

　　figure标签：图文并茂

　　foot：页脚，页面的底部

媒体标签

想在网页上播放视频，就要使用<video>，属性有：

src：媒体资源文件的位置

controls：控制面板

loop：循环播放

autoplay：自动播放（谷歌失效，360浏览器可以）

loop：循环播放

<video src="img/html-css-js之间的关系.mp4" controls loop autoplay></video>

新增表单控件

 表单的控件更加丰富了

　　<input>，修改type属性：

　　　　color：调色板

　　　　date：日历

　　　　month：月历

　　　　week：周历

　　　　number：数值域

　　　　　　min：最小值（默认值是1）

　　　　　　max：最大值（默认值无上限）

　　　　　　step：递增量

　　　　range：滑块

　　　　search：搜索框（带×号，可一键删除框中内容）

　　进度条<progress/>

　　高亮<mark>

　　联想输入框<datalist> （模糊查询）

　　　　选项<option>

CSS

• CSS是指层叠样式表 cascading style sheets
• 通过CSS可以让我们定义HTML元素如何显示。
• CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
• 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

 CSS样式加载

 关于外部导入css使用<link>与@import的区别?

1. 加载顺序不同

　　@import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有

　　修饰的页面，然后才看到修饰后的页面。

　　如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；

2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。

三种样式表的优先级：满足就近原则

内联 > 内部 > 外部

CSS伪类

 伪类属性列表： 

　　:active 向被激活的元素添加样式。 

　　:hover 当鼠标悬浮在元素上方时，向元素添加样式。

　　:link 向未被访问的链接添加样式。 

　　:visited 向已被访问的链接添加样式。

　　:first-child 向元素的第一个子元素添加样式。

伪类使用原则

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

a:link {color: #FF0000} /* 未访问的链接 */ 
a:visited {color: #00FF00} /* 已访问的链接 */ 
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 
a:active {color: #0000FF} /* 选定的链接 */

文本属性

指定字体：font-family : value;

字体大小：font-size : value;

　　px：像素

　　em：倍数

字体加粗：font-weight : normal/bold;

文本颜色：color : value;

文本排列：text-align : left/right/center;

文字修饰：text-decoration : none/underline;

行高：line-height : value;

首行文本缩进：text-indent : value （2em）;

背景属性

background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-image: url('img/1.jpg');

 background-repeat 设置背景图像的墙纸效果，是否及如何重复

　　repeat：在垂直方向和水平方向重复，为重复值

　　repeat-x：仅在水平方向重复

　　repeat-y：仅在垂直方向重复

　　no-repeat：仅显示一次

background-position 设置背景图像的起始位置

1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动

2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动

 

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

　　默认值是 scroll：默认情况下，背景会随文档滚动

　　可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像

列表属性

 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

　　none：无标记。（去除标记）

　　disc：默认。标记是实心圆。

　　circle：标记是空心圆。 

　　square：标记是实心方块。

　　decimal：标记是数字。

　　decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)

　　lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)

　　upper-roman：大写罗马数字(I, II, III, IV, V, 等。)

　　lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)

　　upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

边框属性

 轮廓属性

 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

　　边框 (border) 可以是围绕元素内容和内边距的一条或多条线；

　　轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

盒子模型

 CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

  margin(外边距) - 盒子与盒子之间的距离

  border(边框) - 盒子的保护壳

  padding(内边距/填充) - 内填充，盒子边与内容之间的距离

  content(内容) - 盒子的内容，显示的文本或图像

 CSS定位

 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高

行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高

行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

浮动定位

 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。

float取值：

　　none ：不浮动

　　left：贴着左边 浮动

　　right：贴着右边 浮动

相对定位

 和原来的位置进行比较，进行移动定位（偏移）

绝对定位

 本元素与已定位的祖先元素的距离

• 如果父级元素定位了，就以父级为参照物；
• 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
• 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

固定定位

 将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

z-index

 如果有重叠元素，使用z轴属性，定义上下层次。

注意：

　　z轴属性，要配合相对或绝对定位来使用。

　　z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

圆角

 border-radius：左上 右上 右下 左下;

 border-radius：四个角;

 border-radius：50%; 圆形

盒子阴影

 box-shadow：1 2 3 4 5;

1：水平偏移

2：垂直偏移

3：模糊半径

4：扩张半径

5：颜色

线性渐变

 background:linear-gradient([方向/角度]，颜色列表)；

eg:

.a4 {
　　background: linear-gradient(to top left,red,black); 
}

径向渐变

background: radial-gradient(颜色列表);　　　　// 以圆心向外散发

eg

.a2 { background: radial-gradient(red, black, pink, green); }

背景位置

 background-origin：指定了背景图像的位置区域

　　border-box : 背景贴边框的边

　　padding-box : 背景贴内边框的边

　　content-box : 背景贴内容的边

背景裁切

 background-clip:

　　border-box 边框开切

　　padding-box 内边距开切

　　content-box 内容开切

背景大小

 background-size:

• cover 缩放成完全覆盖背景区域最小大小
• contain 缩放成完全适应背景区域最大大小

过渡

 从一个状态到另一个状态，中间的“缓慢”过程；

缺点是，控制不了中间某个时间点。

transition｛1 2 3 4｝

1：过渡或动画模拟的css属性

2：完成过渡所使用的时间（2s内完成）

3：过渡函数。。。

4：过渡开始出现的延迟时间

transition: width 2s ease 1s;

动画

 从一个状态到另一个状态，过程中每个时间点都可以控制。

　　关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }

　　动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

　　1：动画帧

　　2：执行时间

　　3：过渡函数

　　4：动画执行的延迟（可省略）

　　5：动画执行的次数

 js的特点

 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序 （后面会学习不用浏览器也能运行）

• 解释执行：事先不编译，逐行执行
• 基于对象：内置大量现成对象
• 适宜：

　　　　客户端数据计算

　　　　客户端表单合法性验证

　　　　浏览器事件的触发

　　　　网页特殊显示效果制作

js的组成

•  ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准

• DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
• BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。
  • 弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小
  • 提供 Web 浏览器详细信息的定位对象
  • 提供用户屏幕分辨率详细信息的屏幕对象
  • 对 cookie 的支持
  • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX对象，进而实现ajax局部刷新技术

html引入js脚本的三种方式

• 行内脚本
• 内部脚本
• 外部脚本

 JS变量

• 因为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
• 声明变量： var x ; var x,y;
• 数值类型：number
  • 不区分整型数值和浮点型数值
  • 所有数字都采用 64 位浮点格式存储，类似于double 格式

• 字符串：string
  • 首尾由单引号或双引号括起

• 布尔类型：
  • 仅有两个值：true和false也代表1和0
  • 实际运算中true=1,false=0

• 布尔类型：
  • 仅有两个值：true和false也代表1和0
  • 实际运算中true=1,false=0

数据类型转换函数

• parseInt：强制转换成整数
  • 如果不能转换，则返回 NaN （NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字）
  • 例如：parseInt("6.32")=6

• parseFloat：强制转换成浮点数
  • 如果不能转换，则返回 NaN
  • 例如：parseFloat("6.32")=6.32

• typeof：查询数值当前类型，返回 string / number / boolean / object
  • 例如：typeof("test"+3)=="string"

null 与 undefined

• null 在程序中代表“无值”或者“无对象”
  • 可以通过给一个变量赋值 null 来清除变量的内容
• undefined
  • 声明了变量但从未赋值或者对象属性不存在

js运算

js也支持运算，比如算术运算，关系运算，逻辑运算，和java的运算规则大同小异

常用字符串API

• length:获取字符串的长度（字符串中字符的个数） 属性，没有小括号
• toUpperCase/toLowerCase :转大小写
• charAt(下标) ： 返回某个下标上的字符
• indexof(字符)：查找字符串中字符出现的首次下标
• lastIndexof(字符)：查找字符串中字符最后一次出现的下标
• substring(开始,结束)：截取字符串中一部分（结束是不包含的）
• replace(旧的,新的)：将字符串中的旧字符替换成新字符
• split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类型

js数组 - 初始化数组的三种方式

// 第一种 
var arr1 = new Array(); 
arr1[0] = 110; 
arr1[1] = 119; 
arr1[2] = 120; 
// 第二种 
var arr1 = new Array(10,"a",true); 
// 第三种 
var arr1 = [10,"a",true];

js数组的常用方法

• tostring()：将数组转换成字符串
• join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
• concat(新元素)：将原来的数组连接新元素，原数组不变。
• slice(开始，结束)：在数组中提取一部分，形成新的数组。
• reverse()：数组的反转（倒序）
• sort()：数组排序

 Number对象

Number.fixed(2); 自带四舍五入技能

js函数

•  使用关键字 function 定义函数

function 函数名( 形参列表 )
{ 
    // 函数体 
    return 返回值; 
}

• 函数声明后不会立即执行，会在我们需要的时候调用到。
• 注意：

• • 形参：一定不要带数据类型
  • 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号结束。

参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){ 
    console.log( arguments.length ); // 获得参数的个数 
    console.log( arguments[1] ); // 获得下标为1的参数 
}

构造函数

函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

匿名函数

没有名称的函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收                
    return a * 10 + b; 
};
console.log( fn(3, 4));   

全局函数

isNaN：检查其参数是否是非数字值

eval：用来转换字符串中的运算

encodeURI 与 decodeURI

 闭包

1、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。

2、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；

　　简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性

3、闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不 受外界干

扰。

4、直观的说就是形成一个不销毁的栈环境。

闭包的优缺点

闭包的优点： 方便调用上下文中声明的局部变量 逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题

闭包的缺点： 因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造 成内存泄露，内存消耗很大

弹框输出

• 普通弹框 alert("hello，拉勾");
• 控制台日志输出 console.log("谷歌浏览器按F12进入控制台");
• 页面输出 document.write("<h2>我爱你中国</h2>"); 将<h2>元素输出到<body>中
• 确认框 confirm("确定删除吗？");

DOM访问

• getElementById：通过id属性获得元素节点对象
• getElementsByName：通过name属性获得元素节点对象集
• getElementsByTagName：通过标签名称获得元素节点对象集

DOM修改

• 修改 HTML DOM 意味着许多不同的方面：
  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件（处理程序）

窗口事件

仅在 body 和 frameset 元素中有效。

• onload 当文档被载入时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

• onblur 当元素失去焦点时执行脚本
• onfocus 当元素获得焦点时执行脚本

鼠标事件 (Mouse Events)

• onclick 当鼠标被单击时执行脚本
• ondblclick 当鼠标被双击时执行脚本
• onmouseout 当鼠标指针移出某元素时执行脚本
• onmouseover 当鼠标指针悬停于某元素之上时执行脚本

键盘事件

• onkeydown 按下去
• onkeyup 弹上来

事件冒泡

先子，后父。事件的触发顺序*自内向外*，这就是事件冒泡；

<script> 
    // 代码不重要，重要是知道这个事件发生，是正常现象     
    document.getElementById("father").addEventListener("click", function() { 
        alert("父级元素的事件被触发：" + this.id); 
}); 
    document.getElementById("child").addEventListener("click",     function(e) { 
        e.stopPropagation() //取消事件的冒泡机制 
        alert("子级元素的事件被触发：" + this.id); 
}); 
</script>

事件捕获

先父,后子。事件触发顺序变更为*自外向内*，这就是事件捕获；

面向对象OOP

• 使用Object创建通用对象
• 使用构造函数
• 使用直接量

JSON

 大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜好不一样）

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

易于人阅读和编写，同时也易于机器解析和生成

{

　　属性1：值1，

　　属性2：值2，

　　。。。。

}

BOM操作

window对象

  location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button> 
<script> 
    function test(){ 
        console.log( "当前页面的URL路径地址："+ location.href );     
        location.reload(); // 重新加载当前页面（刷新） 
        location.href = "http://lagou.com"; // 跳转页面 
    } 
</script>

history浏览器历史

history对象会记录浏览器的痕迹

<button onclick="hui()">返回</button> 
<script> 
    function hui(){ 
        //history.go(-1); //上一级页面 
        history.back(); // 与go(-1)是等价的 
    } 
</script>    

navigator 导航（了解）

<script> 
        var str = ""; 
        str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>"; 
        str += "<p>浏览器的名称："+ navigator.appName+"</p>"; 
        str += "<p>浏览器的版本："+ navigator.appVersion+"</p>"; 
        str += "<p>硬件平台："+ navigator.platform+"</p>"; 
        str += "<p>用户代理："+ navigator.userAgent +"</p>"; 
        str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>"; 
        document.write(str); 
</script>

存储对象

本地存储localStorage

在关闭窗口或标签页之后将会删除这些数据

• 保存数据

　　　　localStorage.setItem("name","curry");

• 提取数据

　　　　localStorage.getItem("name");

• 删除数据

　　　　localStorage.removeItem("name");

会话存储 sessionStorage

会话，就是保持浏览器别关闭。

关闭浏览就等于结束了一次会话。

开启浏览器就意味着创建了一次会话。

• 保存数据

　　　　sessionStorage.setItem("name", "klay");

• 提取数据

　　　　var lastname = sessionStorage.getItem("name");

• 删除指定键的数据

　　　　sessionStorage.removeItem("name");

• 删除所有数据

　　　　sessionStorage.clear();

 计时操作

周期性定时器 setInterval

setInterval(1,2)：周期性触发代码exp （常用）

1：执行语句

2：时间周期，单位为毫秒

停止定时器clearInterval

一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<script> 
    function bian(){ 
        document.body.style.backgroundColor = "red"; 
    }
    //3秒之后调用 
    setTimeout(bian,3000); 
</script>