变量
- JavaScript的变量为弱类型变量，可以用来保存任何类型的数据。
- var 可以声明各种类型的数据
- 在JavaScript中，允许不声明变量而直接使用，系统将会自动声明该变量。此方法容易出错，不推荐使用。
- 不推荐使用未显式声明变量理由1:
JavaScript中，若尝试为未声明的变量赋值，JavaScript会自动隐式声明该变量。但隐式声明的变量总是会被创建为全局变量。 - 不推荐使用未显式声明变量理由2：
会造成与内置函数名字相同而使用混乱的情况，从而引起JavaScript中变量类型让人捉摸不透的局面。
- 不推荐使用未显式声明变量理由1:
- typeof 检测变量的数据类型，运算符返回一个用来表示表达式的数据类型的字符串。
- undefined：变量被声明后，但未被赋值
- string：用单引号或双引号来声明的字符串
- boolean：true或false
- number：整数或浮点数
- object：JavaScript中的对象、数组和null
等于（==）的情况下 只要值相同就返回true
全等（===）的时候需要值和类型都要匹配才能返回true
//取于后的符号，和第一个数有关
document.write(10%-3+"
");//1
document.write(-10%3+"
");//-1
document.write(-10%-3+"
");//-1
函数调用方式
-
和页面元素的事件一起使用，调用格式：事件名＝“函数名( )" ;
-
通过找到要提供事件的对象，触发对应的事件
var btn = document.getElementById("loginbtn"); btn.onclick = math; //点击后触发
math() math，如果函数加括号就直接执行函数了，不加括号，则相当于将函数作为参数变量赋值给了btn.onclick属性，并不立即执行函数，而是点击后触发
匿名函数：属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序
方式二匿名函数的调用涉及document对象的方法getElementById(); 该方法含义是通过指定的id属性获取页面元素，下面代码通过id属性获取了一个按钮对象，然后给该按钮的onclick事件绑定了匿名函数：
var hereOrThere = function(){alert("here");}//赋值给变量
btn.onclick = function(){}//赋值给事件
方式三： (function (){…}())
( );优先表达式：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。
变量的作用域
变量的执行环境有两种——全局（script标签内）和局部（函数内）
-
注意：函数体内不加var关键字定义的变量是全局变量，加var关键字定义的变量是局部变量，作用域仅限于函数内部
var tt = 'aa'; function test(){ alert(tt); var tt = 'dd'; alert(tt); } test(); 结果undefined、dd
数组
-
使用数组直接量实现
var arr1 = [ ]; 空的数组直接量 var arr2 = [ 1,true, "string",[1,2] ]; //包含具体元素的数组直接量 -
使用Array构造函数来实现数组
var arr = new Array();//空数组 var arr = new Array(1,2,3,4);//实数组 -
使用for循环可以遍历js数组
var arr = new Array(1,2,3,4); for(var i=0;i -
使用for in循环也可以遍历js数组
var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (var x in mycars) { document.write(mycars[x] + "
") } -
push(元素)：将一个或多个新元素添加到数组结尾，并返回数组新长度。
var a = [1,2,3,4,5]; a.push(6,7); -
unshift(元素)：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回新数组长度。
var a = [1,2,3,4,5]; a.unshift(-2,-1); -
pop(); 移除最后一个元素并返回该元素值
var a = [1,2,3,4,5]; a.pop(); -
shift();移除最前一个元素并返回该元素值，数组中元素自动前移。
var a = [1,2,3,4,5]; a.shift(); -
splice(开始位置，删除长度)
var a = [1,2,3,4,5]; a.splice(1,2) -
splice(开始位置，删除长度，插入的元素)
var a = [1,2,3,4,5]; a.splice(1,2,[3,3,3]) -
concat()连接两个数组，返回一个新数组(不会改变原数组)
var a = [1,2,3,4,5]; var b = [6,7,8]; var c = a.concat(b); -
数组元素的字符串化，join(分隔符)用分隔符，组合数组元素，生成字符串。省略分隔符话则用默认用逗号为分隔符
var a = [1,2,3,4,5]; var b = a.join("/") -
reverse();反转元素(最前的排到最后、最后的排到最前)，返回数组地址
var a = [1,2,3,4,5]; a.reverse(); -
sort(sortby);调用数组每个元素的toString()方法。然后对数组元素排序，返回数组地址。
-
当sortby参数不存在时，将按字母顺序对数组中的元素进行排序。
var arr = ["p","z","e","c"]; arr.sort(); -
如果是数字，将以字符串的形式比较大小，所以要使用sortby参数定义排序规则
var a=[15,8,25,3]; a.sort(function(a, b) { return a-b;}); //[3,8,15,25]
解释：a,b表示数组中的任意两个元素，若return > 0 b前a后；reutrn < 0 a前b后；a=b时位置不动
简化一下：a-b输出从小到大排序，b-a输出从大到小排序。var a=["1px","12px","17px","8px","2px","21px"]; a.sort(function(a,b){ a = parseInt(a) b = parseInt(b) return a-b; } -
window对象的常用方法
- prompt 显示可提示用户输入的对话框
- alert 显示带有一个提示信息和一个确定按钮的警示框
- confirm 显示一个带有提示信息、确定和取消按钮的对话框
- close 关闭浏览器窗口
- open 打开一个新的浏览器窗口，加载给定 URL 所指定的文档
- setTimeout 在指定的毫秒数后调用函数或计算表达式
- setInterval 按照指定的周期（以毫秒计）来调用函数或表达式
window对象的常用属性
screen 有关客户端的屏幕和显示性能的信息
history 有关客户访问过的URL的信息
location 有关当前 URL 的信息
-
history对象常用方法
- back()方法加载历史列表中的前一个 URL。后退
- forward()方法加载历史列表中的下一个 URL。前进
- go()：history.go(1)前进、history.go(0)刷新、history.go(-1)后退
-
location对象常用属性和方法
- href属性设置或返回当前页面的 URL。
- reload()方法刷新当前页面。
-
document对象的常用属性
- referrer 返回载入当前文档的文档的URL
- URL 返回当前文档的URL
-
document对象的常用方法
- getElementById() 返回对拥有指定id的第一个对象的引用
- getElementsByName() 返回带有指定名称的对象的集合
- getElementsByTagName() 返回带有指定标签名的对象的集合
- write() 向文档写文本、HTML表达式或JavaScript代码
innerHTML属性 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
visibility属性 visible 表示元素是可见的 hidden 元素是不可见的
display属性 none 元素不会被显示 block 元素将显示
DOM W3C定义的一套访问和操作XML文档的标准接口(API)
- CoreDom : js实现标准DOM方法和属性
- XmlDom
- HtmlDom:html特有方法和属性
2、xml和html的区别
- xml是html的超集，html是xml子集
- html是定型标记语法，内部标记的作用和结构都是固定的
- xml没有固定标记的，所有标签标示的内容自定义。
选择你喜欢的水果：
苹果
香蕉
葡萄
梨
西瓜
3、coreDom的常用方法
- getAttribute('属性名')
- setAttribute('属性名','属性值')
4、根基层次结构查找节点属性 如果编程时希望访问某个元素的父元素，但又不知道父元素的ID、name、tag，怎么办？
- parentNode 父节点
- firstChild 第一个节点
- lastChild 最后一个节点
- nextSibling 最后一个兄弟节点
- previousSibling 上一个兄弟节点
- 注意：除IE外 大部分浏览器会将空格和回车识别为文本节点。解决：coreDom.js
- 创建和增加节点 的方法
- createElement（）：创建节点
- appendChild（）：末尾追加方式插入节点
- insertBefore（）：在指定节点前插入新节点
- cloneNode（）：克隆节点
- removeChild() ：删除节点
- replaceChild() ：替换节点
- 注意：xxxxchild()方法操作是要正确找到父级元素来使用。
5、HTMLDOM操作属性简化为 对象名.属性名 进行读写
//添加新节点
function newNode(){
var oldNode = document.getElementById('sixty1');//要插入的节点
var image = document.createElement('img');//创建类型为img的图片节点
image.setAttribute("src","images/newimg.jpg");//指定新节点的src属性
document.body.insertBefore(image,oldNode);//在oldNode前插入image新节点
}
//赋值节点
function copyNode(){
var image=document.getElementById("sixty1");//要复制的节点
//参数false表示是否复制原始节点的子节点
var copyImage=image.cloneNode(false);//调用cloneNode复制
document.body.appendChild(copyImage);//指定节点末尾追加
}*/
//删除图片
function delNode(){
var imgs = document.getElementById('sixty1');//要删除的图片
document.body.removeChild(imgs);
//body为img的父级元素，所以要根据父元素来删除子元素
}
//替换图片
function repNode(){
var imgOld = document.getElementById('sixty2');//要替换的旧图片
var imgNew = document.createElement('img');//新图片
imgNew.setAttribute('src','images/newimg.jpg');//设置新图片属性
document.body.replaceChild(imgNew, imgOld);
//body为img的父级元素，所以要根据父元素来删除子元素
}
//增加一行
function addRow(){
var table = document.getElementById('myTable');
var newRow = table.insertRow(1);//插入到第一行，返回行对象
var col1 = newRow.insertCell(0);//插入一个单元格td
col1.innerHTML = '三国演义';
var col2 = newRow.insertCell(1);
col2.innerHTML = '¥24.20';
col2.align='center';
}
//删除第2行
function delRow(){
document.getElementById('myTable').deleteRow(1);
}
//修改标题
function updateRow(){
var uRow = document.getElementById('myTable').rows[0];
uRow.className='title';//设置元素为指定的class.title的样式
}
//复制最后一行
function copyRow(){
var cRow = document.getElementsByTagName('tr');
var lsetTr = cRow[cRow.length-1];
var a = lsetTr.cloneNode(true);
document.getElementById('myTable').appendChild(a);
}
js设置获取元素样式
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000";
JavaScript事件
- onchange 用户改变域的内容
- onclick 鼠标点击某个对象
- onerror 当加载文档或图像时发生某个错误
- onfocus 元素获得焦点
- onblur 元素失去焦点
- onkeydown 某个键盘的键被按下
- onkeypress 某个键盘的键被按下并松开
- onkeyup 某个键盘的键被松开
- onload 某个页面或图像被完成加载
- onmousedown 某个鼠标按键被按下
- onmousemove 鼠标被移动
- onmouseout 鼠标从某元素移开
- onmouseover 鼠标被移到某元素之上
- onmouseup 某个鼠标按键被松开
制作随鼠标滚动的广告图片
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
clientWidth 浏览器中可见内容的宽度，不包括滚动条等边线，会随窗口的显示大小改变
-
clientHeight 浏览器中可以看到内容的区域的高度
document.documentElement.scrollTop; document.documentElement.scrollLeft;
表单验证
数据有效性，安全性验证 3层
- 客户端 js脚本验证
- 服务端 java-Servlet 服务器语言
- 数据库 数据约束。
onsubmit 事件(表单提交事件)，提交表单时触发。onsubmit会接受 true或false返回值。返回true提交当前表单，返回false 不提交表单
使用getElementById()获取Email的值
使用字符串方法indexOf( ) 判断Email的值是否包含“@”和“.”符号。
根据函数返回值是true还是flase来决定是否提交表单
var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
alert("Email格式不正确\n必须包含@");
return false;
}
使用String对象的length属性验证密码的长度
var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false;
}
验证两次输入密码是否一致
var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
alert("两次输入的密码不一致");
return false;
}
使用length属性获取文本长度，使用for循环和substring()方法依次截断单个字符，判断每个字符是否是数字
var user=document.getElementById("user").value;
for(var i=0;i- 事件
- onblur 失去焦点，当光标离开某个文本框时触发
- onfocus 获得焦点，当光标进入某个文本框时触发
- onkeypress 某个键盘按键被按下并松开
- 方法
- blur() 从文本域中移开焦点
- focus() 在文本域中设置焦点，即获得鼠标光标
- select() 选取文本域中的内容
- 属性
id 设置或返回文本域的id
-
value 设置或返回文本域的balue属性的值
function clearText(){ var mail=document.getElementById("email"); if(mail.value=="请输入正确的电子邮箱"){ mail.value=""; mail.style.borderColor="#ff0000"; } } ……Email： if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){ alert("Email格式不正确\n必须包含符号@和."); document.getElementById("email").select(); return false; } function checkEmail(){ var mail= document.getElementById ("email"); var divID= document.getElementById ("DivEmail"); divID.innerHTML=""; if(mail.value==""){ divID.innerHTML="Email不能为空"; return false; } } ……
正则表达式
什么是正则表达式(regular expression):是一种字符串匹配的模式，用来检查一个字符串中是否包含指定模式的字符串。
正则表达式的创建
- var reg = /white/g;
- var reg = new RegExp('white',g);
正则表达式的修饰符
g 全局匹配(默认找到第一个就完成匹配了)
i 不区分大小写
-
m 多行匹配
var reg=/^\w+$/; var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/; var reg = new RegExp(/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/,"g"); / /正则表达式的创建
^ 字符串开始
$ 字符串结束
\w 任意字母和数字、下划线 1、w、h
-
- 表示前一个字符出现{1,}一次或多次 123、wwwwhj,sb2b250
@ 普通字符串 123@ wfga@ 250sb@
\w 123@123 wgad@gas g23@123a
[A-Za-z] [email protected]
{2,3} [email protected]
(.[a-zA-Z]{2,3})? [email protected]
-
构造函数 var reg=new RegExp("表达式","附加参数")
var reg=new RegExp("white"); var reg=new RegExp("white","g"); var str=”black white” alert(str.search(reg))
string对象的方法
- match 找到一个或多个正则表达式的匹配
- search 检索与正则表达式相匹配的值
- replace 替换与正则表达式匹配的字符串
- split 把字符串分割为字符串数组
正则表达式符号
-
修饰符
- i 执行对大小写不敏感的匹配
- g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)
- m 执行多行匹配
-
方括号用于查找某个范围内的字符：
- [abc] 查找方括号之间的任何字符
- [^abc] 查找任何不在方括号之间的字符
- [0-9] 查找任何从0到9的数字
- [a-z] 查找任何从小写a到小写z的字符
- [A-Z] 查找任何从大写A到大写Z的字符
- [A-z] 查找任何从大写A到小写z的字符
- [adgk] 查找给定集合内的任何字符
- [^adgk] 查找给定集合外的任何字符
- (red|blue|green) 查找任何指定的选项
-
元字符(Metacharacter)是拥有特殊含义的字符：
- /../ 代表一个模式的开始和结束
- ^ 匹配字符串的开始
- $ 匹配字符串的结束
- \s 任何空白字符
- \S 任何非空白字符
- \d 匹配一个数字字符，等价于[0-9]
- \D 除了数字之外的任何字符，等价于[^0-9]
- \w 匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9]
- \W 任何非单字字符，等价于[^A-Za-z0-9]
- . 除了换行符之外的任意字符
-
正则表达式重复字符(量词)
{n} 匹配前一项n次
{n,} 匹配前一项n次，或者多次
{n,m} 匹配前一项至少n次，但是不能超过m次
-
- 匹配前一项0次或多次，等价于{0，}
-
- 匹配前一项1次或多次，等价于{1，}
-
？匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}
年龄0-120的正则表达式 /^120$|^((1[0-1]|[1-9])?\d)$/m 用户名正则：/^[a-zA-Z][a-zA-Z0-9]{3,15}$/ 密码正则：/^[a-zA-Z0-9]{4,10}$/ 生日正则：/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/ Email正则：/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/ 最新身份证正则：/^\d{15}$|^\d{17}([0-9]|X)$/
RegExp对象的属性
- global RegExp对象是否具有标志g，它声明了给定的正则表达式是否执行全局匹配
- ignoreCase RegExp对象是否具有标志i，它声明了给定的正则表达式是否执行对大小写不敏感的匹配
- multilne RegExp对象是否具有标志m，它声明了给定的正则表达式是否执行多行匹配
RegExp对象的方法
- exec() 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置,如果没有发现匹配，则返回null
- test() 检索字符串中指定的值，返回true或false
select 对象常用时间、方法和属性
- 事件 onchange 当改变选项时调用的事件
- 方法 add() 向下拉列表中添加一个选项
- 属性 options[] 返回包含下拉列表中的所有选项的一个数组
- selectedIndex 设置或返回下拉列表中被选项目的索引号
- length 返回下拉列表中的选项的数目
Option对象常用属性
text：设置或返回某个选项的纯文本值
-
value：设置或返回被送往服务器的值
function get(){ var index=document.getElementById("fruit").selectedIndex; var len=document.getElementById("fruit").length; var show=document.getElementById("show"); show.innerHTML="被选选项的索引号为："+index+"
下拉列表选项数目为："+len; }
var cityList = new Array();
cityList['河北省']={'石家庄市':['裕华区','藁城区'],'衡水市':['桃城区','枣强县']};
cityList['河南省']={'郑州市':['中原区','二七区'],'洛阳市':['老城区','西工区']};
function setProv(){
var p = document.getElementById('prov');
for(var prov in cityList){
p.add(new Option(prov,prov,null));
}
get();
}
function get(){
var p = document.getElementById('prov');
var pv = p.value;
var c = document.getElementById('city');
c.options.length=0;
var cs = cityList[pv];
for(var city in cs){
c.add(new Option(city,city,null));
}
gets();
}
function gets(){
var p = document.getElementById('prov');//选中的省份
var pv = p.value;//选中项的值
var c = document.getElementById('city');
var cv = c.value;//城市数组的值
var cs = cityList[pv];//省份对应城市的数组
var q = document.getElementById('qu');//获取曲线下拉框元素对象
var qs = cs[cv];//曲线数组
q.options.length = 0;//q.options-获取下拉框的选项数组，length=0清空数组
for(var qu in qs){
q.add(new Option(qs[qu],qs[qu],null))
}
}
window.onload = setProv;
Math对象
Math对象包含的属性大部分是数学计算中可能会用倒的一些特殊值：
Math.E 自然对数的底数，常量e
Math.LN10 10的自然对数
Math.LN2 2的自然对数
Math.LOG2E 以2为底e的自然对数
Math.LOG10E 以10为底的自然对数
Math.PI π
Math.SQRT1_2 1/2的平方根
Math.SQRT2 2的平方根
-
向上舍入小数点，它将数值向上舍入为最接近的整数
- Math.ceil()
-
向下舍入小数点，它将数值向下舍入为最接近的整数
- Math.floor()
-
标准的四舍五入，它将数值四舍五入为最接近的整数
- Math.round()
-
获取最大值的语法格式
- Math.max(num1,num2,...)
-
获取最小值的语法格式
- Math.min(num1,num2,...)
设一个数字变量，当这一变量大于500的时候，让这个变量的值等于500；
实现1：if ( num > 500 ) { num = 500；}
实现2：num = Math.min( num ,500 )；
-
随机函数语法，返回介于0-1之间的随机小数，不包括0和1
- Math.random()
- 值 = Math.floor ( Math.random ( ) * 可能值的总数+ 第一个可能的值 )
-
正选三角函数，获取x的正弦值（x为弧度制）
- Math.sin（x） 取值范围：-1<=y<=1
-
反正弦三角函数 ，获取num的反正弦值
-
Math.asin（num）
Math.sin（ Math.PI / 2）= 1 Math.asin（1）≈ 1.570796…
-
-
余弦三角函数，获取x的余弦值（x为弧度制）
- Math.cos（x） 取值范围：-1<=y<=1
-
反余弦三角函数 ，获取num的反余弦值
-
Math.acos（num）
Math.cos（ Math.PI / 2）= 0 Math.acos（1）= 0
-
-
角度与弧度转换公式：
- 弧度值 = 角度值 * π / 180
把发生连续上下变化的Y值，赋给CSS样式中的______________属性？
即 ： marginTop=sin ( x )； x 为不断增加的变量
实现一个div的左右运动效果 改变 marginLeft 属性 left属性也可以，如果使用left属性，需要绝对定位
Math其它常用函数
Math.abs(num) 返回num的绝对值
Math.exp(num) 返回Math.E的num次幂
Math.log(num) 返回num的自然对数
Math.pow(num,power) 返回num的power次幂
Math.sqrt(num) 返回num的平方根
Math.atan(x) 返回x的反正切值
Math.atan2(y,x) 返回y/x的反正切值
Math.tan(x) 返回弧度x的正切值
Date对象
获取当前时间
getHours 获取当前小时数
getMinutes 获取当前分钟数
getSeconds 获取当前秒数
var dates = new Date();
var hour = dates.getHours();
获取其它时间的方法
getFullYear();获取4位数的年份
getMonth();获取月份，从0开始，0表示1月
getDate();获取月份中的天数
getDay();获取是周几，从0开始
getMilliseconds();获取当前的毫秒数
getTime();获取从1970年1月1日到现在的毫秒数
- 计算函数运行时间
- 1、函数执行前获取时间（startTime）、函数执行完获取时间（endTime）
- 2、endTime – startTime =函数运行时间
获取UTC时区的时间
getUTCFullYear();获取UTC日期的4位数年份
getUTCMonth();获取UTC日期月份，从0开始
getUTCDate();获取UTC日期月份中的天数
getUTCDay();获取UTC日期的周几，从0开始
getUTCHours();获取UTC日期的小时数，0-23
getUTCMinutes();获取UTC日期的分钟数，0-59
getUTCSeconds();获取UTC日期的秒数，0-59
getUTCMilliseconds();获取UTC日期的毫秒数
设置时间
- new Date(time); time为从1970年1月1日至设置时间的毫秒数
- new Date(‘May 25 , 2004’);
- new Date(2011,1,1); 2011年2月1日
设置当前时区的时间
setFullYear();设置4位数的年份
setMonth();设置月份，从0开始，0表示1月
setDate();设置月份中的天数
setDay();设置是周几，从0开始
setHours();设置当前的小时数，0-23
setMinutes();设置当前的分钟数，0-59
setSeconds();设置当前的秒数，0-59
setMilliseconds();设置当前的毫秒数
setTime();设置从1970年1月1日到现在的毫秒数
设置UTC时区的时间
setUTCFullYear();设置UTC日期的4位数年份
setUTCMonth();设置UTC日期月份，从0开始
setUTCDate();设置UTC日期月份中的天数
setUTCDay();设置UTC日期的周几，从0开始
setUTCHours();设置UTC日期的小时数，0-23
setUTCMinutes();设置UTC日期的分钟数，0-59
setUTCSeconds();设置UTC日期的秒数，0-59
setUTCMilliseconds();设置UTC日期的毫秒数
定时函数
-
setTimeout()用法
- setTimeout（"调用的函数", "指定的时间后"）
-
setInterval()方法
-
setInterval（"调用的函数", "指定的时间间隔"）
var myTime＝setTimeout("disptime( ) ", 1000 ); 1秒(1000毫秒)后执行函数disptime()一次 var myTime＝setInterval("disptime( ) ", 1000 ); 每隔1秒(1000毫秒)执行函数disptime()一次
-
setTimeout()只执行disptime()一次，如果要多次调用使用setInterval()或者让disptime()自身再次调用setTimeout()
JS特效
事件绑定方法
找到要添加事件的标签
为相应标签添加鼠标事件
事件中调用函数
在js中定义相应函数
tab切换：主要就是控制对象的隐藏和显示
无缝滚动：实现属性值的设置
碰壁反弹：主要就是处理边界值
定时函数
setTimeout()用法：只执行一次
setInterval()方法：没过一定时间执行一次
偏移量的获取
clientX鼠标移动量
offsetLeft自身绝对定位的left值
offsetWidth自身的宽
scrollLeft获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
clientWidth浏览器中可见内容的宽度，不包括滚动条等边线，会随窗口的显示大小改变