html学习记录1：html知识累积

更新js文件后页面不刷新
导入的js↓

<script src="js/loginVue.js?"></script>

解决法1：Ctrl + F5 进行强制刷新，覆盖缓存
解决法2：给导入js文件时给其一个版本号，该本号改变浏览器会自动覆盖旧版本↓

//js文件后加上 ？v= 进行版本号设置
<script src="js/loginVue.js?v=1.0.1"></script>

---

localStorage相关知识

//1、基础变量
// 当我们存基本变量时
localStorage.setItem('基本变量名', '基本变量')
// 当我们取值时
localStorage.getItem('基本变量名')
// 当我们删除时
localStorage.removeItem('基本变量名')


//2、josn
// 存josn变量
localStorage.setItem('josn变量名', JSON.stringify('josn变量'))
// 取值
const data = JSON.parse(localStorage.getItem('josn变量名'))
// 删除
localStorage.removeItem('josn变量名')

//3、清空
localStorage.clear()

---

跳转页面
js代码

window.self.location = "/要跳转的地址;"

---

页面全屏监听↓

document.addEventListener("webkitfullscreenchange", (event) => {
                const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                if (isFullScreen) {
                    //  进入全屏
                    console.log('进入全屏')
                } else {
                    //  退出全屏
                    console.log('退出全屏')
                }
            });

---

数组深度拷贝↓（学习源地址）：

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);

// [[1], [2]]
// [[1, 300], [2]]
// These two arrays are completely separate!

---

对象深度比较↓（非原创，来源我已找不到）：

function deepEqual(object1, object2) {
    const keys1 = Object.keys(object1);
    const keys2 = Object.keys(object2);

    if (keys1.length !== keys2.length) {
        return false;
    }

    for (let index = 0; index < keys1.length; index++) {
        const val1 = object1[keys1[index]];
        const val2 = object2[keys2[index]];
        const areObjects = isObject(val1) && isObject(val2);
        if (areObjects && !deepEqual(val1, val2) ||
            !areObjects && val1 !== val2) {
            return false;
        }
    }

    return true;
}

---

得到当前时间↓：

function getCurrentTime(){
    const date = new Date();                   //date.getMonth()月份从0-11，0代表1月，故+1
    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
        + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
}

---

随机得到n个不重复元素↓：

//随机得到n个不重复元素，注传入数组会减少n个,其中oldArr是传入数组，newArr是随机取出元素个数为n的数组(注，无法设置随机种子，故为伪随机)
function randomGetNNDElement(oldArr, n) {
    let newArr = [];
    for(let i = 0; i < n; i++){
        newArr.push(oldArr.splice(Math.floor(Math.random() * oldArr.length), 1)[0]);
    }
    return newArr;
}

---

监听某元素滚动↓：

let browserUl = document.getElementById("browserUl");
        browserUl.addEventListener('scroll',() => {
            /*clientHeight为内容可视区域的高度。
            scrollTop为滚动条在Y轴上的滚动距离。
            scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。*/
            console.log("可视区域的高度:" + browserUl.clientHeight);
            console.log("在Y轴上的滚动距离:" + browserUl.scrollTop);
            console.log("当前元素总高度:" + browserUl.scrollHeight);
            console.log("可滚动距离:" + (browserUl.scrollHeight - browserUl.clientHeight));
            console.log("-----------------------------")
            //设置为
            if(browserUl.scrollHeight - browserUl.clientHeight - browserUl.scrollTop < 300){
                //console.log("当前剩余可滚动区域小于300");
            }
        });

---

待更新