01 快速掌握BOM对象核心技能
// 1.innerHeight和innerWidth
// document.body.clietHight,document.body.clietWidth
// 注意点:获取可视区的距离时没有包含滚动条的滚动距离,即获取的是整个文档
// window.innerHeight,window.innerWidth
// 注意点:获取可视区的距离时包含滚动条的滚动距离,即获取的是可视区
// 2.pageXOffset和pageYOffset
// window.pageXOffset
// 作用:用于获取横向滚动条滚动距离
// 注意点:window.pageXOffset可以赋值,但不能设置滚动条距离
// window.pageYOffset
// 作用:用于获取纵向滚动条滚动距离
// 注意点:window.pageYOffset可以赋值,但不能设置滚动条距离
// 3.懒加载、按需加载
// offestTop window.pageYoffset window.innerHieht
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 3000px;
}
div {
position: absolute;
left: 200px;
top: 1500px;
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
function check(_id) {
var oDiv = document.getElementById(_id);
if (oDiv.offsetTop <= window.pageYOffset + window.innerHeight) {
oDiv.timer = setInterval(function () {
if (oDiv.style.opacity == '1') {
clearInterval(oDiv.timer);
} else {
oDiv.style.opacity = parseFloat(oDiv.style.opacity) + 0.01;
}
}, 60)
}
}
window.onscroll = function () {
check('demo');
}
</script>
</head>
<body>
<div id="demo" style="opacity: 0.3;"></div>
</body>
</html>
// 4.screenLeft、screenTop、screenX、screenY
// 作用:获取浏览器距离屏幕的像素
// window.screenLeft等等
// 5.iframe、window.self、window.parent
// iframe里面的页面有自己window对象
// 它能访问到父页面的window对象
// 父页面不能访问子页面的window对象
// window.self是window对象本身
// window.parent是window对象的父对象
// window里面的属性不建议用,比如var top,parent 等等
// 6.window.name 窗口名字,记得不能var name
// 7.window.confirm('str') 对话框
// 8.window.prompt('str') 带输入的对话框
// 9.window.onbeforeunload = funtion () {}; 离开弹窗
// 10.window.open 打开窗口, window.close() 可以关闭窗口
// window.open('https://www.baidu.com', 'baidu', 'width=200,height=200');
// 11.navigator
// navigator.useragent 用于网页嗅探
// navigator.cookieEnable 是否打开cookie
// navigator.onLine 判断是否有网
// 12.history
// history.length 同一个窗口下的变动次数
// history.back 退回
// history.forward 前进
// 13.screen
// screen.width、screen.height屏幕的宽高
// 14.location
// url统一资源定位符/网址
// 协议 https 443端口 http 80端口
// 主机名/域名 www.baidu.com
// 路径、文件名
// ?name=value 参数
// #test 锚点 单页面应用 单页面切换,修改不会造成刷新
// 14.1 根据锚点信息来选择对应要展示的内容
// 14.2 切换内容时我们映射到锚点之中
// 14.3 检测锚点修改,修改以后再映射回内容中
// 14.4 location.assign() 加载新文档
// 14.5 location.reload(false) 从缓存中刷新,应用于游戏中 locatin.reload(true) 重新刷新
02 JavaScript必会常用知识点
// 1
// 1.1url请求 -> DNS解析 -> ip
// 1.2tcp三次握手
// 1.3返回js html css img
// 1.4js时间线
// 1.5html、css渲染过程 -> 渲染引擎
// 1.6tcp四次握手
// 2.浏览器组成
// 用户界面shell、浏览器引擎、渲染引擎、网络、UI后端、Js引擎、数据存储
// 3.渲染过程
// 解析html从而构建DOM树 -> CSS Rule树 -> 构建Render树 -> 布局Render树 -> 绘制Render树
// 4.
// 标准模式 html中加上<!DOCTYPE html>(常用) 或<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// 或<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// IE6以及IE6前:混杂模式/怪异模式,向前兼容,现在基本不用,银行用的多
// document.compatMode CSS1Compat为标准模式 BackCompat为混杂模式/怪异模式
// 5.label标签
// 点击标签也能触发input事件以及聚焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
<script>
var oLabel = document.getElementsByTagName('label')[0];
var oInput = document.getElementById('demo');
oLabel.onclick = function () {
console.log(this);
}
oInput.onclick = function () {
console.log(this);
}
</script>
</head>
<body>
<p>
<label for="demo">username</label>
<input type="text" id="demo">
</p>
</body>
</html>
// 6.特性和属性
// setAttribute,getAttribute
// 特性:自带 type value id class
// js中DOM对象与标签一一映射,即修改js中DOM对象属性时,标签上的也被修改
// 属性:自定义、自带
// js中不能获取标签上的属性 修改js中DOM对象属性时,标签上的没有修改
// 只能通过setAttribute(),getAttribute()
// jQuery中 prop:正常js操作 attr:setAttribute(),getAttribute()
// 7.图片预加载与懒加载
// 7.1图片预加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript必会常用知识点</title>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid black;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
var oImg = new Image(); // 等于var oImg = document.createElement('img');
// 监听图片是否加载完毕
oImg.onload = function () {
var oDiv = document.getElementById('demo');
// 图片全部加载完毕后在添加到div
oDiv.appendChild(this);
}
// 加载图片
oImg.src = 'http://zxpic.imtt.qq.com/zxpic_imtt/2019/01/29/1300/originalimage/130350_3000250964_1_500_300.jpg'
</script>
</body>
</html>
// 7.2懒加载
// 监控滑轮事件
// 不断判断当前div的位置
// 采取预加载
// 把图片正式的添加到页面之中
// 8.Math.random()
// 作用:0到1之间的随机数字,[0,1)
// 8.1
// 36 - 12 = 24 24 * [0, 1) = [0, 24)
// [12, 36)
// var num = 12 + 24 * Math.random();
// console.log(num);
// 8.2 抽奖原理
// var num = Math.random() * 100;
// if (num <= 1) {
// console.log('1');
// } else if (num <= 2) {
// console.log('2');
// } else if (num <= 3) {
// console.log('3');
// } else {
// console.log('no');
// }
// 9.文档碎片和虚拟DOM
// 9.1文档碎片,不能实际提升性能
// var oF = document.createDocumentFragment();
// var oUl = document.getElementById('demo');
// for (var i = 0; i < 10; i++) {
// var newLi = document.createElement('li');
// newLi.innerText = i + '';
// // oUl.appendChild(newLi);
// oF.appendChild(newLi);
// }
// oUl.appendChild(oF);
// 提升性能可以用字符串拼接
// var htmlStr = '';
// var oUl = document.getElementById('demo');
// for (var i = 0; i < 10; i++) {
// htmlStr += '<li>' + i + '</li>'
// }
// oUl.innerHTML = htmlStr;
// 9.2虚拟DOM 优化性能
// DOM元素的增删频繁会降低性能
// 10.封装byClassName
// getElementsByClassName有些老版本浏览器不兼容,Document和Element均有这个方法
一、
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
// _className
// 获取document下面的所有标签
var allDomArray = document.getElementsByTagName('*');
var lastDomArray = [];
function trimSpace(strClass) {
var reg = /\s+/g;
return strClass.replace(reg, ' ');
}
for (var i = 0; i < allDomArray.length; i++) {
var lastStrClass = trimSpace(allDomArray[i].className).trim();
var classArray = lastStrClass.split(' ');
for (var j = 0; j < classArray.length; j++) {
if (classArray[j] == _className) {
lastDomArray.push(allDomArray[i]);
break;
}
}
}
return lastDomArray;
}
二
Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function (_className) {
// _className
// 获取document和element下面的所有标签
var allDomArray = this.getElementsByTagName('*');
var lastDomArray = [];
function trimSpace(strClass) {
var reg = /\s+/g;
return strClass.replace(reg, ' ');
}
for (var i = 0; i < allDomArray.length; i++) {
var lastStrClass = trimSpace(allDomArray[i].className).trim();
var classArray = lastStrClass.split(' ');
for (var j = 0; j < classArray.length; j++) {
if (classArray[j] == _className) {
lastDomArray.push(allDomArray[i]);
break;
}
}
}
return lastDomArray;
}
var oP = document.getElementsByClassName('demo');
// var oSpan = oP.getElementsByClassName('demo');
// 11.断点调试 在出错代码上面一行添加debugger或者在浏览器source中直接打断点
// 或者用console.log()
三 运动
// 1.匀速运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>运动</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
opacity: 0.5;
left: 500px;
top: 0;
}
button {
margin-top: 150px;
}
span {
position: absolute;
left: 300px;
width: 1px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<span></span>
<div></div>
<button id="btn">run</button>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oBtn = document.getElementById('btn');
var timer = null;
oBtn.onclick = function () {
uniformMotion(oDiv, 300);
}
/**
* 匀速运动
* dom dom元素
* target 运动停止的横坐标位置
*/
function uniformMotion(dom, target) {
clearInterval(timer);
// 有方向
var iSpeed = target - dom.offsetLeft > 0 ? 7 : -7;
timer = setInterval(function () {
if (Math.abs(target - dom.offsetLeft) < Math.abs(iSpeed)) {
clearInterval(timer);
dom.style.left = target + 'px';
} else {
dom.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</body>
</html>
// 2.缓冲运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
opacity: 0.5;
left: 500px;
top: 0;
}
button {
margin-top: 150px;
}
span {
position: absolute;
left: 300px;
width: 1px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<span></span>
<div></div>
<button id="btn">run</button>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var oBtn = document.getElementById('btn');
var timer = null;
oBtn.onclick = function () {
bufferMotion(oDiv, 300);
}
/**
*缓冲运动
* dom dom元素
* target 运动停止的横坐标位置
*/
function bufferMotion(dom, target) {
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function () {
iSpeed = (target - dom.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (dom.offsetLeft == target) {
clearInterval(timer);
} else {
oDiv.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</body>
</html>
// 3.模拟窗口缓冲弹出弹入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>运动</title>
<style>
.wrapper {
width: 400px;
height: 80px;
background: orange;
position: absolute;
left: -400px;
top: 200px;
}
.wrapper span {
width: 50px;
height: 80px;
background: red;
position: absolute;
right: -50px;
top: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<span></span>
</div>
<script>
var oDiv = document.getElementsByClassName('wrapper')[0];
var timer = null;
// 利用事件冒泡
oDiv.onmouseenter = function () {
bufferMotion(this, 0);
}
oDiv.onmouseleave = function () {
bufferMotion(this, -400);
}
function bufferMotion(dom, target) {
clearInterval(timer);
var iSpeed = null;
timer = setInterval(function () {
iSpeed = (target - dom.offsetLeft) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (dom.offsetLeft == target) {
clearInterval(timer);
} else {
oDiv.style.left = dom.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</body>
</html>
4.透明度缓冲运动(淡出)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
opacity: 1;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var timer = null;
oDiv.onclick = function () {
bufferOpacity(oDiv, 50);
}
// 获取元素的css属性,兼容性好
function getStyle(elem, prop) {
if (window.getComputedStyle) {
// null属性可用于获取伪元素,换成'after'等
return window.getComputedStyle(elem, null)[prop];
} else {
// IE独有属性
return elem.currentSylte[prop];
}
}
// 透明度缓冲运动
function bufferOpacity(elem, target) {
clearInterval(timer);
var iSpeed = null, iCur = null;
timer = setInterval(function () {
iCur = parseFloat(getStyle(elem, 'opacity')) * 100;
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == target) {
clearInterval(timer);
} else {
elem.style.opacity = (iCur + iSpeed) / 100;
}
}, 30);
}
</script>
</body>
</html>
// 5.多物体运动(一个物体一个值改变)
var oDivArray = document.getElementsByTagName('div');
var timer = null;
oDivArray[0].onclick = function () {
startMove(this, 'width', 400);
}
oDivArray[1].onclick = function () {
startMove(this, 'height', 400);
}
oDivArray[2].onclick = function () {
startMove(this, 'borderWidth', 20);
}
oDivArray[3].onclick = function () {
startMove(this, 'opacity', 50);
}
function startMove(elem, attr, target) {
clearInterval(elem.timer);
var iSpeed = null, iCur = null;
elem.timer = setInterval(function () {
if (attr == 'opacity') {
iCur = parseFloat(getStyle(elem, attr)) * 100;
} else {
iCur = parseInt(getStyle(elem, attr));
}
iSpeed = (target - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur == target) {
clearInterval(elem.timer);
} else {
elem.style.width = iCur + iSpeed + 'px';
}
if (attr == 'opacity') {
elem.style.opacity = (iCur + iSpeed) / 100;
} else {
elem.style[attr] = iCur + iSpeed + 'px';
}
}, 30);
}
// 6.多物体多值运动+回调机制(一个物体多个值改变)
var oTopDiv = document.getElementById('topDiv');
var oBottomDiv = document.getElementById('bottomDiv');
oTopDiv.onclick = function () {
startMove(this, {
width: 400,
height: 400,
left: 200,
top: 300,
opacity: 50
}, function () {
startMove(oBottomDiv, {
width: 400,
height: 400,
left: 200,
top: 300,
opacity: 50
}, function () {
alert('over');
});
});
}
function startMove(elem, attrObj, callback) {
clearInterval(elem.timer);
var iSpeed = null, iCur = null;
elem.timer = setInterval(function () {
var bStop = true;
for (var attr in attrObj) {
if (attr == 'opacity') {
iCur = parseFloat(getStyle(elem, attr)) * 100;
} else {
iCur = parseInt(getStyle(elem, attr));
}
iSpeed = (attrObj[attr] - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (attr == 'opacity') {
elem.style.opacity = (iCur + iSpeed) / 100;
} else {
elem.style[attr] = iCur + iSpeed + 'px';
}
if (iCur != attrObj[attr]) {
bStop = false;
}
}
if (bStop) {
clearInterval(elem.timer);
typeof (callback) == 'function' && callback();
}
}, 30);
}
04加速度运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04加速度运动</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
// v = v + at
var oDiv = document.getElementsByTagName('div')[0];
var timer = null;
oDiv.onclick = function () {
startMove(this);
}
// 加速度不变的加速运动,运动方向是向右
// 加速度不变的减速运动 加速不变的加速运动 向左
function startMove(elem) {
clearInterval(timer);
// var a = 2;
var a = -2;
var iSpeed = 20;
timer = setInterval(function () {
iSpeed = iSpeed + a;
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}, 30);
}
</script>
</body>
</html>
05弹性运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05弹性运动</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
span {
width: 1px;
height: 100px;
position: absolute;
top: 0;
left: 300px;
background: black;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
// v = v + at
var oDiv = document.getElementsByTagName('div')[0];
var timer = null;
oDiv.onclick = function () {
startMove(this, 300);
}
function startMove(elem, target) {
clearInterval(timer);
// var a = 2;
var a = 3;
var iSpeed = 0;
var u = 0.8;
timer = setInterval(function () {
a = (target - elem.offsetLeft) / 5;
iSpeed += a;
iSpeed *= u;
if (Math.abs(iSpeed) < 1 && Math.abs(target - elem.offsetLeft) < 1) {
clearInterval(timer);
elem.style.left = target + 'px';
}
oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
}, 30);
}
</script>
</body>
</html>
06弹性运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06弹性运动案例</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
position: relative;
margin: 100px auto 0px;
width: 800px;
height: 100px;
}
ul .elem {
float: left;
width: 198px;
border: 1px solid black;
background: red;
height: 98px;
line-height: 98px;
text-align: center;
}
ul .bg {
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 100px;
opacity: 0.4;
background: deeppink;
}
</style>
</head>
<body>
<ul>
<li class="elem">a</li>
<li class="elem">b</li>
<li class="elem">c</li>
<li class="elem">d</li>
<li class="bg"></li>
</ul>
<script>
var oLiArray = document.getElementsByTagName('li');
var oLiBg = oLiArray[oLiArray.length - 1];
var timer = null;
for (var i = 0; i < oLiArray.length - 1; i++) {
oLiArray[i].onmouseenter = function () {
startMove(oLiBg, this.offsetLeft);
}
}
function startMove(elem, target) {
clearInterval(timer);
var a = 3;
var iSpeed = 0;
var u = 0.8;
timer = setInterval(function () {
a = (target - elem.offsetLeft) / 5;
iSpeed += a;
iSpeed *= u;
if (Math.abs(iSpeed) < 1 && Math.abs(target - elem.offsetLeft) < 1) {
clearInterval(timer);
elem.style.left = target + 'px';
}
elem.style.left = elem.offsetLeft + iSpeed + 'px';
}, 30);
}
</script>
</body>
</html>
07模拟重力场
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07模拟重力场</title>
<style>
div {
position: absolute;
left: 0px;
top: 0px;
background: rebeccapurple;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
// 多方向运动 + 碰撞检测 + 重力加速度 + 能量损失
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function () {
startMove(this);
}
function startMove(elem) {
clearInterval(elem.timer);
var iSpeedX = 6;
var iSpeedY = 8;
var g = 3;
elem.timer = setInterval(function () {
iSpeedY += g;
var newTop = elem.offsetTop + iSpeedY;
var newLeft = elem.offsetLeft + iSpeedX;
if (newTop >= document.documentElement.clientHeight - elem.clientHeight) {
iSpeedY *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newTop = document.documentElement.clientHeight - elem.clientHeight;
}
if (newTop <= 0) {
iSpeedY *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newTop = 0;
}
if (newLeft >= document.documentElement.clientWidth - elem.clientWidth) {
iSpeedX *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newLeft = document.documentElement.clientWidth - elem.clientWidth;
}
if (newLeft <= 0) {
iSpeedX *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newLeft = 0;
}
if (Math.abs(iSpeedX) < 1) {
iSpeedX = 0;
}
if (Math.abs(iSpeedY) < 1) {
iSpeedY = 0;
}
if (iSpeedX == 0 && iSpeedY == 0 &&
newTop == (document.documentElement.clientHeight - elem.clientHeight)) {
clearInterval(elem.timer)
} else {
elem.style.top = newTop + 'px';
elem.style.left = newLeft + 'px';
}
}, 30);
}
</script>
</body>
</html>
08拖拽实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08拖拽实例</title>
<style>
div {
position: absolute;
left: 0px;
top: 0px;
background: rebeccapurple;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmousedown = function (e) {
clearInterval(this.timer);
var event = window.event || e;
var disX = event.clientX - this.offsetLeft;
var disY = event.clientY - this.offsetTop;
var self = this;
var lastLeft = 0;
var lastTop = 0;
var iSpeedX = 0;
var iSpeedY = 0;
document.onmousemove = function (e) {
var event = window.event || e;
var newLeft = event.clientX - disX;
var newTop = event.clientY - disY;
iSpeedX = newLeft - lastLeft;
iSpeedY = newTop - lastTop;
lastLeft = newLeft;
lastTop = newTop;
self.style.left = newLeft + 'px';
self.style.top = newTop + 'px';
}
oDiv.onmouseup = function () {
document.onmousedown = null;
document.onmousemove = null;
startMove(self, iSpeedX, iSpeedY);
}
}
function startMove(elem, iSpeedX, iSpeedY) {
clearInterval(elem.timer);
var g = 3;
elem.timer = setInterval(function () {
iSpeedY += g;
var newTop = elem.offsetTop + iSpeedY;
var newLeft = elem.offsetLeft + iSpeedX;
if (newTop >= document.documentElement.clientHeight - elem.clientHeight) {
iSpeedY *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newTop = document.documentElement.clientHeight - elem.clientHeight;
}
if (newTop <= 0) {
iSpeedY *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newTop = 0;
}
if (newLeft >= document.documentElement.clientWidth - elem.clientWidth) {
iSpeedX *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newLeft = document.documentElement.clientWidth - elem.clientWidth;
}
if (newLeft <= 0) {
iSpeedX *= -1;
iSpeedY *= 0.8
iSpeedX *= 0.8
newLeft = 0;
}
if (Math.abs(iSpeedX) < 1) {
iSpeedX = 0;
}
if (Math.abs(iSpeedY) < 1) {
iSpeedY = 0;
}
if (iSpeedX == 0 && iSpeedY == 0 &&
newTop == (document.documentElement.clientHeight - elem.clientHeight)) {
clearInterval(elem.timer)
} else {
elem.style.top = newTop + 'px';
elem.style.left = newLeft + 'px';
}
}, 30);
}
</script>
</body>
</html>
09轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
}
.wrapper {
position: relative;
width: 400px;
height: 250px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
.wrapper .sliderPage {
position: absolute;
width: 2000px;
height: 250px;
}
.wrapper .sliderPage li {
width: 400px;
height: 250px;
float: left;
}
.wrapper .sliderPage li img {
width: 100%;
height: 100%;
}
.wrapper .btn {
position: absolute;
width: 40px;
height: 40px;
background: #000;
color: #fff;
text-align: center;
line-height: 40px;
top: 50%;
margin-top: -20px;
opacity: 0.1;
}
.wrapper .btn:hover {
opacity: 1;
}
.wrapper .leftBtn {
position: absolute;
left: 10px;
cursor: pointer;
}
.wrapper .rightBtn {
position: absolute;
right: 10px;
cursor: pointer;
}
.wrapper .sliderIndex {
position: absolute;
width: 100%;
bottom: 10px;
text-align: center;
}
.wrapper .sliderIndex span {
display: inline-block;
width: 8px;
height: 8px;
background: #ccc;
border-radius: 50%;
margin-right: 10px;
cursor: pointer;
}
.wrapper .sliderIndex span.active {
background: #f40;
}
</style>
<script>
/**
* 多物体多值运动+回调机制(一个物体多个值改变)
* @param {*} elem
* @param {*} attrObj
* @param {*} callback
*/
function startMove(elem, attrObj, callback) {
clearInterval(elem.timer);
var iSpeed = null, iCur = null;
elem.timer = setInterval(function () {
var bStop = true;
for (var attr in attrObj) {
if (attr == 'opacity') {
iCur = parseFloat(getStyle(elem, attr)) * 100;
} else {
iCur = parseInt(getStyle(elem, attr));
}
iSpeed = (attrObj[attr] - iCur) / 7;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (attr == 'opacity') {
elem.style.opacity = (iCur + iSpeed) / 100;
} else {
elem.style[attr] = iCur + iSpeed + 'px';
}
if (iCur != attrObj[attr]) {
bStop = false;
}
}
if (bStop) {
clearInterval(elem.timer);
typeof (callback) == 'function' && callback();
}
}, 30);
}
</script>
</head>
<body>
<div class="wrapper">
<ul class="sliderPage">
<li>
<img src="imgs/1.jpg" />
</li>
<li>
<img src="imgs/2.jpg" />
</li>
<li>
<img src="imgs/3.jpg" />
</li>
<li>
<img src="imgs/4.jpg" />
</li>
<li>
<img src="imgs/1.jpg" />
</li>
</ul>
<div class="btn leftBtn"><</div>
<div class="btn rightBtn">></div>
<div class="sliderIndex">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var timer = null;
var sliderPage = document.getElementsByClassName('sliderPage')[0];
var moveWidth = sliderPage.children[0].offsetWidth;
var num = sliderPage.children.length - 1;
var leftBtn = document.getElementsByClassName('leftBtn')[0];
var rightBtn = document.getElementsByClassName('rightBtn')[0];
var oSpanArray = document.getElementsByClassName('sliderIndex')[0].getElementsByTagName('span');
var lock = true;
var index = 0;
leftBtn.onclick = function () {
autoMove('right->left');
}
rightBtn.onclick = function () {
autoMove('left->right');
}
for (var i = 0; i < oSpanArray.length; i++) {
(function (myIndex) {
oSpanArray[i].onclick = function () {
lock = false;
clearTimeout(timer);
index = myIndex;
startMove(sliderPage, {
left: - index * moveWidth
}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
});
}
}(i));
}
// 默认轮播方向/right按钮 'left->right' / undefined
// 点击left按钮 'right->left'
function autoMove(direction) {
if (lock) {
lock = false;
clearTimeout(timer);
if (!direction || direction == 'left->right') {
index++;
startMove(sliderPage, {
left: sliderPage.offsetLeft - moveWidth
}, function () {
if (sliderPage.offsetLeft == - num * moveWidth) {
index = 0;
sliderPage.style.left = '0px';
}
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
});
} else if (direction == 'right->left') {
if (sliderPage.offsetLeft == 0) {
sliderPage.style.left = - num * moveWidth + 'px';
index = num;
}
index--;
startMove(sliderPage, {
left: sliderPage.offsetLeft + moveWidth
}, function () {
lock = true;
timer = setTimeout(autoMove, 1500);
changeIndex(index);
});
}
}
}
function changeIndex(_index) {
for (var i = 0; i < oSpanArray.length; i++) {
oSpanArray[i].className = '';
}
oSpanArray[_index].className = 'active';
}
timer = setTimeout(autoMove, 1500);
</script>
</body>
</html>
11深入数组拓展方法并应用一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11深入数组拓展方法并应用一</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var personArr = [
{ name: 'a', src: 'imgs/1.jpg', des: 'testA', sex: 'm', age: 17 },
{ name: 'b', src: 'imgs/2.jpg', des: 'testB', sex: 'f', age: 18 },
{ name: 'c', src: 'imgs/3.jpg', des: 'testC', sex: 'f', age: 20 },
{ name: 'd', src: 'imgs/4.jpg', des: 'testD', sex: 'm', age: 27 }
];
// 1.forEach方法 遍历
// 第一个参数必选
// 第二个参数:可选,改变this指向
// personArr.forEach(function (ele, index, self) {
// // self是数组本身
// // this一开始指向window
// // console.log(ele, index, self, this);
// this[index].innerHTML = ele.name;
// }, document.getElementsByTagName('li'));
// 实现原理
// Array.prototype.myForEach = function (func) {
// var _arr = this, len = _arr.length, param2 = arguments[1] || window;
// for (var i = 0; i < len; i++) {
// func.apply(param2, [_arr[i], i, _arr]);
// }
// };
// personArr.myForEach(function (ele, index, self) {
// console.log(ele, index, self, this);
// this[index].innerText = ele.name;
// }, document.getElementsByTagName('li'));
// 2.filter方法 过滤
// 第二个参数:可选,改变this指向
// 过滤数据,产生新数组,逻辑需要自定义
// return true 数据都留下来
// return false 数据都不留下来
// var newArr = personArr.filter(function (ele, index, self) {
// console.log(ele, index, self, this);
// return ele.sex == 'm';
// }, {name: 'test'});
// 实现原理
// Array.prototype.myFilter = function (func) {
// var _arr = this, param2 = arguments[1] || window, len = _arr.length, newArr = [];
// for (var i = 0; i < len; i++) {
// func.apply(param2, [_arr[i], i, _arr]) ? newArr.push(_arr[i]) : '';
// }
// return newArr;
// }
// var newArr = personArr.myFilter(function (ele, index, self) {
// console.log(ele, index, self, this);
// return ele.sex == 'm';
// }, { name: 'test' });
// map方法 映射
// 第二个参数:可选,改变this指向
// 返回新数组
// return什么,新数组就有什么
// 可利用deepClone解决数据污染问题
// var newArr = personArr.map(function (ele, index, self) {
// console.log(ele, index, self, this);
// ele.name = ele.name + 111;
// return ele;
// }, { name: 'test' });
// 实现原理
// Array.prototype.myMap = function (func) {
// var _arr = this, len = _arr.length, param2 = arguments[1] || window, newArr = [];
// for (var i = 0; i < len; i++) {
// newArr.push(func.apply(param2, [_arr[i], i, _arr]));
// }
// }
// var newArr = personArr.map(function (ele, index, self) {
// console.log(ele, index, self, this);
// ele.name = ele.name + 111;
// return ele;
// }, { name: 'test' });
// 3.every方法
// 第二个参数:可选,改变this指向
// 函数返回有一个false,即整体返回false
// var flag = personArr.every(function (ele, index, self) {
// return ele.age > 20;
// }, { name: 'test' });
// console.log(flag);
// 实现原理
// Array.prototype.myEvery = function (func) {
// var _arr = this, len = _arr.length, param2 = arguments[1], flag = true;
// for (var i = 0; i < len; i++) {
// if (!func.apply(param2, [_arr[i], i, _arr])) {
// flag = false;
// }
// }
// return flag;
// };
// var flag = personArr.myEvery(function (ele, index, self) {
// return ele.age > 20;
// }, { name: 'test' });
// console.log(flag);
// 4.some方法
// 第二个参数:可选,改变this指向
// 函数返回有一个true,即整体返回true
// var flag = personArr.some(function (ele, index, self) {
// return ele.age > 20;
// }, { name: 'test' });
// console.log(flag);
// 5.reduce方法
// 从左向右遍历
// 第二参数不会改变this指向
// initialValue会作为下一个遍历的prevValue,以此类推接力
// var initialValue = 'initial';
// var lastValue = personArr.reduce(function (prevValue, curValue, index, self) {
// console.log(prevValue, curValue, index, self);
// return prevValue;
// }, initialValue);
// 实现原理
// Array.prototype.myReduce = function (func, initialValue) {
// var _arr = this, len = _arr.length, param2 = arguments[2] || window;
// for (var i = 0; i < len; i++) {
// initialValue = func.apply(param2, [initialValue, _arr[i], i, _arr]);
// }
// return initialValue;
// };
// var initialValue = 'initial';
// var lastValue = personArr.myReduce(function (prevValue, curValue, index, self) {
// console.log(prevValue, curValue, index, self, this);
// return prevValue;
// }, initialValue, { name: 'test' });
// 6.reduceRight方法
// 从右向左遍历
// 7.cookies字符串转换为cookies对象
var cookieStr = "BIDUPSID=F23FA34F0B05BCF0E3CD058D2B4E0B9A; PSTM=1533088359; BAIDUID=D2584083CD15F0D1AD5A5B153BE07E6E:FG=1; BD_UPN=12314753; ispeed_lsm=8; BDRCVFR[vObkC8vrkxf]=mk3SLVN4HKm; delPer=0; BD_CK_SAM=1; PSINO=7; H_PS_PSSID=; BDORZ=FFFB88E999055A3F8A630C64834BD6D0; BDSVRTM=0"
function parseCookie(str) {
var arrCookie = cookieStr.split('; ');
var cookieObj = {};
arrCookie.reduce(function (prevValue, curValue, index, self) {
var curArr = curValue.split('=');
prevValue[curArr[0]] = curArr[1];
return prevValue;
}, cookieObj);
return cookieObj;
}
var cookieObj = parseCookie(cookieStr);
console.log(cookieObj);
</script>
</body>
</html>