【碎片笔记】2022年8月
滚动条不占位 overlay属性
1
2
3html {
overflow-y: overlay;
}- overflow的值为
overlay，它的行为与auto相同的，但是在溢出时出现滚动条的展示方式有区分，overlay是覆在……上面，它是不占位的； - 注意：在Chrome浏览器中受支持；
- 若设置后在火狐浏览器中滚动条不生效，再写一个
overflow: auto;，火狐浏览器中无法像谷歌浏览器里那样overflow-y: overlay；
- overflow的值为
如何在CSS中将颜色定义为变量？
1
2
3
4
5
6
7:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}也可以在JavaScript /客户端操作CSS变量
1
document.body.style.setProperty('--main-color',"#6c0")
CSS3选择器
属性:root、:not、:empty、:target、first-child、last-child、:nth-child(n)、:nth-last-child(n)、:first-of-type、:nth-of-type(n)、:last-of-type、:nth-last-of-type(n)、:only-child、:only-of-type、:enabled、:disabled、:checked、::selection、:read-only、:read-write、::before和::afterJS 获取当前页面 URL
1
window.location.href
-
- 使用UglifyJS压缩JS代码
- 在webpack里压缩JS代码
工具UglifyJS的基本使用
- npm官方文档
- UglifyJS3中文文档(压缩解析js文件)
- uglifyjs压缩混淆js代码
1
2
3
4// 全局安装
npm install uglify-js -g
// 压缩文件
uglifyjs test.js -o test.min.js -m-o：–output 指定输出文件，默认情况下为命令行-m：–mangle 改变变量名称（压缩后成a,b,c,d,e,f之类的变量，默认情况不改变变量名称）-c：–compress 让uglifyjs进行代码压缩的参数。可以在-c后边添加一些具体的参数来控制压缩的特性
让html页面不缓存js的实现方法之：加随机数
1
2
3
4<!-- 每次页面引用的文件名都会变 -->
<script>
document.write("<script type='text/javascript' src='./BFUI-dev.js?random=" + Math.random() + "'><\/script>");
</script>让html页面不缓存js的实现方法之：设置no-cache
1
2
3
4<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">Unicode强制反转代码
1
<span id="h-name">‮军雷</span>
CSS文字渐变
1
2
3
4
5
6
7
8
9
10.p{
position: absolute;
opacity: 0;
margin: 0;
transform: translate(-50%);
background: #ffa54d;
background: linear-gradient(90deg,#ffa54d,#f07bc5 50%,#43aeff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}-
- 这两个框架都支持使用 JavaScript 编写前端。
- 它们都使用虚拟 DOM。
- React.js 有 Redux，Vue.js 有 Vuex，Vue.js 应用程序的状态管理模式 + 库，使用方式与 Redux 相同。
- 从搜索引擎优化应用的角度来看，React 拥有 Next.js，而 Vue 拥有 Nuxt.js
- 两个框架都使用组件结构
每次推送代码到Gitee的时候都让输入账号密码，但是明明绑定了ssh密钥，如何解决？
- 打开项目根目录，找到
.git文件夹中的config，用记事本打开 - 修改url的地址，从
https://gitee.com/用户名/仓库名.git修改成git@gitee.com:用户名/仓库名.git的样式。例如：1
2
3[remote "origin"]
url = git@gitee.com:Barry-Flynn/vue_shop.git
fetch = +refs/heads/*:refs/remotes/origin/* - 【原因剖析】：这是因为当初设置远程仓库时采用的HTTP连接方式（
git remote add origin https://gitee.com/码云用户名/仓库名.git），而不是git@git (ssh)的形式，所以即便本地生成了SSH密钥但没有使用到。 - 【其他方法】：还有一种方法是“凭证存储”，在项目目录中执行
git config --global credential.helper store生成一个文本用来记录你的账号密码，输入一次之后就不用再输了（方法来自CSDN博文，我未证实）。显然，这种方法是不安全的，所以更建议采用SSH密钥连接远程仓库。关于凭证存储更多了解可以看一下这篇博文
- 打开项目根目录，找到
js中如何引入css
1
document.write('<link rel="stylesheet" href="main.css">');
CSS上浮出现动画，使用JS添加
1
2opacity: 1;
animation: 1000ms linear 0s 1 normal both running bottom-up-spring;-
- 打开控制台直接跳转页面
1
2
3
4//debug调试时跳转页面
var element = new Image();
Object.defineProperty(element,'id',{get:function(){window.location.href="https://www.baidu.com"}});
console.log(element); - 打开控制台,页面内容显示”检测到非法调试,请关闭后刷新重试!”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62// 反调试函数,参数：开关，执行代码
function endebug(off, code) {
if (!off) {
! function (e) {
function n(e) {
function n() {
return u;
}
function o() {
window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized ? t("on") : (a = "off", console.log(d), console.clear(), t(a));
}
function t(e) {
u !== e && (u = e, "function" == typeof c.onchange && c.onchange(e));
}
function r() {
l || (l = !0, window.removeEventListener("resize", o), clearInterval(f));
}
"function" == typeof e && (e = {
onchange: e
});
var i = (e = e || {}).delay || 500,
c = {};
c.onchange = e.onchange;
var a, d = new Image;
d.__defineGetter__("id", function () {
a = "on"
});
var u = "unknown";
c.getStatus = n;
var f = setInterval(o, i);
window.addEventListener("resize", o);
var l;
return c.free = r, c;
}
var o = o || {};
o.create = n, "function" == typeof define ? (define.amd || define.cmd) && define(function () {
return o
}) : "undefined" != typeof module && module.exports ? module.exports = o : window.jdetects = o
}(), jdetects.create(function (e) {
var a = 0;
var n = setInterval(function () {
if ("on" == e) {
setTimeout(function () {
if (a == 0) {
a = 1;
setTimeout(code);
}
}, 200);
}
}, 100);
})
}
}
endebug(false, function () {
// 非法调试执行的代码(不要使用控制台输出的提醒)
// document.write("检测到非法调试,请关闭后刷新重试!");
document.write('<h1 style="font-size:36px;color:red;text-align:center;margin-top:30vh;">检测到非法调试，请关闭调试后刷新页面进行阅读!</h1>');
});
- 打开控制台直接跳转页面
文本段落的第一行缩进
text-indent:2em;响应容器大小的变化
window.onresize与window.addEventListener('resize',...)1
2
3
4
5
6
7// 如果失效
window.onresize = function() {
myChart.resize();
};
// 可以写成这样
window.addEventListener('resize',() => myChart.resize(), false);CSS文字流光特效
1
2
3
4
5
6
7
8
9
10
11#xf-copy {
font-weight: 600;
font-size: 13px;
color: #8c888b;
background: -webkit-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);
-moz-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5): ;
ms-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5): ;
color: transparent;
-webkit-background-clip: text;
animation: ran 20s linear infinite;
}禁用控制台，来源https://tzy1997.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53<script>
((function() {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function(fn) {
callbacks.push(fn);
},
cancleListenr: function(fn) {
callbacks = callbacks.filter(function(v) {
return v !== fn;
});
}
};
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function(fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('你真坏，请关闭控制台！');
document.body.innerHTML = "";
} else {
open = false;
}
}
})()).addListener(function() {
window.location.reload();
});
</script>
<script>
function toDevtools() {
let num = 0;
let devtools = new Date();
devtools.toString = function() {
num++;
if (num > 1) {
alert('你真坏，请关闭控制台！');
window.location.href = "about:blank";
blast();
}
};
console.log('', devtools);
}
toDevtools();
</script>压缩版：
1
<script>((function() {var callbacks = [],timeLimit = 50,open = false;setInterval(loop, 1);return {addListener: function(fn) {callbacks.push(fn);},cancleListenr: function(fn) {callbacks = callbacks.filter(function(v) {return v !== fn;});}};function loop() {var startTime = new Date();debugger;if (new Date() - startTime > timeLimit) {if (!open) {callbacks.forEach(function(fn) {fn.call(null);});}open = true;window.stop();alert('你真坏，请关闭控制台！');document.body.innerHTML = "";} else {open = false;}}})()).addListener(function() {window.location.reload();});</script><script>function toDevtools(){let num = 0;let devtools = new Date();devtools.toString = function() {num++;if (num > 1) {alert('你真坏，请关闭控制台！');window.location.href = "about:blank";blast();}};console.log('', devtools);}toDevtools();</script>
禁用控制台(需要引入jQuery)，来源https://tzy1997.com/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106<script>
/*
* @Descripttion: ethan.js
* @version: 1.0.0
* @Author: tzy1997
* @Date: 2020-12-14 21:26:14
* @LastEditors: tzy1997
* @LastEditTime: 2022-08-11 23:16:27
*/
/* 禁止打開控制臺 查看源码等等 */
function forbidden_control() {
$.extend({
message: function (a) {
var b = {
title: "",
message: "操作成功",
time: "3000",
type: "success",
showClose: !0,
autoClose: !0,
onClose: function () { }
};
"string" == typeof a && (b.message = a), "object" == typeof a && (b = $.extend({}, b, a));
var c, d, e, f = b.showClose ? '<div class="c-message--close">×</div>' : "",
g = "" !== b.title ? '<h2 class="c-message__title">' + b.title + "</h2>" : "",
h = '<div class="c-message animated animated-lento slideInRight"><i class=" c-message--icon c-message--' + b.type + '"></i><div class="el-notification__group">' + g + '<div class="el-notification__content">' + b.message + "</div>" + f + "</div></div>",
i = $("body"),
j = $(h);
d = function () {
j.addClass("slideOutRight"), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
e()
})
}, e = function () {
j.remove(), b.onClose(b), clearTimeout(c)
}, $(".c-message").remove(), i.append(j), j.one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function () {
j.removeClass("messageFadeInDown")
}), i.on("click", ".c-message--close", function (a) {
d()
}), b.autoClose && (c = setTimeout(function () {
d()
}, b.time))
}
}),
document.onkeydown = function (e) {
if (123 == e.keyCode || (e.ctrlKey && e.shiftKey && (74 === e.keyCode || 73 === e.keyCode || 67 === e.keyCode)) || (e.ctrlKey && 85 === e.keyCode)) return $.message({
message: "采用本站js及css请注明来源，禁止商业使用！",
title: "你真坏，不能打开控制台喔!",
type: "error",
autoHide: !1,
time: "3000"
}), event.keyCode = 0, event.returnValue = !1, !1
}, document.oncontextmenu = function () {
return $.message({
message: "采用本站js及css请注明来源，禁止商业使用！",
title: "不能右键/长按喔！",
type: "error",
autoHide: !1,
time: "3000"
}), !1
},
function () {
function e() {
var e = new Date;
if (new Date - e > 0) {
try {
document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
} catch (e) { }
return document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>', !0
}
return !1
}
function t() {
for (; e();) e()
}
e() ? t() : window.onblur = function () {
setTimeout(function () {
t()
}, 500)
}
}(),
function () {
var e = /x/;
e.toString = function () {
try {
document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
} catch (e) { }
return document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>', "禁止打开控制台！"
}
}(),
function () {
var e = document.createElement("div");
Object.defineProperty(e, "id", {
get: function () {
try {
document.getElementsByTagName("html")[0].innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
} catch (e) { }
document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
}
}), console.log(e)
document.body.innerHTML = '<div style="width: 100%;height: 50px;font-size: 30px;text-align: center;font-weight: bold;">啊这个网站炸了，<a href="/" style="color:#4285f4;">点击返回</a>试试吧~</div>'
}()
}
forbidden_control();
</script>
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 百里飞洋！
若存在错误或不当之处，还望兄台不吝赐教，期待与您交流！
WeChat微信打赏- AliPay支付宝打赏
评论
