js常用方法示例梳理(总结篇)

更新时间：2023年05月19日 08:53:43 作者：墨城

这篇文章主要为大家介绍了js常用的方法示例梳理总结及功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

1、实现全屏
2、退出全屏
3、页面打印
4、打印内容样式更改
5、阻止关闭事件
6、屏幕录制
7、判断横竖屏
8、横竖屏样式变更
9、标签页显隐
10、本地图片预览
11、图片预加载
12、字符串脚本化
13、递归函数名解耦
14、隐显判断
15、元素可编辑
16、元素属性监听
17、打印 dom 元素
18、激活应用

1、实现全屏

function fullScreen() {
    const el = document.documentElement
    const rfs = 
    el.requestFullScreen || 
    el.webkitRequestFullScreen || 
    el.mozRequestFullScreen || 
    el.msRequestFullscreen
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el)
    }
}
fullScreen()

2、退出全屏

function exitScreen() {
    if (document.exitFullscreen) { 
        document.exitFullscreen()
    } 
    else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen()
    } 
    else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen()
    } 
    else if (document.msExitFullscreen) { 
        document.msExitFullscreen()
    } 
    if(typeof cfs != "undefined" &amp;&amp; cfs) {
        cfs.call(el)
    }
}
exitScreen()

3、页面打印

window.print()

4、打印内容样式更改

<style>
/* 使用@media print可以调整你需要的打印样式 */
@media print {
    .noprint {
        display: none;
    }
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>

5、阻止关闭事件

//当你需要防止用户刷新或者关闭浏览器，你可以选择触发 beforeunload 事件，部分浏览器不能自定义文本内容

window.onbeforeunload = function(){
    return '您确定要离开haorooms博客吗？';
};

6、屏幕录制

//当你需要将录制当前屏幕，并将录屏上传或下载
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
    var recordedChunks = [];// 录制的视频数据
    var options = { mimeType: "video/webm; codecs=vp9" };// 设置编码格式
    var mediaRecorder = new MediaRecorder(stream, options);// 初始化MediaRecorder实例
    mediaRecorder.ondataavailable = handleDataAvailable;// 设置数据可用（录屏结束）时的回调
    mediaRecorder.start();
    // 视频碎片合并
    function handleDataAvailable(event) {
        if (event.data.size > 0) {
            recordedChunks.push(event.data);// 添加数据，event.data是一个BLOB对象
            download();// 封装成BLOB对象并下载
        }
    }
    // 文件下载
    function download() {
        var blob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        // 此处可将视频上传到后端
        var url = URL.createObjectURL(blob);
        var a = document.createElement("a");
        document.body.appendChild(a);
        a.style = "display: none";
        a.href = url;
        a.download = "test.webm";
        a.click();
        window.URL.revokeObjectURL(url);
    }
})

7、判断横竖屏

function hengshuping(){
    if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")
    }
    if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")
    }
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

8、横竖屏样式变更

<style>
@media all and (orientation : landscape) {
    body {
        background-color: #ff0000;
    }
}
@media all and (orientation : portrait) {
    body {
        background-color: #00ff00;
    }
}
</style>

9、标签页显隐

//当你需要对标签页显示隐藏进行事件监听时
const {hidden, visibilityChange} = (() => {
    let hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") {
      // Opera 12.10 and Firefox 18 and later support
      hidden = "hidden";
      visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
      hidden = "msHidden";
      visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
      hidden = "webkitHidden";
      visibilityChange = "webkitvisibilitychange";
    }
    return {
      hidden,
      visibilityChange
    }
})();
const handleVisibilityChange = () => {
    console.log("当前被隐藏", document[hidden]);
};
document.addEventListener(
    visibilityChange,
    handleVisibilityChange,
    false
);

10、本地图片预览

//当你从客户端获取到一张图片但不能立刻上传到服务器，却需要预览的时候
<div class="test">
    <input type="file" name="" id="">
    <img src="" alt="">
</div>
<script>
const getObjectURL = (file) => {
    let url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // webkit or chrome
        url = window.URL.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    }
    return url;
}
document.querySelector('input').addEventListener('change', (event) => {
    document.querySelector('img').src = getObjectURL(event.target.files[0])
})
</script>

11、图片预加载

//当你有大量图片的时候，你需要将图片进行预加载以免出现白屏的情况
const images = []
function preloader(args) {
    for (let i = 0, len = args.length; i < len; i++) {
        images[i] = new Image()
        images[i].src = args[i]
    }
}
preloader(['1.png', '2.jpg'])

12、字符串脚本化

//当你需要将一串字符串转换成一个 js 脚本，该方法有 xss 漏洞，慎用

const obj = eval('({ name: "jack" })')
// obj会被转换为对象{ name: "jack" }
const v = eval('obj')
// v会变成obj这个变量

13、递归函数名解耦

//当你需要写一个递归函数的时候，你声明了一个函数名，但是每次修改函数名的时候总会忘记修改内部的函数名。argument 为函数内部对象，包含传入函数的所有参数，arguments.callee 代表函数名。

// 这是一个最基础的斐波那契数列
function fibonacci (n) {
    const fn = arguments.callee
    if (n &lt;= 1) return 1
    return fn(n - 1) + fn(n - 2)
}

14、隐显判断

//当你需要对一个 dom 元素进行判断当前是否出现在页面视图内，你可以尝试用 IntersectionObserver 进行判断
<style>
.item {
    height: 350px;
}
</style>
<div class="container">
  <div class="item" data-id="1">不可见</div>
  <div class="item" data-id="2">不可见</div>
  <div class="item" data-id="3">不可见</div>
</div>
<script>
  if (window?.IntersectionObserver) {
    let items = [...document.getElementsByClassName("item")]; // 解析为真数组，也可用 Array.prototype.slice.call()
    let io = new IntersectionObserver(
      (entries) => {
        entries.forEach((item) => {
          item.target.innerHTML =
            item.intersectionRatio === 1 // 元素显示比例，为1时完全可见，为0时完全不可见
              ? `元素完全可见`
              : `元素部分不可见`;
        });
      },
      {
        root: null,
        rootMargin: "0px 0px",
        threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
      }
    );
    items.forEach((item) => io.observe(item));
  }
</script>

15、元素可编辑

//当你需要在某个 dom 元素进行编辑，让它点击的时候就像一个 textarea
<div contenteditable="true">这里是可编辑的内容</div>

16、元素属性监听

<div id="test">test</div>
<button onclick="handleClick()">OK</button>
<script>
  const el = document.getElementById("test");
  let n = 1;
  const observe = new MutationObserver((mutations) => {
    console.log("属性发生变化了", mutations);
  })
  observe.observe(el, {
    attributes: true
  });
  function handleClick() {
    el.setAttribute("style", "color: red");
    el.setAttribute("data-name", n++);
  }
  setTimeout(() => {
    observe.disconnect(); // 停止监听
  }, 5000);
</script>

17、打印 dom 元素

//当你需要在开发过程中打印 dom 元素时，使用 console.log 往往只会打印出整个 dom 元素，而无法查看该 dom 元素的内部属性。你可以尝试使用 console.dir

console.dir(document.body)

18、激活应用

//当你在移动端开发时，需要打开其他应用。以下方法也可以通过 location.href 赋值操作
  <a href="tel:12345678910" rel="external nofollow" >电话</a>
  <a href="sms:12345678910,12345678911?body=你好" rel="external nofollow" >android短信</a>
  <a href="sms:/open?addresses=12345678910,12345678911&body=你好" rel="external nofollow" >ios短信</a>
  <a href="wx://" rel="external nofollow" >ios短信</a>

以上就是js常用方法示例梳理总结的详细内容，更多关于js常用方法示例的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

去除字符串左右两边的空格(实现代码)
下面小编就为大家带来一篇去除字符串左右两边的空格(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考
2016-05-05
轻松掌握JavaScript装饰者模式
这篇文章主要帮助大家轻松掌握JavaScript装饰者模式，告诉大家什么是js装饰者模式，感兴趣的小伙伴们可以参考一下
2016-08-08
深入了解JavaScript中的函数柯里化
JavaScript函数柯里化是一种将接受多个参数的函数转换为一系列接受单个参数的函数的技术。本文将通过简单的示例为大家详细讲讲函数柯里化的相关应用，需要的可以参考一下
2023-04-04
js页面跳转的常用方法整理
跳转页面的方法有很多，在本文整理了一些比较常用，并有示例代码，感兴趣的朋友可以参考下
2013-10-10
JavaScript获取键盘按键的键码(参照表)
JS获取键盘按键的键码event.keyCode，记录-方便查找。需要的朋友参考下本教程吧
2017-01-01
禁止弹窗中蒙层底部页面跟随滚动的几种方法
我们大家在做弹出层的时候，必不可少的一个元素就是蒙层，也就是遮罩层，当弹出层滚动的时候，蒙层底部的页面一般是要求固定不动的，所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法，需要的朋友可以参考下。
2017-12-12
iframe如何动态创建及释放其所占内存
一个项目后期测试发现浏览器内存一直居高不下，而且打开iframe页面越多内存占用越大，在IE系列浏览器中尤其明显，下面与大家分享下iframe动态创建及释放内存
2014-09-09
JavaScript使浏览器全屏代码及注意事项
这篇文章主要给大家介绍了关于JavaScript使浏览器全屏代码及注意事项的相关资料,文中通过示例代码介绍了如何通过Element.requestFullscreen进入全屏、Document.exitFullscreen退出全屏、监听全屏变化事件,需要的朋友可以参考下
2025-05-05
Jquery代码实现图片轮播效果（一）
经理交给我一个网站新闻资讯网页开发的活儿，对于我这样的java程序员，没有接触过网页设计这么高端的东东，该怎么搞呢，去度娘那搜索到不少结果，而且很大部分都是用jquery做的，于是根据自己的一些的理解，提供了这篇jquery轮播效果的讲解，有需要的朋友可以来参考下
2015-08-08
element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格(推荐)
这篇文章主要介绍了element必填校验输入空格问题修改正则表达式、请求拦截器实现所有输入框去除首尾空格,本文通过图文实例代码相结合给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-02-02