js-复制，document.execCommand 的一些小坑
对于 execCommand 来复制的使用应该不会很陌生，这几天使用的碰上了一个新问题，此方法在请求的时候是无法使用的，往下看👇
默认使用复制const copy = value => {
let inp = document.createElement('input');
inp.setAttribute('value', value)
document.body.appendChild(inp);
inp.select();
document.execCommand('copy')
document.body.removeChild(inp)
}
在正常情况下 document.execCommand('copy') 是返回 true 的，但是在有异步请求的情况下会返回 false；const copy = value => {
let inp = document.createElement(' ...
一个 Git 项目配置多个仓库
废话不多直接x
普通添加仓库scriptgit remote add origin <git@git.com>
添加多个仓库scriptgit remote add <仓库名称> <git@git.com>
# 例子
git remote add newRepository https://github.com/xxx/xxx
# 查询
git remote -v
# newRepository https://github.com/xxx/newRepository.git (fetch)
# newRepository https://github.com/xxx/newRepository.git (push)
# origin http://github.com/xxx/xxx (fetch)
# origin http://github.com/xxx/xxx (push)
# push
git push -u newRepository master
git ssh key 设置，多邮箱配置
单邮箱的小伙伴可能没这样的烦恼，但是邮箱多的又需要使用 ssh 的连接就需要此教程啦。
先最基本的配置 ssh 吧ssh-keygen -t rsa -C "你的邮箱” -f ~/.ssh/id_rsa
一直按确定将会在 ~/.ssh，你设置的路径里找到对应公钥私钥
多邮箱配置scriptssh-keygen -t rsa -C "你的另一个邮箱” -f ~/.ssh/id_rsa
生成之后在当前文件夹创建 config 文件 无后缀。
scripttouch config
config 文件
script# gitee.com
Host gitee.com
Port 22
HostName gitee.com
PreferredAuthentications publickey
IdentityFile /Users/a666/.ssh/id_rsa_jyk
User jyk
参数解析script
# 配置文件参数
# Host : Host可以看作是一个你要识别的模式，对识别的模式，进行配置对应的的主机名和ssh文件（可以直接填写ip地址）
# HostName ...
es2020 实用的几个新方法
最近 JavaScript 从 es6 就提高了更新频率，2019还没有结束 2020的规范就已经开始出草案了😵。话不多说
可选链运算符 ??场景：访问嵌套对象时如果当前为 undefined 或者为 null这时再做其他操作将会报错，可选链运算符可完美解决。const obj = {
a: 1,
b: ''
}
console.log(obj.a); // 1
console.log(obj.a.b); // undefined
console.log(obj.a.b.c); // Uncaught TypeError: Cannot read property 'c' of undefined
console.log(obj.a.b?.c);
// 使用可选链运算符 ?. 来访问嵌套对象，如果碰到的是 undefined 或 null 属性，只会返回 undefined
console.log(obj.b?.substring); // ƒ substring() { [native code] }
使用可选链运算符 ?. ...
分享一个破防盗链方法，亲测。。。（Referrer-Policy）
废话少说，来这的有几个不是因为盗图不显示再去搜索di，盗图一时爽 一直盗图一直爽。🤣
言归正传！盗图可耻，请尊重版权！👀
代码在此<meta name="referrer" content="never">
好吧是个标签👅，亲测掘金是可以被盗的，详情可以看此文章 点我点我。
注意 注意 注意此标签建议不要全局使用，因为它修改了你的所有链接的 Referrer Policy 都指 no-referrer了，这样后端判断以为是浏览器直接打开资源就放行了，但是如果你的网站使用了 ga或者其他需要根据这个判断的链接人家就无法追踪你了，可以使用 iframe包裹一层，用一个单独的html加载统计代码。
下面列出 Referrer Policy 的几个参数Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origi ...
js-面试-并发，记录下并发，并行，串行
区分 并发 并行 串行之前很容易搞混 并发和并行，所以记录一哈
并发
两个或多个事件在同一时间，间隔发生。
并行
两个或多个事件在同一时间执行
或者并发是同一实体上的多个事件而并行是不同实体上的多个事件。
来看一个并发的面试题
看前试试水
const urls = Array.from({ length: 10 }).map((v, i) => i);
const sleep = url => new Promise(resolve => setTimeout(resolve, Math.random() * 3000 + 1000))
const sendRequest = (urls, limit, callback) => {
const copyUrls = urls.slice(0)
let index = 0;
const requestUrl = () => {
index += 1;
consol ...
parabola-js demo page
.wrap {
overflow: hidden;
}
.box-1 {
position: relative;
width: 70%;
height: 400px;
margin: 100px auto;
border: 1px solid;
}
.r-item {
position: absolute;
top: 20%;
right: 0;
width: 50px;
height: 50px;
background-color: #00c4b6;
}
.r-target {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: #8e908c;
visibility: hidden;
}
抛物线测试
...
css svg loading demo
本篇将记录一些 loading demo。
通过svg属性stroke-dashoffset 偏移和svg的差速旋转实现 loading
了解 stroke-dashoffsethttps://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/stroke-dashoffset
loading-1效果
.svg-loading-wrap {
margin: 10px auto 10px 10px;
}
.svg-loading-wrap .item .load {
width: 75px;
animation: loading 3s linear infinite;
}
.svg-loading-wrap .item .load #loading-inner {
stroke-dashoffset: 0;
stroke-dasharray: 300;
stroke-width: 10;
stroke-miterlimit: 10;
stroke-linecap: round;
animati ...
css-svg实现小于12号字体
效果
.s12-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.s12-d {
width: max-content;
margin: 20px auto;
}
千山鸟飞绝 - from hill to hill no bird in flight
千山鸟飞绝 - from hill to hill no bird in flight
const svg = document.getElementById('size-svg');
const sText = document.getElementById('size-text');
const inp = document.getElementById('s12-inp');
let size = 12;
const fontsizeHeightMap = {
1: 1.2 ...
css-手风琴动效
.sfq-wrap {
width: 100%;
min-width: 400px;
margin: 100px auto;
}
.sfq-wrap ul,
.sfq-wrap li {
padding: 0;
margin: 0;
list-style: none;
}
.sfq-wrap .list {
display: flex;
overflow: hidden;
justify-content: flex-start;
align-items: flex-start;
}
.sfq-wrap .list > li {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 10px;
height: 500px;
width: 600px;
transition: width 0.5s;
font-size: 18px;
font-weight: bold;
colo ...
最新文章
