屏幕录制

当您需要录制当前屏幕并上传或下载屏幕录制时

const streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => {    var recordedChunks = [];// recorded video datavar options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format    var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance    mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)    mediaRecorder.start();    // Video Fragmentation    function handleDataAvailable(event) {        if (event.data.size > 0) {            recordedChunks.push(event.data);// Add data, event.data is a BLOB object            download();// Encapsulate into a BLOB object and download        }    }// file download    function download() {        var blob = new Blob(recordedChunks, {            type: "video/webm"        });        // Videos can be uploaded to the backend here        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);    }})

判断横屏还是竖屏

function hengshuping(){    if(window.orientation==180||window.orientation==0){        alert("Portrait state！")    }    if(window.orientation==90||window.orientation==-90){        alert("Landscape state！")    }}window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

改变横竖屏样式

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

标签页显示隐藏

<div class="test">  <input type="file" name="" id="">  <img src="" alt=""></div>
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])})

图片预加载

当图片较多时，需要预加载图片以避免白屏

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'])

元素可编辑

当你需要编辑一个dom元素时，让它像文本区域一样点击。

<div contenteditable="true">here can be edited</div>

激活应用程序

当你在移动端开发时，你需要打开其他应用程序。还可以通过location.href赋值来操作以下方法

<a href="tel:12345678910">phone</a><a href="sms:12345678910,12345678911?body=hello">android message</a> <a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a><a href="wx://">ios message</a>

这篇好文章是转载于：学新通技术网