Web APIs 08
文章目录
缓慢动画回到页面指定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background: pink;
height: 2000px;
}
.box{
position: fixed;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="box">
<button>缓慢动画回到0</button>
<button>直接去到500</button>
<button>缓慢动画去到1000</button>
</div>
<script>
// 兼容写法
function getScroll(){
return {
left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft ,
top:window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
}
}
// 缓慢动画就是做动画的速度,刚开始是很快的,逐渐慢下来
var timer = null;
// target滚动位置的目标值
function animate_scroll( target ){
if( timer === null ){
timer = window.setInterval( function(){
// 先获取当前垂直滚动条位置
var currentScrollTop = getScroll().top;
// 判断当前垂直滚动条位置是否达到目标值
if( currentScrollTop == target ){
// 清除定时器
window.clearInterval( timer );
// 设置timer的值为null
timer = null;
}
// 计算步长值( 运动速度 ) 公式
// var 步长值 = (目标值 - 当前值)/10
var speed = (target - currentScrollTop)/10;
// 处理步长值(可能出现小数) 正数向上取整 负数向下取整 否则有可能无法达到目标值
speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
// 设置页面滚动
window.scroll( 0, currentScrollTop+speed );
}, 15 );
}
}
var btns = document.querySelectorAll("button");
btns[0].onclick = function(){
animate_scroll( 0 );
};
btns[1].onclick = function(){
window.scroll( 0 , 500 )
};
btns[2].onclick = function(){
animate_scroll( 1000 );
};
</script>
</body>
</html>
案例详解-仿淘宝固定右侧侧边栏
mouseenter和mouseover的区别 面试题
- 当鼠标移动到元素上时就会触发mouseenter 事件
- 类似 mouseover，它们两者之间的差别是
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
之所以这样，就是因为mouseenter不会冒泡 - 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
举例: 分别给.father绑定mouseover和mouseenter事件
防抖函数和节流函数
参考博客:https://www.cnblogs.com/wssdx/p/11557706.html
参考博客: https://blog.csdn.net/sdta25196/article/details/88038489
防抖函数
- 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n秒内又触发了事件，则会重新计算函数延执行时间。
生活中例子: 一群人排队上公交车, 公交车司机, 直到最后一个人上了车以后,再关车门
节流函数
- 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。
举例：
值传递与引用传递
什么叫做传递呢? 就是变量与变量之间的赋值操作
参考网址： https://blog.csdn.net/flightsmallbird/article/details/84771095
js中的传递分为值传递与引用传递
- 基本数据类型之间的赋值操作都是值传递
- 复合数据类型之间的赋值操作都是引用传递
值传递
将一个变量的值赋值给另外一个变量，如果修改其中一个变量的值，不会影响到另外一个变量的值! 这两个变量之间是没有任何的联系。
变量如何在内存中存储? 内存它是分区域：栈区和堆区
栈区: 空间小，速度快 主要存储变量名以及值在堆区的地址
堆区：空间大，速度慢 主要存储变量的值
小问： 变量名变量值之间的关系? 变量名引用变量值 ，变量值被变量名所引用！
window.onload = function(){}
或者
window.addEventListener("load",function(){});
window.onload 是窗口 (页面）加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
图解：
- 有了window.onload就可以把JS代码写在页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数的
- window.onload传统注册事件方式 只能写一次 , 如果有多个,会以最后一个window.onload为准
- 如果使用addEventListener方法注册事件,则没有限制
引用传递
将一个变量的值（内存地址）赋值给另外一个变量，如果修改其中一个变量的值，会影响到另外一个变量的值! 这两个变量之间是有联系的。
图解：
举例：
解除引用
参考网址： https://www.cnblogs.com/guoyansi19900907/p/12064769.html
数组解除引用
解决数组引用的方法有两种
第一种是使用for循环遍历
第二种使用可以得到新数组的内置函数 比如 数组对象.concat()等 数组对象.slice()等
举例：
对象解除引用
解除对象引用的方法有两种
第一种:使用for…in循环
第二种:使用es6提供的Object.assign(新对象,旧对象) 把旧对象进行浅拷贝到新对象中
另外Object.assign还可以合并多个object,它可以接收多个对象,第一个是合并的目标对象,后边都是被合并的对象 类似数组的concat方法
Object.assign使用文档如下:
https://www.jianshu.com/p/d5f572dd3776
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
举例:
JSON数据格式
什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。由于其利于阅读和编写、同时也方便机器进行解析和生成。这使得JSON成为最理想的数据交换语言。
JSON数据格式的应用场景
只要有数据交换的地方，都会有JSON数据格式的身影。
① 手机号码归属地查询
② 快递查询
JSON格式的定义
基本语法：
{
"name":"Mark",
"age":18,
"mobile":"13586007445"
}
注意：
- JSON格式的数据，其键名必须使用"双引号"引起来
- JSON格式的数据，“不能出现成员方法，只能是成员属性”
但是在JS中，如果以上格式赋值给某个变量，这个变量也是JS对象
var jsonObj = {
"name":"Mark",
"age":18,
"mobile":"13586007445"
};
JSON对象与JS对象的区别
| 区别 | JSON | javascript对象 |
|---|---|---|
| 含义 | 仅仅是一种数据格式 | 表示类的实例 |
| 传输 | 可以跨平台数据传输,速度快 | 不能传输 |
| 表现 | ①键值对方式,键必须加双引号 ②值不能是方法函数,不能是undefined或者NaN | ①键值对方式,键不加引号②值可以是函数、对象、字符串、数字、布尔等 |
| 相互转换 | JSON转换为JS对象:①JSON.parse(JSONString)(不兼容ie7)②var jsobj=eval("("+JSONString+")") (兼容所有浏览器,但不安全,会执行json里面的表达式 | JS对象转换为JSON:JSON.stringify(jsobj);(不兼容ie7) |
其他:调用JSON官网的js,实现parse和stringify在各个浏览器的兼容：
https://github.com/douglascrockford/JSON-js/blob/master/json2.js
定义JSON对象
// 定义JSON对象
var jsonObj = {
"name":"Allen",
"age":23,
"mobile":"13123456789"
}
访问JSON对象的属性
基本语法：
JSON对象.属性
或
JSON对象[属性]
// 定义JSON对象
var jsonObj = {
"name":"zhangsan",
"age":23,
"mobile":"13123456789"
}
console.log(jsonObj.name);
console.log(jsonObj["age"]);
遍历JSON对象的属性
for…in 语句用于对数组或者对象的属性进行循环操作
格式:
for (attr in JSON对象) {
console.log( attr ); // attr是属性名
console.log( JSON对象[attr] ); // JSON对象[attr]可以得到属性名对应的属性值
}
- 这个变量是自定义 符合命名规范 但是一般我们 都写为 k 或则 key 或者 attr
- 后面的可以是对象 也可以是数组 因为 数组也属于对象
注意: 遍历的时候使用 JSON对象.属性名 得到的是undefined , 所以只能使用 JSON对象[属性名]
举例：
// 定义JSON对象
var jsonObj = {
"name":"zhangsan",
"age":23,
"mobile":"13123456789"
}
// 遍历JSON对象中的所有属性
for(var attr in jsonObj){
console.log(attr);// 属性名
console.log(jsonObj[attr]);// 属性值
console.log(jsonObj.attr);// undefined
console.log("");
}
JSON数组
问题：在JS中，我们可以通过JSON格式的数据来保存一个人的信息，如果我们想保存多个人的信息如何进行操作呢？答：使用JSON数组, 把多个json对象放在一个数组中
基本语法：
var 变量名 = [
{键值对},
{键值对},
{键值对},
...
];
举例:
var persons = [
{
"name":"zhangsan",
"age":23,
"email":"zhangsan@163.com"
},
{
"name":"lisi",
"age":24,
"email":"lisi@163.com"
},
{
"name":"wangwu",
"age":25,
"email":"wangwu@163.com"
},
];
// 访问lisi的信息
console.log("姓名:"+persons[1].name);
console.log("年龄:"+persons[1].age);
console.log("邮箱:"+persons[1].email);
JSON格式的字符串与JS对象的转换
把JSON字符串转换为JS对象 语法如下
JSON.parse(JSON格式的字符串);
举例：
var jsonStr = '{"resultcode":"200","reason":"Return Successd!","result":{"province":"广西","city":"玉林","areacode":"0775","zip":"537000","company":"联通","card":""},"error_code":0}';
console.log(jsonStr);
console.log(typeof jsonStr);
console.log("");
var json = JSON.parse(jsonStr);
console.log(json);
console.log(typeof json);
console.log("");
// 获取JS对象中具体的数据
console.log("归属地:"+json.result.province+json.result.city);
console.log("运营商:"+json.result.company);
把JS对象转换为JSON格式的字符串 语法如下
JSON.stringify(JS对象);
举例：
var jsonObj = {
"name":"zhangsan",
"age":23,
"email":"zhangsan@163.com"
};
console.log(jsonObj);
console.log(typeof jsonObj);
console.log("");
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr)
console.log(typeof jsonStr);
创建json格式的文件
cookie
cookie 是浏览器提供的一种可以缓存数据的机制 [http协议]
https://www.runoob.com/js/js-cookies.html
cookie特点
1、需要http服务或者https服务器
说明: live server打开的页面,会根据我们编写的代码,实时更新
2、同一个客户端软件
3、同一个服务环境下 【路径】可以实现数据共享
小结:
- cookie是浏览器缓存数据的一种机制
- cookie需要在http协议下使用
- cookie是共享数据的一种机制
设置cookie缓存数据
document.cookie = "username=admin";
document.cookie = "userpass=123456";
document.cookie = "uid=10010";
获取cookie缓存数据
// 1.0 获取缓存的数据
var dataStr = document.cookie;
console.log(dataStr);
// {key:value}
// 2.0切割字符串
var dataArr = dataStr.split("; ");
console.log(dataArr);
// 3.0 循环数组
// 定义空对象
var user = {};
// 循环数组
for(var i = 0 ; i < dataArr.length ; i ++){
// 取key
var key = dataArr[i].split("=")[0];
// 取value
var val = dataArr[i].split("=")[1];
// 属性 = 值
user[key] = val;
}
// 对象
console.log(user);
删除cookie数据
// 设置cookie有效时间
// var dt = new Date();
// var start = dt.getTime();
// var end = start + 2 * 60 * 60 * 1000;// 有效期2小时
// dt.setTime(end);
// console.log(dt);
// document.cookie = "userpass=123456; expires="+dt;
// 删除cookie 设置有效期为过去的时间
document.cookie = "username=''; expires=Thu Jan 01 1970 08:00:00 GMT+0800"
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
总结:
cookie的使用：
设置：document.cookie = ‘key=val;path:/;expires=’+d (其中d为时间)
获取：document.cookie
删除cookie： 将过期时间设置为负值
举例:
结语
个人学习笔记，如有错解，劳烦指正
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
