JavaScript
JavaScript语法 (ECMAscript)
引入方式
1.页面script标签嵌入
<script type="text/javascript"> alert('hello!'); </script>
2.外部引用
<script type="text/javascript" src="index.js"></script>
变量定义
变量声明
1.变量名可以使用_，数字，字母，$组成，不能以数字开头（变量名称对大小写敏感）。
2.定义变量需要用关键字 var。
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined 变量声明未初始化，它的值就是undefined
5、null 表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
复合类型object
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
声明新变量时，可以使用关键词 "new" 来声明其类型：
var a = new String; var b = new Number; var c = new Boolean; var d = new Array; var person= new Object;
注意：JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
类型查询
查看变量类型使用 typeof(变量) 或 typeof 变量
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number" typeof NaN // "number"
注意：typeof是一元运算符，不是函数，也不是语句。
对象(Object)
数值(Number)
var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123
数值类型转换Number(）
parseInt()和parseFloat()
var a = "23fs"; parseInt(a); //23 a = "dfw2131"; parseInt(a); //NaN
NaN(Not a Number)是数字类型但不是数字，可以用isNaN() 检测一个数是不是，是数为false，不是true。
注意：当字符串包含任意一个非数值表示的字符时，返回NaN，
如果第一个为数字，就读取数字部分，舍去字符部分，返回number。
布尔值(Boolean)
var a = true; var b = false;
为false的情况，空字符串，0,以及0.0,NaN,null、undefined
字符串(String)
字符串常用方法
| 方法 | 描述 |
| length | 返回长度 |
| charAt() | 返回指定索引位置的字符 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| trim() | 移除字符串首尾空白 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLowerCase() | 小写 |
| toUpperCase() | 大写 |
| valueOf() | 返回某个字符串对象的原始值 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
实例
var a = "future"; a.charAt(1); // "u" a.indexOf("a"); //未找到返回-1 a.indexOf("u"); // 1
a.slice(1,-1); // "utur" a.split("u"); // (3) ["f", "t", "re"] a.split(""); //(6) ["f", "u", "t", "u", "r", "e"] a.concat(" world!"); // "future world!" a.substring(1,-1); //"f" 等价于a.substring(0,1)
字符串反转
var str = 'future'; var str2 = str.split('').reverse().join('');
数组（array）
数组定义
//方法一 var a = new Array(1,2,3,4); console.log(a); //方法二 var arr = [1,2,3,4]; console.log(arr);
常用方法
| 方法 | 描述 |
| length | 数组的长度 |
| push(ele) | 尾部追加元素 |
| pop() | 获取尾部的元素 |
| unshift(ele) | 头部插入元素 |
| shift() | 头部移除元素 |
| slice(start, end) | 切片 |
| reverse() | 反转 |
| join(seq) | 将数组元素连接成字符串 |
| concat(val, ...) | 连接数组 |
| sort() | 排序 |
| splice() | 删除元素，并向数组添加新元素 |
| map() | 返回一个数组元素调用函数处理后的值的新数组 |
| forEach() | 将数组的每个元素传递给回调函数 |
sort()排序注意事项
var a = [12,3,56,65,32,100,10,3]; a.sort(); //结果 [10, 100, 12, 3, 3, 32, 56, 65] function sortNum(a,b){ return a - b } a.sort(sortNum) //结果 [3, 3, 10, 12, 32, 56, 65, 100]
练习
//1.定义数组，不常用 var a = new Array(1,2,3,4) console.log(a) var arr = [1,2,3,4]//常用 console.log(arr) //2.获取arr.length console.log('arr数组的长度：'+arr.length) //3.添加元素arr.push(5) arr.push(5,6) console.log(arr) //4.删除元素，不能传参 arr.pop() //5.unshift()前面添加，shift()前面删除 arr.unshift(45,'12') arr.shift() // console.log(arr) //6.splice()增加或删除数组 //splice(x,y,z)第个x元素之后删除y个元素，并替换z元素（可以增加多个） arr.splice(1,1,34,45) console.log(arr)
运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
注意：==等于 ===绝对等于（值和类型均相等）
5 == “5” // true 5 === "5" // false
函数
函数定义
function demo(){ alert('函数调用！'); }
匿名函数
//匿名函数，声明变量及调用 var lamb = function(){ alert('匿名函数') }();
封闭函数
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文
件时，用这种方式添加js文件比较安全。
(function () { var x = "Hello!!"; // 调用自己 })();
有返回值的函数
argument 对象包含了函数调用的参数数组。
//通过arguments这个属性获取所以传递进来的参数，类型是数值类型 function demo(a){ console.log("函数被调用") console.log(arguments) console.log(arguments[3]) //4 console.log(a) //1 }; demo(1,2,3,4,5)
全局变量和局部变量
全局变量：
全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。
局部变量：
在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。只要函数运行完毕，本地变量就会被删除。
闭包
闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。
var a = 10; function f(){ var a = 10; function inner(){ console.log(a); } return inner; } var ret = f(); ret();
内置对象
对象定义
键值对通常写法为 name : value (键与值以冒号分割)。
arr = {name:"jerry",age:18,sex:"male"}；
遍历对象
//for in循环遍历对象 for(i in arr){ console.log(i,arr[i]) }
Date对象
创建Date对象
var d= new Date(); d; //指定格式 var d1 = new Date("2014/6/20 12:12"); d1.toLocaleString(); //"2014/6/20 下午12:12:00"
Date方法
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1)
JSON对象
| 函数 | 描述 |
| JSON.parse(str) | 用于将一个 JSON 字符串转换为obj对象。 |
| JSON.stringify(obj) | 用于将obj对象转换为 JSON 字符串。 |
Math对象
返回指定随机数
// 取[m,n]之间的数，封装函数 var rand = function(m,n){ return Math.floor(Math.random()*(n-m+1))+(n-m); } console.log(rand(1,3));
| 方法 | 描述 |
| abs() | 绝对值 |
| exp() | e 的指数 |
| floor() | 向下取整 |
| ceil() | 向上取整 |
| max(x,y) | x 和 y 中的最大值 |
| min(x,y) | x 和 y 中的最小值 |
| pow(x,y) | x 的 y 次幂 |
| sin() | 正弦 |
| sqrt() | 数的平方根 |
| tan() | 正切 |
| round() | 四舍五入 |
| random() | [0,1）之间的随机数 |
RegExp 对象(正则)
1.正则写法
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;
//匹配“s”字符，忽略大小写 var re=new RegExp('s', 'i'); var re=/s/i;
2.修饰符
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写
3.限制开头结尾
^ 以紧挨的元素开头
$ 以紧挨的元素结尾
4.匹配规则
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’
2）转义字符匹配：
\d 匹配一个数字，即0-9 \w 匹配一个单词字符（字母、数字、下划线）
\D 匹配一个非数字，即除了0-9 \W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符 \b 匹配单词边界
\S 匹配一个非空白符 \B 匹配非单词边界
3）量词：
? 出现零次或一次（最多出现一次） {n} 出现n次
+ 出现一次或多次（至少出现一次） {n,m} 出现n到m次
* 出现零次或多次（任意次） {n,} 至少出现n次
4）匹配一个字符
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符
5.方法
1、test()
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假
var re = /t/g; re.test("future"); //true var reg = /a/g; reg.test("future"); //false
2、search()
查找字符串中符合正则表达式的内容位置(索引值)
var s1 = "future"; s1.search(/u/g); // 1
3、match()
查找字符串中符合正则的内容
var s1 = "future"; s1.match(/u/g); // ["u", "u"]
4、replace()
替换一个与正则表达式匹配的子串
var s1 = "future"; s1.replace(/u/g,'o'); //"fotore"
注意事项：
1.当匹配字符为空时，默认为undefined，自动将undefined字符串参与匹配。
2.js的正则表达式中不要加空格。
3.正则表达式加上g（全局匹配）就会记录一个lastIndex属性，用来记录下一次从哪开始匹配。
正则匹配案例
//用户名验证：(数字字母或下划线6到20位) var reUser = /^\w{6,20}$/; //邮箱验证： var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i; //密码验证： var rePass = /^[\w!@#$%^&*]{6,20}$/; //手机号码验证： var rePhone = /^1[3-8]\d{9}$/;
DOM 文档对象模型
查找元素
直接查找
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
//1.获取到了div document.getElementById('id名'); //2.element加了s表示是集合 获取的是一组元素 是伪数组 document.getElementsByClassName('class名') //3.通过name查询标签, 获取的是一组元素 document.getElementsByName('name名'); //4.标签名查询, 获取的是一组元素 document.getElementsByTagName('标签名'); //5.选择器查询，获取的是一组元素 document.querrySelector('可以写任何选择器 只能选择一个'); document.querrySelectorAll('可以写任何选择器,可以选择多个');
注意：aEle = document.getElementsByClassName("box")获取到的是一组节点，可以使用aEle[i]
间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
修改元素
创建元素（节点）
createElement(标签名)
var divEle = document.createElement("div");
添加元素（节点）
appendChild() 添加子节点到尾部
父节点.appendChild(节点)；
<div id="div1"> <p id="p1">这是一个段落。</p> </div> <script> //1.创建 <p> 元素 var para = document.createElement("p"); //2.为 <p> 元素添加文本节点 var node = document.createTextNode("这是一个新的段落。"); //3.将文本节点添加到 <p> 元素中 para.appendChild(node); //4.获取父标签 var element = document.getElementById("div1"); //5.添加到已存在的元素后面 element.appendChild(para); </script>
insertBefore() 增加的节点放到某个节点的前边
父节点.insertBefore(新节点,旧节点);
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script>
删除和替换元素
removeChild()
父节点.removeChild(要删除的节点);
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>
replaceChild()
父节点.replaceChild(新节点, 旧节点);
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>
属性操作
innerHTML 修改 HTML 内容
innerText 修改HTML文本
var divEle = document.getElementById("it") divEle.innerText="123" divEle.innerHTML="<p>段落</p>"
设置标签属性
setAttribute(键，值) 设置属性
getAttribute(键) 获取属性
removeAttribute(键) 删除属性
var divEle = document.getElementById("it"); divEle.setAttribute("name","jerry") divEle.getAttribute("name") divEle.removeAttribute("name")
获取标签属性
<div class="box" id="it" title="div"></div>
var aEle = document.getElementById("it"); aEle.title //"div" aEle.className //"box"
class操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
css样式操作
//1.获取元素 var a =document.getElementById("item"); console.log(a); //2.设置样式 a.style.width="200px"; a.style.height="200px"; a.style.background="red"; // 双拼词去横杆，第二个单词首字母大写 a.style.fontSize="30px"; //3.获取样式 console.log(a.style.width)
DOM事件
常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onload 在用户进入页面时被触发。
onfocus 元素获得焦点。
onblur 元素失去焦点。
onchange 域的内容被改变。 通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onscroll 在元素滚动条在滚动时触发。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
BOM 浏览器对象模型
Window 对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员，DOM 的 document 也是 window 对象的属性之一。
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.onload是在dom文档树加载完和所有文件加载完之后执行函数。
window.onload = function(){内容...}
Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
location.href 获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面
scrollTo()
window.scrollTo(x-coord, y-coord);
把内容滚动到指定的坐标。如，window.scrollTo(0,0);
补充：document.documentElement.scrollTop 和 document.body.scrollTop获取滚动条位置。
html输出流
document.write() 可用于直接向 HTML 输出流写内容。
console.log() 可用于控制台打印数据。
弹出框
//1.警告框
alert("hello world!");
//2.确认框
confirm("hello world!");
//3.提示框
prompt("提示","答案");
计时事件
setTimeout() 方法
单次定时器
格式：setTimeout(回调函数，时间)
功能：指定时间执行代码功能
function demo(){ console.log("定时器启动") } setTimeout(demo,1000)//不能直接调用demo(),1000毫秒=1s
clearTimeout()
清除定时器：我们启动定时器之后，会返回一个标识符，通过这个标识符来清除定时器。
// 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert(12345);}, 5000) // 取消setTimeout设置 clearTimeout(timer);
setInterval() 方法
多次定时器
格式：setInterval(回调函数，时间)
功能：指定时间多次执行代码功能
var set = setInterval(function(){ console.log('123'); i++; },1000); console.log(set);//异步执行，先执行，标识符
clearInterval()
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。我们启动定时器之后，会返回一个标识符，通过这个标识符来清除定时器。
var set = setInterval(function(){ console.log('123'); i++; },1000); console.log(set);//异步执行,标识符 //启动定时器之后，会返回一个标识符，通过这个标识符来清除定时器 setTimeout( function(){ console.log("清除定时器"); clearInterval(set); },6000);
案例
焦点获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度搜索</title> <style> .item{ width: 300px; margin: 100px auto; } .search{ float: left; height: 40px; font-size: 16px; } .btn{ float: left; height: 46px; } </style> </head> <body> <div class="item"> <!--搜素框--> <label> <input type="text" class="search" value="今日新闻"/> </label> <!--链接--> <a href="" id="aa"></a> <!--按钮--> <input type="button" class="btn" value="baidu"/> </div> <script> // 找到要绑定事件的标签 var aEle = document.getElementsByClassName("search"); // console.log(aEle); // 1. 先绑定获取焦点的事件 aEle[0].onfocus = function (ev) { this.value = ""; }; // 2. 绑定失去焦点的事件 aEle[0].onblur = function (ev) { if(this.value===""){ this.value = "今日新闻"; } }; //3.1 JS获取搜索value var bEle = document.getElementsByClassName("btn"); bEle[0].onclick = function (ev) { var href1 = 'https://www.baidu.com/s?wd='; //拼接链接 href1 = href1+aEle[0].value; //传递链接 document.getElementById("aa").setAttribute("href",href1) }; </script> </body> </html>
自动弹窗
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>弹窗自动关闭</title> <style> body{ background-color: #eee; } #item{ width: 100px; height: 40px; } .bg{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); } .hidd{ display: none; } #ale{ position: absolute; width: 400px; height: 280px; background-color: white; left: 50%; top: 50%; margin-left: -200px; margin-top: -140px; } </style> </head> <body> <button id="item" class="btn btn-success">弹窗</button> <div class="bg hidd"> <div id="ale"> <h2 style="text-align: center">自动弹窗</h2> <br> <p></p> </div> </div> <script> var aEle = document.getElementById("item"); aEle.onclick = function(){ var a1 = document.getElementById("ale").lastElementChild; a1.innerText = ''; this.nextElementSibling.classList.remove("hidd"); var times = 5; var set = setInterval(function () { console.log(times); a1.style.fontSize ="18px"; a1.style.textAlign = "center"; var sp = ` <span>自动关闭还有 <span style="color:orange;font-size:24px"><b></b></span> <span>秒！</span> </span> `; a1.innerHTML = sp; document.getElementsByTagName("b")[0].innerText = times; if (times===0){ clearInterval(set); aEle.nextElementSibling.classList.add("hidd"); } times--; },1000); } </script> </body> </html>
select联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>select联动</title> </head> <body> <!--选择对应的省市会发生变化--> <label for="a1">省</label> <select id="a1"> <option value="">--请选择省--</option> </select> <label for="a2">市</label> <select id="a2"></select> <script> var address = { "北京": ["东城区", "海淀区", "朝阳区"], "天津": ['和平区','红桥区','南开区'], "上海": ["浦东区", "徐汇区", "浦东新区"], } var a1Ele = document.getElementById("a1"); var a2Ele = document.getElementById("a2"); // 1. 拿到所有的省，在s1中生成对应的option选项 for (var i in address){ console.log(i); // 1.1 创建option标签 var opt = document.createElement("option"); // 1.2 把省信息添加到option标签中 opt.innerText = i; // 1.3 把创建好的option标签插入到第一个select标签中 a1Ele.appendChild(opt); } // 当第一个select框的值发生变化的时候触发的动作 a1Ele.onchange = function (ev) { //重新选择城市，清除原来的数据 a2Ele.innerHTML = ''; console.log(this); //获取选择的city var city = this.value; console.log(city); var city_a = address[city]; for ( var i in city_a){ //创建选项 var opt = document.createElement("option"); opt.innerText = city_a[i]; a2Ele.appendChild(opt); } } </script> </body> </html>
计时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器练习</title>
</head>
<body>
<script>
window.onload = function (ev) {
var set1;
var temp = true;
document.getElementById("btn").onclick = function (ev) {
if (!temp) {
clearInterval(set1);
document.getElementById("btn").value = "开始";
temp = !temp;
}
else {
set1 = setInterval(function (ev) {
var a = document.getElementById("item");
var t = new Date();
a.value = "";
a.value = t.toLocaleString();
console.log(1);
}, 1000);
document.getElementById("btn").value = "暂停";
temp = !temp;
}
}
}
</script>
<input type="text" id="item">
<input type="button" id="btn" value="开始">
</body>
</html>
随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>随机数滚动</title>
<style>
#item{
width:100px;
height:40px;
box-shadow:-10px -10px 5px 15px green inset;
position: relative;
left:350px;
}
#box{
width:200px;
height: 200px;
background-color: #42363B;
position: relative;
left: 300px;
font-size: 80px;
font-weight: bolder;
text-align: center;
line-height: 200px;
color:white;
}
</style>
</head>
<body>
<button id="item">开始</button>
<div id="box">20</div>
<script>
var go=true;
var tim=null;
window.onload = function(){
document.getElementById("item").onclick = function(){
if(go){
this.innerText = '暂停';
tim=setInterval(function(){
var sj = ran(1,20);
console.log(sj);
document.getElementById('box').innerText = sj;
},100)
}
else{
this.innerText = '开始';
clearInterval(tim);
}
go=!go;
console.log(go);
}
function ran(m,n){
return Math.floor(Math.random()*(n-m+1))+m
}
}
</script>
</body>
</html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> #back_top{ position: fixed; z-index: 9000; right: 30px; bottom: 30px; background: #ccc; border-radius: 5px; display: none; cursor: pointer; padding: 10px; } </style> </head> <body> <div style="height:100px; background-color: orange;">这是顶部</div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div style="height:100px; background-color:pink;">这是底部</div> <div id="back_top">返回顶部</div> <script type="text/javascript"> window.onload = function(){ //window.onscroll窗口滚动条移动时触发 window.onscroll = function(){ //1.获取滚动条的位置 var sc = document.documentElement.scrollTop ||document.body.scrollTop; console.log(sc); //2.当滚动条大于200时显示"返回顶部" if(sc>200){ document.getElementById("back_top").style.display = "block"; }else{ document.getElementById("back_top").style.display = "none"; } } //3.点击返回顶部触发 document.getElementById("back_top").onclick = function(){ scrollToptimer = setInterval(function () { var sc = document.body.scrollTop || document.documentElement.scrollTop; if (sc!=0) { //返回速度 由快到慢 window.scrollTo (0, sc-(sc/3)); } else { clearInterval(scrollToptimer); } }, 30); } } </script> </body> </html>
