【碎片笔记】2022年7月
color-scheme
:CSS 属性,允许元素指示它可以轻松呈现的配色方案。-
- npx是一个工具,npm v5.2.0引入的一条命令(npx),一个npm包执行器,旨在提高从npm注册表使用软件包的体验 ,npm使得它非常容易地安装和管理托管在注册表上的依赖项,npx使得使用CLI工具和其他托管在注册表。它大大简化了一些事情。
-
npm
侧重于安装或者卸载某个模块的。重在安装,并不具备执行某个模块的功能。npx
侧重于执行命令的,执行某个模块命令。虽然会自动安装模块,但是重在执行某个命令。
-
defer
:指外部js文件和当前html页面同时加载(异步加载),但只在当前页面解析完成之后,执行js代码async
:指外部js文件和当前html页面同时加载(异步加载),在当前js文件加载完成后,执行js代码
页面黑色纤细滚动条
如果去掉body
,将作用于页面上出现的所有滚动条1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
body::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
background: #535353;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
border-radius: 10px;
background: #ededed;
}-
Stylus
是一个 基于Node.js
的CSS的预处理框架 。可以说是一种新型语言,其本质上做的事情与sass/less
等类似。Stylus
比less
更强大,而且基于nodejs
;比sass
更符合我们的思路。
crossorigin=”anonymous”导致的跨域问题
- 跨源相关机制综述(三):crossorigin属性
1
<link rel="stylesheet" href="http://XXXX.com/bootstrap.min.css" crossorigin="anonymous">
- 跨源相关机制综述(三):crossorigin属性
CSS毛玻璃效果(磨砂、模糊、半透明):
1
2
3
4
5
6
7
8
9
10
11.topsearch {
position: relative;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg,rgba(20,20,20,.7),rgba(20,20,20,.4));
backdrop-filter: blur(5px); /* 此行代码 */
background-position: center;
background-size: cover;
color: #fff;
}页面深蓝滚动条
1
2
3
4
5
6
7
8
9
10
11
12::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #324759;
border-radius: 6px;
}
::-webkit-scrollbar-track {
background: #161f27;
border-radius: 6px;
}Chrome浏览器的安装包
ChromeSetup.exe
怎么这么小?- 答:你下载的是
在线安装包
,不是离线安装包
- 在线安装:不存在安装包,一边下载一边安装。要先下载到临时文件夹里的,不过当你安装完以后,下载下来的安装程序会自动删掉,不会留你的电脑上面。在不太好的网络状况下容易出现长时间等待或安装失败的情况。
- 离线安装:也叫做完整安装包,安装包本身包含所有的安装文件。安装包下载全部完成后才会开始安装。不会存在长时间等待的情况。
- Firefox 作为开源软件,Chrome 作为重度依赖开源项目的闭源软件,迭代都很迅速,使用在线包可以确保始终下载到最新的版本。
- 答:你下载的是
CSS文字疯狂抖动
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.shaky {
display: inline-block;
padding: 1px;
font-size: 15px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-animation-name: shaky-slow;
-ms-animation-name: shaky-slow;
animation-name: shaky-slow;
-webkit-animation-duration: 4s;
-ms-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}-
- 软件版本号规范与命名原则
- 软件版本号-百度百科
1
2
3
4主版本号 Major_Version_Number
子版本号 Minor_Version_Number
修正版本号 Revision_Numbe
编译版本号 Build_Number
- 项目初版时,版本号为 1.0 或 1.00;
- 当项目在进行了局部修改或 bug 修正时,主版本号和子版本号都不变,修正版本号加 1;
- 当项目在原有的基础上增加了部分功能时,主版本号不变,子版本号加 1,修正版本号复位为 0,因而可以被忽略掉;
- 当项目在进行了重大修改或局部修正累积较多,而导致项目整体发生全局变化时,主版本号加 1;
- 编译版本号一般是编译器在编译过程中自动生成的,我们只定义其格式,并不进行人为控制。
CSS新用户教程遮罩
1
2
3
4
5
6
7
8
9
10z-index: 100;
position: absolute;
left: 39px;
top: 873.156px;
width: 84px;
height: 43px;
box-shadow: rgb(33 33 33 / 50%) 0px 0px 0px 5000px;
transition: all 0.3s ease-out 0s;
border-radius: 4px;
opacity: 1;var 是声明变量的一个关键字.
var num = 2
此时就已经声明了一个值为2的num变量 但是为什么现在基本不用var而是let 和 const 声明变量呢? 因为var有缺点- 变量提升 var 声明的变量会在作用域顶层进行声明 (因此你在声明变量前console该变量输出undefined 而不是该变量没有定义)
- for 循环使用 var定义初始变量 会造成变量溢出 (明明我只在for 循环之内初始化了迭代变量, 为什么会在for循环之外可以console到)
关于元素隐藏
visibility:hidden
表示所占据的空间位置仍然存在,仅为视觉上的完全透明display:none
不为被隐藏的对象保留其物理空间opacity: 0;
表示所占据的空间位置仍然存在,仅为视觉上的完全透明
下面的JS输出是?为什么?
开始执行,结束了,timeout11
2
3
4
5
6
7
8
9console.log('开始执行');
setTimeout(() => {
console.log('timeout1')
},0);
console.log("结束了")对于任意一棵高度为5且有10个节点的二叉树,若采用顺序存储结构保存,每个结点占1个存储单元(仅存放结点的数据信息),则存放该二叉树需要的存储单元数量至少是( )
- 【解析】:本二叉树使用顺序存储结构时,为了保证任意性,其1-5层的所有结点(包括空结点)全部都要被存储起来。即考虑成一棵5层的满二叉树,存储单元大小为:1+2+4+8+16=31
请阐述react和vue的区别及各自优缺点
- react和vue的区别:vue是双向绑定的,采用template;react是单向的,采用jsx。
- Vue的优缺点:简单、快速、强大、对模块友好,但不支持IE8以下。因为是单页面应用,不利于seo优化。
- React的优缺点:速度快、跨浏览器兼容、模块化;但学习曲线陡峭,需要深入的知识来构建应用程序。
Android中常用的五种布局有:
FragmeLayout
框架布局,LinearLayout
线性布局,AbsoluteLayout
绝对布局,RelativeLayout
相对布局,TableLayout
表格布局。不同操作系统上直接运行的文件扩展名:
exe
:为Windows操作系统的可执行文件;rpm
:为Linux操作系统的安装文件;ipa
:是iPhone OS中的可执行文件扩展名;apk
:是Android系统中的可执行文件扩展名;
Android的4种文件类型Java,class,dex,apk
Java
文件(应用程序源文件):android本身相当一部分都是用java编写而成(基本上架构图里头蓝色的部份都是用Java开发的),android的应用必须使用java来开发。Class
文件(Java编译后的目标文件):Android虚拟机Dalvik支持的字节码文件格式Google在新发布的Android平台上使用了自己的Dalvik虚拟机来定义, 这种虚拟机执行的并非Java字节码, 而是另一种字节码: dex格式的字节码。在编译Java代码之后,通过Android平台上的工具可以将Java字节码转换成Dex字节码。虽然Google称Dalvik是为了移动设备定做的,但是业界很多人认为这是为了规避向sun申请Javalicense。这个DalvikVM针对手机程式/CPU做过最佳化,可以同时执行许多VM而不会占用太多Resource。Dex
文件(Android平台上的可执行文件):Android虚拟机Dalvik支持的字节码文件格式Google在新发布的Android平台上使用了自己的Dalvik虚拟机来定义, 这种虚拟机执行的并非Java字节码, 而是另一种字节码: dex格式的字节码。在编译Java代码之后,通过Android平台上的工具可以将Java字节码转换成Dex字节码。虽然Google称Dalvik是为了移动设备定做的,但是业界很多人认为这是为了规避向sun申请Javalicense。这个DalvikVM针对手机程式/CPU做过最佳化,可以同时执行许多VM而不会占用太多Resource。Apk
文件(Android上的安装文件):Apk是Android安装包的扩展名,一个Android安装包包含了与某个Android应用程序相关的所有文件。apk文件将AndroidManifest.xml文件、应用程序代码(.dex文件)、资源文件和其他文件打成一个压缩包。一个工程只能打进一个.apk文件。
哪些方法是Android自定义View需要复写(重写)的?
有三个构造方法(一个参数、两个参数、三个参数),其中两个参数的构造方法必须有。onDraw()
方法必须有,是用来绘制View图像的- 如果要改变View 的大小,需要重写
onMeasure()
方法。 - 如果要改变View在父控件中的位置,需要重写
onLayout()
方法
哪些技术可以实现Android的本地数据存储?
-
Frame Animation
(帧动画):通过顺序播放一系列图像从而产生动画效果,。图片过多时容易造成OOM(Out Of Memory内存用完)异常。Tween Animation
(补间动画,又叫view动画):是通过对场景里的对象不断做图像变换(透明度、缩放、平移、旋转)从而产生动画效果,是一种渐进式动画,并且View动画支持自定义。Accribute Animation
(属性动画):这也是在android3.0之后引进的动画,在手机的版本上是android4.0就可以使用这个动画,通过动态的改变对象的属性从而达到动画效果。
-
- 使用SharedPreferences存储数据
- 文件存储数据
- SQLite数据库存储数据
- 使用ContentProvider存储数据
- 网络存储数据
对于任何非空 HTML 文档,调用
document.documentElement
总是会返回一个<html>
元素,且它一定是该文档的根元素。借助这个只读属性,能方便地获取到任意文档的根元素。(来源于MDN文档)Document.exitFullscreen()
方法用于让当前文档退出全屏模式(原文表述不准确,详见备注)。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()
方法进入全屏模式之前的状态。(来源于MDN文档)备注: 如果一个元素 A 在请求进入全屏模式之前,已经存在其他元素处于全屏状态,当这个元素 A 退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。
HTML
<script>
标签的 defer 属性
如果已设置,它规定在页面完成解析时执行脚本,在页面加载之前不会运行脚本:1
<script src="demo_defer.js" defer></script>
自定义函数的使用,几种声明方式示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19function showNumber() {
// 第1种
}
function showNumber(number, string) {
// 第2种
}
var fn = function () {
// 第3种,fn是一个变量名,表示当前fn就是表示当前函数
}
const showNumber = (number) => {
// 第4种,是第二种和第三种的结合,并使用箭头函数的书写形式
}
var fnObj = new Function() {
// 第5种,使用new的方式不常用,凡是使用new的都是object
}给了body position:relative后 子元素的margin-top值会影响其他子元素的相对定位的位置是什么原理
-
1
document.getElementById("b1").style.width="300px";
JS中如何将yyyy-MM-dd HH:mm:ss格式的字符串转成Date类型
1
2
3var a = '2019-06-01 12:05:20';
var time = new Date(a.replace('-', '/'));
console.log(time)input datetime-local 时间控件精确到秒
1
2<!-- 只需要添加属性step="1",即可精确到秒 -->
<input type="datetime-local" step="1">-
1
2
3
4
5
6
7//时间戳=>时间
function getLocalTime(nS) {
var dat = newDate(parseInt(nS)*1000).toLocaleString().replace(/:d{1,2}$/, ' ');
var strs = dat.substr(0, 9);
return strs.split('/');
}
console.log(getLocalTime(1366666666))//返回的是数组["2013", "4", "23"]1
2
3
4
5//时间=>时间戳
function timetamp(y, m, d) {
return(new Date(y, m, d, ).getTime() / 1000);
}
console.log(timetamp(2017, 8, 8))//输出是10位数的值 15048000001
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//时间戳转换为时间格式 yyyy-MM-dd hh:mm
function getLocalTime(nS) {
var dat = new Date(parseInt(nS) * 1000).format("yyyy-MM-dd hh:mm");
return dat;
}
var time = getLocalTime(1500666666);
Date.prototype.format = function(format) {
var date = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S+": this.getMilliseconds()
};
if(/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
}
for(var k in date) {
if(new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
date[k] : ("00" + date[k]).substr(("" + date[k]).length));
}
}
return format;
} -
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//点击文本框复制其内容到剪贴板上方法
function copyToClipboard(str) {
var cinput = document.createElement('textarea'); // 动态创建textarea元素
cinput.value = str; // 把需要复制的内容赋值到textarea的vlaue上
cinput.setAttribute('readOnly', 'true');
//注意大小写,不写的话手机端会自动弹出输入框
document.body.appendChild(cinput); // 把创建的textarea元素添加进body元素内
cinput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
cinput.className = 'oInput';
cinput.style.display = 'none';
cinput.style.opacity = '0';
alert("复制成功");
}1
2
3
4
5
6
7
8
9
10
11// 复制的方法
function copyText(text, callback){ // text: 要复制的内容, callback: 回调
var tag = document.createElement('textarea');
tag.setAttribute('id', 'cp_hgz_input');
tag.value = text;
document.getElementsByTagName('body')[0].appendChild(tag);
document.getElementById('cp_hgz_input').select();
document.execCommand('copy');
document.getElementById('cp_hgz_input').remove();
if(callback) {callback(text)}
} 图片作为网站缩略图icon
1
<link rel="shortcut icon" type="image/x-icon" href="./logo.png" />