有勇气的牛排博客
☰

js常用代码总结

有勇气的牛排 394 前端 2023-05-18 22:26:45

文章目录

2 js获取网页/浏览器属性状态

哈喽，大家好，/我是有勇气的牛排/（全网同名）🐮🐮🐮

有问题的小伙伴欢迎在文末/评论，点赞、收藏/是对我最大的支持！！！。

2.1 属性值获取

获取高度

// 浏览器内部界面的高度，即内容显示区域的高度，F12调试工具的占位会实时改变该值
window.innerHeight

// 浏览器外部界面即窗体的高度，调试工具的占位不会影响该值
window.outerHeight

// 表示 HTML 文档所在窗口的可视区域高度，效果同 window.innerHeight
document.documentElement.clientHeight

// ie6 quirks 模式下表示 body 的可视区域高度，注意：body与浏览器之间有个默认的 margin
document.body.clientHeight

获取宽度：
window.innerWidth 、window.outerWidth、window.outerWidth、document.documentElement.clientWidth、 document.body.clientWidth

2.2 js事件监听

2.2.1 窗口大小事件

// 监听 页面窗口大小事件
window.onresize = function () {
    console.log("666")
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    console.log(width, height);
}

1 动作类

1.1 IE6-9禁止用户选中文本

document.body.onselectstart = document.body.ondrag = function () {
     return false;
};

1.2 让IE识别h5

https://920.lanzous.com/iM7WHm0oscb
密码:5imb

<!--[if gte IE 9]>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/html5shiv.min.js" type="text/javascript"></script>
<script src="js/respond.min.js" type="text/javascript"></script>
<script src="js/selectivizr-min.js" type="text/javascript"></script>

<!--[if lt IE 9]>
<script>window.location.href = '/upgrade-browser';</script>

1.3 进度条

https://920.lanzous.com/i58U1m0ovyb
密码:2zrm

<!-- 进度条 -->
<script src="js/nprogress.js"></script>

1.4 图片延时加载

https://920.lanzous.com/igCJNm0okgh
密码:bv9i

<!-- 图片延迟加载插件 -->
<script src="js/jquery.lazyload.min.js"></script>

$("img.thumb").lazyload({
    placeholder: "/Home/images/occupying.png",
    effect: "fadeIn"
});

1.5 禁止右键菜单

window.oncontextmenu = function(){
	return false;
};

1.6 自定义右键菜单

(function () {
    var oMenu = document.getElementById("rightClickMenu");
    var aLi = oMenu.getElementsByTagName("li");
    //加载后隐藏自定义右键菜单
    //oMenu.style.display = "none";
    //菜单鼠标移入/移出样式
    for (i = 0; i < aLi.length; i++) {
        //鼠标移入样式
        aLi[i].onmouseover = function () {
            $(this).addClass('rightClickMenuActive');
            //this.className = "rightClickMenuActive";
        };
        //鼠标移出样式
        aLi[i].onmouseout = function () {
            $(this).removeClass('rightClickMenuActive');
            //this.className = "";
        };
    }
    //自定义菜单
    document.oncontextmenu = function (event) {
        $(oMenu).fadeOut(0);
        var event = event || window.event;
        var style = oMenu.style;
        $(oMenu).fadeIn(300);
        //style.display = "block";
        style.top = event.clientY + "px";
        style.left = event.clientX + "px";
        return false;
    };
    //页面点击后自定义菜单消失
    document.onclick = function () {
        $(oMenu).fadeOut(100);
        //oMenu.style.display = "none"
    }
})();

<!--右键菜单列表-->
<div id="rightClickMenu">
    <ul class="list-group rightClickMenuList">
        <li class="list-group-item disabled">欢迎访问有勇气的牛排博客</li>
        <li class="list-group-item"><span>IP：</span>http://lgch.xyz/</li>
        <li class="list-group-item"><span>地址：</span>宁夏</li>
        <li class="list-group-item"><span>系统：</span>Windows10</li>
        <li class="list-group-item"><span>浏览器：</span>Chrome</li>
    </ul>
</div>

1.7 禁止键盘操作

document.onkeydown = function (event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if ((e.keyCode === 123) || (e.ctrlKey) || (e.ctrlKey) && (e.keyCode === 85)) {
        return false;
    }
};

1.8 JS 实现DIV 滚动至顶部后固定

<div id="nav_keleyi_com" class="toc" style="position:relative;top:0;"> </div>

function menuFixed(id) {
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;

    window.onscroll = function () {
        changePos(id, _getHeight);
    }
}

function changePos(id, height) {
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop < height) {
        obj.style.position = 'relative';
    } else {
        obj.style.position = 'fixed';
    }
}

window.onload = function () {
    menuFixed('nav_keleyi_com');
}

1.9 倒计时

setInterval(function () {
  that.showAlert = 0;
}, 1000);

留言

专栏
文章
加入群聊
程序员兼职接单交流
编程交流