乐趣区

关于javascript:js常用方法整理

jiezi

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" && 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 <= 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"> 电话 </a>

  <a href="sms:12345678910,12345678911?body= 你好">android 短信 </a>
  <a href="sms:/open?addresses=12345678910,12345678911&body= 你好">ios 短信 </a>

  <a href="wx://">ios 短信 </a>
退出移动版