1
2

let styleObj = window.getComputerStyle(dom) 
// 返回值是驼峰变量 { width, backgroundColor, cssFloat } 因为 float 是 JS 保留字，所以改了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let rect = getBoundingClientRect();

x : 146
y : 50
width : 440
height : 240
top : 50
right : 586
bottom : 290
left : 146

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

// father url is test.com
let sonWindow = window.open('http://baidu.com', 'title');

// 父窗口向子窗口发送消息
sonWindow.postMessage('这是信息', 'http://baidu.com');

// 子窗口监听message事件，获取消息
window.addEventListener('message', (e) => {
  // e.source === 'test.com'
  // e.origin === 'baidu.com'
  // e.data === '这是信息'
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

function sleep() {
  return new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
}

async function downLoadResult(fileName, resultStr) {
  await sleep();
  const blob = new Blob([resultStr], {
    type: "text/plain;charset=utf-8"
  });
  const objectURL = URL.createObjectURL(blob);
  const aTag = document.createElement('a');
  aTag.href = objectURL;
  aTag.download = fileName + "-笔记.md";
  aTag.click();
  URL.revokeObjectURL(objectURL);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

const zip = new JSZip();

zip.file("Hello.txt", "Hello World\n");
zip.file("note.md", "This is note for nodejs");

zip.generateAsync({type:"blob"}).then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

// Results in a zip containing
/*
Hello.txt
note.md
*/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

  componentDidMount() {
    document.addEventListener('copy', this.onCopy);
  }

  // 禁止复制
  onCopy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    alert('版权所有，禁止复制!');
  }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

  // 复制到剪切板
  onCopy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    // https://www.runoob.com/jsref/met-win-getselection.html
    const selectedText = window.getSelection().toString();
    const info = `
      \n
      作者：某某某
      链接：https://www.zhihu.com/
      来源：知乎
      著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
    `;
    // 因为 copyText 会再次出发 copy 事件，那么会继续调用这个函数，这里确保只加入一次版权信息
    if (selectedText.includes(info)) return;
    
    // clipboarddata.setData(); // API 有浏览器兼容性，所以换一种方式实现
    
    // https://juejin.cn/post/7306764402736676901
    this.copyText(selectedText + info);
  }

  copyText = (text) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'absolute';
    textarea.style.opacity = '0';
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  };

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function deviceType(){
  var ua = navigator.userAgent;
  var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
  for (var i=0; i<len,len = agent.length; i++) {
    if (ua.indexOf(agent[i])>0){         
      break;
    }
  }
}

deviceType();

window.addEventListener('resize', function(){
  deviceType();
})

// 判断微信浏览器
function isWeixin(){
  var ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i)=='micromessenger'){
    return true;
  }else{
    return false;
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

// 创建一个新的MediaDevices对象
const mediaDevices = navigator.mediaDevices;
 
// 获取视频流并将其传输到video元素上显示
function startScanning() {
    const constraints = { video: true }; // 设置只需要视频流
    
    // https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
    mediaDevices.getUserMedia(constraints)
        .then((stream) => {

            // 本地创建扫描预览组件
            const videoElement = document.getElementById('scanner-preview');
            
            if ('srcObject' in videoElement) {
                videoElement.srcObject = stream;
            } else {
                videoElement.src = URL.createObjectURL(stream);
            }
            
            // 开始读取条形码或二维码
            decodeBarcode();
        })
        .catch((error) => {
            console.log("无法打开相机：", error);
        });
}
 
// 通过Canvas将图像转换为数据URL
function getImageDataUrlFromVideo(elementId) {
    return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        const videoElement = document.getElementById(elementId);
        const context = canvas.getContext('2d');
        canvas.width = videoElement.clientWidth;
        canvas.height = videoElement.clientHeight;
        context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        resolve(canvas.toDataURL());
    });
}
 
// 从图像中提取条形码或二维码信息
async function decodeBarcode() {
    try {
        const imageDataUrl = await getImageDataUrlFromVideo('scanner-preview');
        
        // 这里可以根据自己的需求选择合适的库进行条形码/二维码解码操作
        // 比如使用ZXing、Quagga等库
        // 示例：使用ZXing库解码条形码
        ZXing.BrowserMultiFormatReader().decodeFromUri(imageDataUrl).then((result) => {
            console.log("解码结果：", result.text);
        }).catch((err) => {
            console.log("解码失败：", err);
        });
    } catch (error) {
        console.log("获取图片数据URL时发生错误：", error);
    }
}

startScanning();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

import React, { Component } from 'react'

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      tip: '',
    };
  }

  componentDidMount() {
    window.addEventListener('touchstart', this.handleStart);
    window.addEventListener('touchmove', this.handleMove);
    window.addEventListener('touchend', this.handleEnd);
    this.initialDistance = undefined;
  }

  componentWillUnmount() {
    window.removeEventListener('touchstart', this.handleStart);
    window.removeEventListener('touchmove', this.handleMove);
    window.removeEventListener('touchend', this.handleEnd);
    this.initialDistance = undefined;
  }

  handleStart = (event) => {
    if (event.touches.length === 2) { // 只有当同时按下了两根手指才会进入此条件判断
      var touch1 = event.touches[0];
      var touch2 = event.touches[1];
      // 计算初始两根手指之间的距离
      this.initialDistance = Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2);
      this.setState({
        tip: '手势开始',
      })
    }
  }

  handleMove = (event) => {
    event.preventDefault();
    // 是否阻止默认的网页缩放
    if (event.touches.length >= 2 && this.initialDistance !== undefined) { // 确保已经开始记录初始距离
      var touch1 = event.touches[0];
      var touch2 = event.touches[1];
      // 计算当前两根手指之间的距离
      var currentDistance = Math.sqrt((touch1.clientX - touch2.clientX) ** 2 + (touch1.clientY - touch2.clientY) ** 2);
      // 比较当前与初始距离的差值，判断是否发生了放大或缩小手势
      if ((currentDistance / this.initialDistance > 1 || currentDistance < this.initialDistance)) {
        // 这里可以编写其他处理放大手势的代码
        this.setState({
          tip: '放大手势',
        })
      } else if (currentDistance / this.initialDistance < 1 || currentDistance > this.initialDistance) {
        // 这里可以编写其他处理缩小手势的代码
        this.setState({
          tip: '缩小手势',
        })
      }
    }
  }

  handleEnd = (event) => {
    this.initialDistance = undefined; // 重置初始距离，等待新的手势
    this.setState({
      tip: '无手势',
    })
  }

  render() {
    return (
      <div>{this.state.tip}</div>
    )
  }
}

1
2
3
4
5
6
7

endX = firstTouch.pageX;
endY = firstTouch.pageY;

// 判断手势：x方向移动大于y方向的移动，并且x方向的移动大于25个像素，表示在向左侧滑动
if (Math.abs(endX - startX) >= Math.abs(endY - startY) && startX - endX >= 25){
    handler.call(this, e);
}