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('input ...
一个 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)# pushgit 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.comHost gitee.comPort 22HostName gitee.comPreferredAuthentications publickeyIdentityFile /Users/a666/.ssh/id_rsa_jykUser jyk
参数解析script# 配置文件参数# Host : Host可以看作是一个你要识别的模式,对识别的模式,进行配置对应的的主机名和ssh文件(可以直接填写ip地址)# HostName ...
es2020 实用的几个新方法
最近 JavaScript 从 es6 就提高了更新频率,2019还没有结束 2020的规范就已经开始出草案了😵。话不多说
可选链运算符 ??场景:访问嵌套对象时如果当前为 undefined 或者为 null这时再做其他操作将会报错,可选链运算符可完美解决。const obj = { a: 1, b: ''}console.log(obj.a); // 1console.log(obj.a.b); // undefinedconsole.log(obj.a.b.c); // Uncaught TypeError: Cannot read property 'c' of undefinedconsole.log(obj.a.b?.c);// 使用可选链运算符 ?. 来访问嵌套对象,如果碰到的是 undefined 或 null 属性,只会返回 undefinedconsole.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-referrerReferrer-Policy: no-referrer-when-downgradeReferrer-Policy: originReferrer-Policy: origin-when-cross-originReferrer ...
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 ...