文章目录
剪映专业版剪辑视频
左击选中分割区域,右击选择常用剪辑操作。
选中分割点之间的区域可以进行区域(删除,字幕,音效等等)操作
最后右上角导出剪辑好的视频。
网络资源,信息搜索技巧
前端原理实战
网页请求:静态资源(图片,ccs,js,html等)+(后端)网络url数据请求
F12后台
网络------>全部/所有:(前端服务器)静态资源获取html,jpg,css,js等+(后端服务器)网络url数据请求 。
网络------>Fetch/XHR------>(后端)网络url数据请求。
网页前端内容都是从数据包的response的body和源码资源中提取的。
网页的全部信息以及资源都是基于数据包。
数据包中资源如图所示
选中后右键检查元素,直接定位对应源代码。
查看网页隐藏信息
Fetch和XHR都是在浏览器中用于发起HTTP请求的API,用于向服务器请求数据或向服务器发送数据(仅限于数据的请求和响应)。
Fetch是ES6引入的一种新的API,用于代替旧的XHR API。Fetch使用Promise对象实现,提供了更简洁的API,使用起来更加灵活。Fetch API包括两个方法:fetch()和Headers()。fetch()方法用于发起HTTP请求,并返回一个Promise对象,通过该对象可以获取响应结果,Headers()方法则用于构造HTTP请求头。
XHR(XMLHttpRequest)是早期的浏览器提供的API,用于在不刷新页面的情况下向服务器发起HTTP请求,并通过回调函数处理服务器响应。XHR API是以异步的方式工作,即通过回调函数获取响应结果。XHR API可以设置请求头、请求方法、请求体、响应数据类型等。总体而言,Fetch API与XHR API都可以用于向服务器发起HTTP请求,Fetch API更加简洁、灵活,而XHR
API则更加成熟、稳定,两者可以根据具体的需求进行选择。
包括数据包和网站响应时间等等
注意:若无数据包则刷新一下
网页上扒图片
F12后台
网络------>全部:静态资源获取+网络url数据请求 。
网络------>Fetch/XHR------>网络url数据请求。
网络-》图像
鼠标滑到文件列,查看预览,双击想要的图片文件,打开图片,右键另存为
网站输入密码框可视化
选中后右键检查元素,直接定位对应源代码。
- 右键->检查元素
- 网页后台左上角箭头定位待操作数据的elements标签值处
- 根据网页后台定位的标签进行修改
- 最后鼠标焦点回到网页前台,更新成功
网站数字值/图标随便改
- 网站展示运行的都是基于已经打包编译好的原生(html,css,js)代码。
- 可以通过修改原生代码来改变网页显示内容;(但是一刷新就打回原形了)
网站页面标签改动
修改标签的大动作
本地查询域名对应IP
CMD看域名的办法:ping 域名
监控鼠标移动/切屏等操作
把监视器里面带window字样的监视器全删掉就好了。
页面程序->window->浏览器页面实现监控功能。
在Web开发中,window
对象是浏览器窗口的顶层对象,它代表浏览器窗口本身。window
对象是一个全局对象,所有的JavaScript代码都可以通过window
对象来访问浏览器窗口的属性和方法。
先创建window对象再加载创建DOM树
window
对象的创建过程:
- 浏览器启动:当浏览器启动并加载一个网页时,它会创建一个
window
对象,一个页面一个window对象。 - 网页加载:
- 当网页的HTML被加载时,浏览器会解析HTML文档,并找到包含JavaScript代码的部分。
- JavaScript引擎(如Chrome的V8引擎)将会执行这些JavaScript代码。
- DOM树构建:
- 同时,浏览器正在构建DOM(Document Object Model)树,这是网页内容的逻辑结构。
- JavaScript执行:
- 如果在JavaScript代码中直接或间接地引用了
window
对象(例如通过全局变量或者函数参数),那么这个引用将自动指向当前正在加载的网页的window
对象。 - 如果在JavaScript中显式地创建一个新的
window
对象,那么这个新对象将与当前的window
对象是同一个实例。
- 如果在JavaScript代码中直接或间接地引用了
window
对象的作用:
- 全局访问:
window
对象是全局作用域的根,这意味着任何在全局作用域中声明的变量和函数都会成为window
对象的属性。 - 浏览器窗口控制:
window
对象提供了许多方法来控制浏览器窗口,如resizeTo()
、moveTo()
、open()
、close()
等。 - 导航和历史管理:
window
对象还提供了history
属性,它允许开发者访问浏览器的历史记录,使用history.back()
和history.forward()
等方法来后退或前进。 - 弹窗和对话框:
window
对象可以用来创建新的弹窗(window.open()
)或者警告框(alert()
)、确认框(confirm()
)和提示框(prompt()
)。 - 定时器和事件处理:
window
对象还提供了setTimeout()
和setInterval()
方法来执行定时任务,以及onload
和onunload
事件来处理页面加载和卸载时的行为。 - 地理位置和屏幕信息:
window
对象提供了navigator
对象,它包含了关于浏览器的信息,如navigator.geolocation
可以用来访问地理位置信息,以及window.screen
提供了屏幕的尺寸和其他信息。 - 剪贴板访问:
window
对象还提供了clipboardData
属性,它可以用来读取和写入系统剪贴板的内容。 - 跨文档通信:通过
window
对象的postMessage()
方法,可以实现跨文档之间的通信。
总之,window
对象是浏览器中的一个中心化的接口,它允许JavaScript与浏览器窗口进行交互,控制浏览器行为,以及处理用户操作。
拓展-如何实现页面监控切屏-基于Window对象
实现“切屏”监控的功能,通常指的是跟踪用户在多个浏览器标签页、窗口、或其他应用程序之间切换的行为。这个功能在一些 Web 应用中很常见,比如游戏、视频播放、在线学习平台等,目的是为了在用户离开页面或切换标签时暂停某些操作,或者在用户重新回到页面时恢复操作。
监控用户切屏(切换标签页或切换窗口)的常见方法
我们可以通过浏览器的 Visibility API 和 Focus/Blur 事件 来监控用户的切屏行为。
- 使用
Page Visibility API
Page Visibility API
是一个用于检测网页是否处于当前活动标签页或窗口中的 API。当用户切换标签页或窗口时,页面的可见性会发生变化,可以通过监听该变化来监控切屏行为。
主要属性和事件:
document.hidden
:指示当前文档是否不可见(true
为不可见,false
为可见)。document.visibilityState
:表示文档的可见性状态。值可以是:visible
:文档处于当前标签页或窗口的前景。hidden
:文档处于背景标签页或窗口,或者浏览器最小化或被切换。
- 事件:
visibilitychange
,当页面的可见性状态发生变化时会触发。
示例代码:
// 检测页面是否可见
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
// 页面被隐藏(用户切换到其他标签页或窗口)
console.log("Page is hidden");
} else {
// 页面变为可见(用户返回到该标签页)
console.log("Page is visible");
}
});
使用 document.visibilityState
:
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
console.log("Page has been hidden");
// 暂停视频或游戏,或执行其他操作
} else {
console.log("Page is now visible");
// 恢复视频或游戏,或执行其他操作
}
});
- 使用
focus
和blur
事件
focus
和blur
事件可以用来监控用户是否切换到当前窗口或标签页。当浏览器窗口或标签页获得或失去焦点时,会触发这些事件。
示例代码:
// 监听窗口或标签页的焦点
window.addEventListener('focus', function() {
console.log("Window is focused");
// 恢复操作
});
// 监听窗口或标签页的失去焦点
window.addEventListener('blur', function() {
console.log("Window is blurred");
// 暂停操作
});
focus
事件:当浏览器窗口或标签页获得焦点时触发(通常是用户返回到该标签页)。blur
事件:当浏览器窗口或标签页失去焦点时触发(通常是用户切换到其他标签页或最小化窗口)。
- 结合
setTimeout
或setInterval
进行周期性检查
你还可以使用setInterval
或setTimeout
进行定期检查,判断当前页面是否仍处于活动状态,或者根据document.hidden
状态进行进一步的操作。
示例代码:
// 每秒检查页面可见性状态
setInterval(function() {
if (document.hidden) {
console.log("Page is not visible");
// 执行暂停逻辑
} else {
console.log("Page is visible");
// 执行恢复逻辑
}
}, 1000);
- 使用
window.onfocus
和window.onblur
window.onfocus
和window.onblur
事件可以用来监听浏览器窗口或标签页的焦点切换,和focus
、blur
事件类似,但更侧重于全窗口层级的焦点变化。
示例代码:
// 当页面获得焦点时
window.onfocus = function() {
console.log("Window focused");
// 恢复页面功能,如恢复视频播放
};
// 当页面失去焦点时
window.onblur = function() {
console.log("Window blurred");
// 暂停页面功能,如暂停视频播放
};
- 结合以上方法进行切屏监控
通常情况下,你可以结合Page Visibility API
和focus
/blur
事件来实现更全面的切屏监控。例如,利用visibilitychange
事件来监测页面是否可见,而focus
和blur
事件来监测窗口的焦点变化。这样可以确保在任何情况下都能准确地检测到用户的切屏行为。
综合示例代码:
// 检测页面的可见性
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
console.log("Page is hidden");
// 暂停操作
} else {
console.log("Page is visible");
// 恢复操作
}
});
// 监听窗口是否获得或失去焦点
window.addEventListener('focus', function() {
console.log("Window is focused");
// 恢复操作
});
window.addEventListener('blur', function() {
console.log("Window is blurred");
// 暂停操作
});
注意事项:
- 兼容性:
visibilitychange
和document.hidden
在现代浏览器中都得到广泛支持,但在较老的浏览器中可能不完全支持。你可以通过检测浏览器特性来实现兼容性处理。 - 性能影响:定期使用
setInterval
或setTimeout
进行检查可能会对性能造成影响,尤其是在频繁检查时。使用visibilitychange
或focus/blur
事件通常比定期轮询更高效。 - 用户体验:在实现切屏监控时,务必注意用户体验。例如,自动暂停视频或游戏时,要确保用户有清晰的提示,并且能够轻松恢复。
总结:
实现前端页面监控切屏的功能,主要通过 Page Visibility API
(监听页面的可见性)和 focus
/blur
事件(监听窗口焦点的变化)来实现。通过这些方法,你可以轻松检测用户是否切换了标签页或窗口,并做出相应的暂停、恢复等操作。
插件(附加功能)
插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下(可能同时支持多个平台),而不能脱离指定的平台单独运行。
因为插件需要调用原纯净系统提供的函数库或者数据。
并且插件的运行也需要对应平台的解析和运行
很多软件都有插件,插件有无数种。例如在IE中,安装相关的插件后,WEB浏览器能够直接调用插件程序,用于处理特定类型的文件。
实际上浏览器插件等等插件就是基于对应平台的功能包,只要下载安装上插件,平台就添加了新功能,用户也可以在对应平台上使用新功能。
例如:鼠标划过特效就可以通过插件添加到浏览器然后当鼠标在浏览器操作时就可以体验到特效了。
当然是否能安装插件还得看平台的开放程度,Google就是一款开放程度很高的浏览器。
如果安装了插件就能体验到很多方便炫酷的骚操作了
插件的功能多样性基于你的想象力,要多方便有多方便。
QQ自带截图的妙用
生产力的高低取决于生产工具的好坏。
若是利用不好生产工具,拿着电脑砸钉子,那生产工具再好也得不到高生产力。
利用好工具,而不是取代工具,做低效努力
手动设置软件开机自启
%USERPROFILE%\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup
路径下添加对应软件快捷方式
windows10添加开机自启动项在哪设置?电脑开机自启动怎么设置
将优快云博客/网页内容另存为PDF
- 开启脚本,去除广告(可省略)
若是出现导出pdf有广告遮挡再处理。
或者:源码中删除对应无用element
因为是从网页源码中提取的文本内容,所以修改网页源码后对应提取的文本内容也会变化。
网页前端内容是从response的body中提取的,若是修改body中的源码自然文本提取的内容也会改变。
修改源码前
修改源码后
- 右键,选择打印
- 目标打印机中可以选择另存为pdf(配置好对应预览参数)
火狐下载优快云:ctr+p,选择简化版本
哔哩哔哩视频音效设置(点击右键->选择视频音效)
灵活使用右键,遇见不爽先点右键查看有无解决办法。
文本场景操作
双击选中对应词语/数字(逻辑连贯的词语或数字),三击选中语句整行,然后进行操作。
本地电脑
强制关闭卡屏软件
组合键ctrl+alt+del,任务管理器
OFFICE操作
world
- word中文字间距位置错误,点击段落设置查看具体缩进和间距
- 恢复未保存文档
- 选项-信息-文档管理-恢复未保存文档
excel
数据
Excel快捷键大全:Ctrl+26个字母的快捷键,收藏备用吧
- excel新增相同内容sheet,选中sheet右键创建副本
- excel批量操作,选中待操作单元格,右下角实心加号,下拉,末尾右下角产生下拉选项
- 合并表格,多个sheet
- - 若是excel数字不能求和则查看数字单元格左上角是否有绿色标记,若有则为字符类型所以不能求和需要改为数字类型
文本数据以逗号,空格等为分隔符分列