JavaScript学习笔记

最新推荐文章于 2020-11-29 21:53:44 发布

WF帆少

最新推荐文章于 2020-11-29 21:53:44 发布

阅读量1.2k

点赞数 10

分类专栏： HTML、CSS、JavaScript 文章标签：渡一 javascript js 前端培训

本文链接：https://blog.csdn.net/qq1123642601/article/details/87551841

版权

HTML、CSS、JavaScript 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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">&lt;</div>

        <div class="btn rightBtn">&gt;</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>

WF帆少

关注

10
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript学习笔记

01 快速掌握BOM对象核心技能// 1.innerHeight和innerWidth// document.body.clietHight,document.body.clietWidth// 注意点：获取可视区的距离时没有包含滚动条的滚动距离，即获取的是整个文档// window.innerHeight,window.innerWidth// 注意点：获取可视区的距离...
复制链接

扫一扫