Js 速记

日常记录一些 js/css 相对实用的小笔记，本笔记保持长期更新，如有错误或更好的方案留言反馈

使用 toString() 取随机字符串（toString 最大值为 32）

    var rs=(num)=>{let rs=Math.random().toString(num);return rs.substring(2,rs.length)}
rs(2);  //1011111100100110111101101110010000011101101001100001
rs(16);  //40a52a10becc

使用 link() 创建指定参数链接

    "example string".link("http://www.w3school.com.cn");  //<a href="http://www.w3school.com.cn">example string</a>"

使用 !+"v1" 判断 IE8 以下的浏览器

    !+"\v1";  //true（IE8及以下）
!+"\v1";  //false（谷歌浏览器和IE9及以上）

使用原生js选择 不包含特定 class 的元素（How to Select Element That Does Not have Specific Class）

    <ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>
// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))

通过创建 input 并使用 document.execCommand("copy") 复制文本框内容（注意这里不能隐藏文本框否则获取不到值）

    var text="some sample text",  //文本内容
    copyIpt=document.createElement("input");  //创建文本框
//copyIpt.style.display="none";copyIpt.type="hidden";
document.body.appendChild(copyIpt);  //添加文本框
copyIpt.value=text;  //复制到文本框
copyIpt.select();  //选中所有文本
document.execCommand("copy")  //复制所选内容

js内容选中即复制

    document.onclick = function() {
    if (window.getSelection) {
        text = window.getSelection();
    } else if (document.selection) {
        text = document.selection.createRange();
    }
    // 放到粘贴板里，操作浏览器自身的API
    // console.log(text.toString());
    document.execCommand('Copy'); // 执行浏览器的复制命令
}

js 正则匹配指定开头结尾内字符串（这里匹配 img 标签）

    var str = "img: <img src='#' />",
    filter = str.match(/\<img.*?\>/g);
console.log(filter) //<img src='#' />

js 删除符合指定条件的数组对象中的某个对象

    var arr = [{name:"a",age:1},{name:"b",age:2},{name:"c",age:3}];
console.log(arr)  //a:1 b:2 c:3
for(let i=0;i<arr.length;i++){
    arr[i].name=="b" ? arr.splice(i,1) : false;
}
console.log(arr)  //a:1 c:3

CSS 速记

使用 prefers-color-scheme 进行浏览器亮/暗色默认行为切换

    @media (prefers-color-scheme: light) {
    body{
        color:white;
        background:black;
    }
}
@media (prefers-color-scheme: dark) {
    body{
        color:blank;
        background:white;
    }
}

笔记参考链接： HOE：JavaScript 之神妙之处