sollrei / mini-note Goto Github PK

mql = window.matchMedia(mediaQueryString)

window.matchMedia("(orientation: portrait)").matches

window.matchMedia('(max-device-width: 20em)').matches

function handleOrientationChange(mql) {
  if (mql.matches) {
    // ...
  } else {
    // ...
  }
}

var mql = window.matchMedia("(orientation: portrait)");
mql.addListener(handleOrientationChange);
handleOrientationChange(mql); 

// 移除监听事件
mql.removeListener(handleOrientationChange);

const money = 100000.12;
money.toLocaleString('zh', { style: 'currency', currency: 'CNY' }); 
// "￥1,000.12"

money.toLocaleString('zh', { style: 'currency', currency: 'CNY', currencyDisplay: 'code' });
// "CNY1,000.12"

money.toLocaleString('zh', { style: 'currency', currency: 'cny', currencyDisplay: 'name' });
// "1,000.12 人民币"

const money = 100000.12;
new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY'}).format(money);

// "￥100,000.12"

const date = new Date();
new Intl.DateTimeFormat('zh-CN').format(date); // "2019/6/10"
date.toLocaleString('zh'); // "2019/6/10 上午9:07:06"

const myArray = [['one', 1], ['two', 2], ['three', 3]];
const obj = Object.fromEntries(myArray);

console.log(obj);    // => {one: 1, two: 2, three: 3}

const obj = {one: 1, two: 2, three: 3};

console.log(Object.entries(obj));    
// => [["one", 1], ["two", 2], ["three", 3]]

const str = "   string   ";

console.log(str.trimStart());    // => "string   "
console.log(str.trimEnd());      // => "   string"

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

let sym = Symbol(‘foo’);
console.log(sym.description);    // => foo

sym = Symbol();
console.log(sym.description);    // => undefined

// create a global symbol
sym = Symbol.for(‘bar’);
console.log(sym.description);    // => bar

try {
  
} catch {
  
}

    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    var img = new Image;
    img.setAttribute('crossOrigin', 'anonymous');  // 解决跨域问题  ie11+支持
    img.src = 'https://img-i.gcimg.net/2019/1204/wk2buqe52kwboiza024634.png'
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      var color = ctx.getImageData(1, 1, 1, 1).data;
      var rgb = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
      document.body.style.background = rgb;
    }

    if ('IntersectionObserver' in window) {
      var observer = new IntersectionObserver(function (entries, _observer) {
        entries.forEach(item => {
          if (item.isIntersecting) { // 目标元素在根元素中可见（达到thresholds设置的范围）

            item.target.style.background = '#517791'; // 执行一些啥啥操作，这里只是改了背景色

            _observer.unobserve(item.target); // 取消观察
          }
        })
      }, {
        rootMargin: "0px 0px -60px 0px"  // 监听元素和root边界的偏移量，类似css margin。这里值是距离底部60像素

        // 这里还有两个可设置的属性：
        // root: 指定根元素，需要是目标元素的祖先元素，默认是浏览器视窗（viewport）
        // thresholds: 数组，值是监听元素和root边界交叉区域的比率
        //             例如设置[0.3, 0.7]，意味在交叉区域面积30%和70%的位置会执行回调函数
        //             默认是0，即目标元素在root内一出现就会立即调用
      });

      document.querySelectorAll('div').forEach(item => { observer.observe(item) });
    }  

const a = '<div class="div"><p>content</p></div>'; 
const parser = new DOMParser(); 
const doc = parser.parseFromString(a, 'text/html');
const result = doc.body.querySelector('.div');

document.body.appendChild(result);

const a = '<div class="div"><p>content</p></div>'; 
const result = document.createRange().createContextualFragment(a);

document.body.appendChild(result);

String.fromCharCode(Math.random() * 26 + 'a'.charCodeAt(0))

app.use(bodyParser.urlencoded({limit: '50mb', extended: true}));
app.use(bodyParser.json({limit: '50mb'}));

document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

const btn = document.getElementById('edit-bold');
btn.addEventListener('click', () => {
  document.execCommand('bold', false, null);
}, false);

document.execCommand('formatBlock', false, '<h1>');

const d = window.devicePixelRatio || 1;
const b = context.webkitBackingStorePixelRatio || 1;
const ratio = d / b;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let w = 400;
let h = 400;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w * ratio;
canvas.height = h * ratio;
ctx.scale(ratio, ratio);

module.exports = {
    // 加这一行
    htmlWhitespaceSensitivity: "ignore"
}

const queryString = window.location.search;
// ?product=shirt&color=blue&newuser&size=m

const urlParams = new URLSearchParams(queryString);

const product = urlParams.get('product')
console.log(product);
// "shirt"

const newUser = urlParams.get('newuser')
console.log(newUser);
// ""

console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false

console.log(urlParams.getAll('size'));
// [ 'm' ]

for (const key of urlParams.keys()) console.log(key);
// product, color, newuser, size

function downloadFile(url) {
      const iframe = document.createElement('iframe');

      iframe.style.display = 'none'; 
      iframe.style.height = 0;
      iframe.src = url; 
      document.body.appendChild(iframe);

      setTimeout(() => {
        iframe.remove();
      }, 1000);
    }