【学习笔记】JavaScript视频【石川blue讲师】学习的同时记录，鲁迅说过：“好记性不容烂笔头” https://

学习的同时记录，鲁迅说过：“好记性不容烂笔头”

www.bilibili.com/video/BV1Ys…

鼠标坐标

document.onmousemove = function(e){
    // e
    console.log('e','X:',e.clientX,'Y:',e.clientY);
    // event
    console.log('event','X:',event.clientX,'Y:',event.clientY);
}

元素宽高和坐标

let oDiv1 = document.getElementById('div1');
console.log('width:',oDiv1.offsetWidth);
console.log('height:',oDiv1.offsetHeight);
console.log('left:',oDiv1.offsetLeft);
console.log('top:',oDiv1.offsetTop);

浏览器可视区域

document.documentElement.clientWidth;
document.documentElement.clientHeight;

浏览器滚动位置

// IE FF
document.documentElement.scrollTop;
// Chrome
document.body.scrollTop;

浏览器信息

window.navigator.userAgent

正则表达式

直译：规则表达式

// JS 风格
let re = new RegExp('\d','g');
// Perl 风格(方便常用
let re = /\d/g;

macth()

结合正则表达式，提取符合的内容返回一个数组

范围 g 全局匹配

let str = '12 abc 34 de 567 fg';
let re = /\d/g;
str.match(re);// ['1', '2', '3', '4', '5', '6', '7']

量词 + 若干

let str = '12 abc 34 de 567 fg';
let re = /\d+/g;
str.match(re);// ['12', '34', '567']

replace()

配合正则表达式才能发挥最大作用：批量替换

条件 | 或

let str = 'old yellow is like yellow and pink';
let re = /yellow|pink/g;
str.replace(re, 'blue');// old blue is like blue ank blue

test()

检验正则表达式是否符合返回布尔值

方括号 []

[abc] // 任意字符 a或b或c
[a-z] // 范围 包含英文a-z
[0-9] // 范围 包含数字 \d
[^0-9]// 排除 不包含数字

let str = 'axp bxp cxp dxp exp';
let re = /[abc]xp/g;
str.match(re);// ['axp', 'bxp', 'cxp']

转义字符

\d // 数字 [0-9]
\w // 英文+下划线 [0-9a-z_]
\s // 空白字符
\d // 除了 数字 [^0-9]
\w // 除了 英文+下划线 [^0-9a-z_]
\S // 除了 空白字符

let str = '12 abc 34 de 567 fg';
let re = /\d/g;
str.match(re);// ['1', '2', '3', '4', '5', '6', '7']

量词 {}

{n}  // 正好n位
{n,m}// 最少n位最多m位
{n,} // 最少n位最多不限
+    // {1,}
?    // {0,1}
*    // {0,}

定位

^ // 必须开头是
$ // 必须结尾是

作业

无缝滚动

还可以左右切换方向

let timer = null;
let odiv1 = document.querySelector('#div1');
let oUl = odiv1.querySelector('ul');
let aLi = odiv1.querySelectorAll('ul li');
let oLeft = document.querySelector('.left');
let oRight = document.querySelector('.right');
let speed = -1;

oUl.innerHTML += oUl.innerHTML;
oUl.style.width = odiv1.querySelector('ul li').offsetWidth * odiv1.querySelectorAll('ul li').length + 'px';

function startMove(){
    if(parseInt(oUl.style.left) <= -(odiv1.querySelector('ul li').offsetWidth * aLi.length)){
        oUl.style.left = 0;
    }
    if(parseInt(oUl.style.left) >= 0){
        oUl.style.left = -(odiv1.querySelector('ul li').offsetWidth * aLi.length) + 'px';
    }
    oUl.style.left = oUl.offsetLeft + speed + 'px';
}
timer = setInterval(startMove, 30);

odiv1.onmouseover = () => {
    clearInterval(timer);
}
odiv1.onmouseout = () => {
    timer = setInterval(startMove, 30);
}
oLeft.onclick = () => {
    speed = -1;
}
oRight.onclick = () => {
    speed = 1;
}

表格增删查

增加删除和搜索

let oDiv1 = document.getElementById('div1');
let oName = oDiv1.querySelector('#name');
let oAge = oDiv1.querySelector('#age');
let oBtn = oDiv1.querySelector('button');
let oTable = oDiv1.querySelector('table');
let _id = 0;

// 添加
oBtn.onclick = function () {
    let name = oName.value;
    let age = oAge.value;
    oName.value = '';
    oAge.value = '';
    let _tr = document.createElement('tr');
    _id++;
    _tr.innerHTML = `
        <td>${_id}</td>
        <td>${name}</td>
        <td>${age}</td>
        <td><a href="javascript:void(0);">操作</a></td>
    `;
    oTable.querySelector('tbody').append(_tr);
    // oTable.querySelector('tbody').appendChild(_tr);

    _tr.querySelector('a').onclick = function () {
         _tr.remove();
        // oTable.querySelector('tbody').removeChild(this.parentNode.parentNode);
    }
}

let oSearch = oDiv1.querySelector('#search');
let oSearchBtn = oDiv1.querySelector('#searchBtn');

// 搜索
oSearchBtn.onclick = function () {
    let search = oSearch.value.toLowerCase().split(' ');
    let aName = oTable.querySelectorAll('tbody td:nth-child(2)');
    for (let i = 0; i < aName.length; i++) {
        aName[i].style.background = '';
        for (let j = 0; j < search.length; j++) {
            if(aName[i].innerHTML.toLowerCase().search(search[j]) !== -1) {
                aName[i].style.background = 'yellow';
            }
        }
    }
}

动画

虽然如今 css3 早已可以轻松实现，这里学的是思路

let timer = null;
let oDiv1 = document.getElementById('div1');

function startMove(obj,json) {
    clearInterval(timer);
    timer = setInterval(function() {
        let finish = true;
        // 包括内联样式和外部样式表中的计算后样式
        let computedStyle = window.getComputedStyle(obj);
        for (let attr in json) {
            let target = json[attr];
            if(attr == 'opacity') {
                let thisVal = parseFloat(computedStyle[attr]) * 100;
                let speed = (target * 100 - thisVal) / 6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (thisVal != target * 100) {
                    finish = false;
                    obj.style[attr] = (thisVal + speed) / 100;
                }
            }else{
                let thisVal = parseFloat(computedStyle[attr]);
                let speed = (target - thisVal) / 6;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                
                if (thisVal != target) {
                    finish = false;
                    obj.style[attr] = thisVal + speed + 'px';
                }
            }
            if(finish) {
                clearInterval(timer);
            }
        }
    }, 30);
}

oDiv1.onmouseover = function() {
    startMove(oDiv1,{'width':300, 'height':320, 'opacity':1});
}

oDiv1.onmouseout = function() {
    startMove(oDiv1,{'width':100, 'height':120, 'opacity':0.3});
}

鼠标拖拽

let oDiv1 = document.getElementById('div1');

oDiv1.onmousedown = function(e) {
    console.log('鼠标按下');
    // 鼠标到元素的距离必须按下时候计算
    let offsetX = e.clientX - oDiv1.offsetLeft;
    let mouseY = e.clientY - oDiv1.offsetTop;

    oDiv1.onmousemove = function(e) {
        console.log('=鼠标按住移动=');
        let disX = e.clientX - offsetX;
        let disY = e.clientY - mouseY;
        
        // 锁拖动范围
        if (disX < 0) {
            disX = 0;
        }
        if (disX > document.documentElement.clientWidth - oDiv1.offsetWidth) {
            disX = document.documentElement.clientWidth - oDiv1.offsetWidth;
        }
        if (disY < 0) {
            disY = 0;
        }
        if (disY > document.documentElement.clientHeight - oDiv1.offsetHeight) {
            disY = document.documentElement.clientHeight - oDiv1.offsetHeight;
        }
        
        oDiv1.style.left = disX + 'px';
        oDiv1.style.top = disY + 'px';
    }
    // 鼠标拖动太快移出元素，鼠标抬起事件不会触发，所以需要在document上绑定鼠标抬起事件
    document.onmouseup = function() {
        console.log('鼠标抬起');
        oDiv1.onmousemove = null;
    }
}

图片轮番播放
元素带框拖拽
自定义滚动条