frontend notes
06/12/2020
最近更新于:
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 之神妙之处