本文总结了一系列JavaScript中不常见的实用技巧，包括：使用contains方法判断元素包含关系，获取时间戳，CSS计算属性实现自适应布局，调整鼠标形状，处理Ajax请求中的FormData，监听浏览器缩放事件，事件传参，强制组件重新渲染，以及处理文字溢出，XSS、CSRF和HTTPS的安全问题等。这些技巧涵盖了前端开发中的多个方面，能帮助开发者提高效率和解决问题。
黑科技偏门实用的js方法总结
- 一、contains方法
- 二、获取时间戳
- 三、CSS计算属性
- 四、鼠标形状大全
- 五、Ajax请求发送的FormData是"[object object]"
- 六、浏览器的放大缩小事件
- 七、事件传参
- 八、强制重新渲染
- 九、文字溢出
- 十、event事件中，鼠标到屏幕的距离
- 十一、在浏览器URL位置输入html代码
- 十二、使用innerHTML保存页面内容
- 十三、字体模糊
- 十四、多重边框
- 十五、随机 Math.random
- 十六、修改console样式
- 十七、两个变量值互换
- 十八、禁止别人以iframe加载你的页面
- 十九、console.table
- 二十、CSS禁止鼠标事件
- 二十一、修改html标题
- 二十二、new的操作步骤
- 二十三、获取DOM的宽高及距离页面边框距离
- 二十四、vscode注释插件
- 二十五、递归函数
- 二十六、赋值运算符
- 二十七、Math方法
- 二十八、使用正则表达式
- 二十九、CSS画三角
- 三十、判断类型
- 三十一、特殊符号
- 三十二、title和Alt
- 三十三、图片不显示
- 三十四、计算属性传参
- 三十五、js监听同源其他窗口变化
- 三十六、用字符串进行js操作
- 三十七、防抖节流
- 三十八、js判断对象中的属性名是否存在
- 三十九、在html中显示文字换行
- 四十、配置环境变量
- 四十一、取消用户浏览器默认选中
- 四十二、强制刷新子组件
- 四十三、原生js打印页面
- 四十四、vue项目打补丁
- 四十五、使用for...of遍历set
- 四十六、web API
- 四十七、在vue中实现了在样式里使用js变量
- 四十八、深度克隆一个对象
- 四十九、XSS、CSRF、HTTPS
- 五十、==隐形转换
- 五十一、TCP三次握手、四次挥手
- 五十二、HTTP状态码
- 分片上传文件
- 总结
一、contains方法
使用场景：
自定义一个组件，监听每一次点击事件，如果点击到组件以外的区域，则组件隐藏——类似于dialog弹窗的效果
原理：每一次点击，都会有捕获和冒泡的阶段，捕获是从html元素向下到点击元素，冒泡阶段是从点击元素向上到html，在这过程中是否有需要的组件dom
使用语法：
//意思判断B中是否包含A
B.contains(A)
//this.$refs.floatCard组件，e.target点击事件详情
this.$refs.floatCard.contains(e.target)
二、获取时间戳
使用场景：
在做一个纯前端的上传功能，操作腾讯云的存储对象，规定存储的格式，用户ID/时间戳，一个不会重复的路径
JavaScript 获取当前时间戳：
第一种方法：(这种方法只精确到秒)
var timestamp = Date.parse(new Date());
第二种方法：
var timestamp = (new Date()).valueOf();
第三种方法：
var timestamp=new Date().getTime()；
将时间戳转换为日期格式
//第一种
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{
1,2}$/,' ');
}
alert(getLocalTime(1293072805));
//结果是2010年12月23日 10:53
//第二种
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().substr(0,17)
}
alert(getLocalTime(1293072805));
//第三种 格式为：2010-10-20 10:00:00
function getLocalTime(nS) {
return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
alert(getLocalTime(1177824835));
三、CSS计算属性
使用场景：
有一个自适应的组件，设置高度，并且当屏幕缩小到太小时还要一定的展示空间
使用语法：
height: calc(100vh - 500px);
min-height: 200px;
四、鼠标形状大全
使用场景：
当鼠标移入不同的显示鼠标形状，如手型，十字
使用语法：
style="cursor:*"
hand是手型
pointer是手型
crosshair是十字型
help是问号
text是移动到文本上的那种效果
wait是等待
default是默认效果
e-resize是向右的箭头
ne-resize是向右上的箭头
n-resize是向上的箭头
nw-resize是向左上的箭头
w-resize是向左的箭头
sw-resize是左下的箭头
s-resize是向下的箭头
se-resize是向右下的箭头
auto是由系统自动给出效果
五、Ajax请求发送的FormData是"[object object]"
是因为processData这个配置，processData的作用是：指定ajax是否将data中的数据进行转化，默认是true，即默认会将data中的数据转化成json字符串，false时，直接将data传输到后台。
去掉processData或者修改为true
六、浏览器的放大缩小事件
自定义组件的时候，绝对定位放大缩小，组件的位置不变看起来就是一个缺陷，在每次对浏览器操作，放大缩小的时候就可以重新去刷新，修改组件的定位
// 放大缩小刷新页面
var normalWidth = window.innerWidth
var normalHeight = window.innerHeight
window.onresize = () => {
if (normalWidth !== window.innerWidth || normalHeight !== normalHeight.innerHeight) {
this.downloadVisible = false
}
}
七、事件传参
@click="tm($event,123)"
// methods
tm:function(e,value){
console.log(e);
console.log(value);
}
八、强制重新渲染
v-for里面数据层次太多， 修改过数据变了，页面没有重新渲染，需手动强制刷新。
this.$forceUpdate()强制刷新
九、文字溢出
width: 90%; // 宽度设置
text-overflow: ellipsis; // 显示省略符号来代表被修剪的文本。
white-space: nowrap; // 段落文本不换行
overflow: hidden; // 内容超出隐藏
十、event事件中，鼠标到屏幕的距离
限制鼠标的操作
// 计算当前浏览器document.body宽度加body滚动条离左边的宽度 和
// 浏览器文本所用宽度（包括滚动条隐藏区域）比较
document.body.offsetWidth + document.getElementsByClassName('page-container')[0].scrollLeft > 1340 &&
document.body.offsetWidth - e.clientX < 60
clientX: 1453：clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。随滑动条移动 而变化.
clientY: 213：clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的横向坐标。随滑动条移动 而变化.
layerX: 1253：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
layerY: 102
movementX: 0
movementY: 0
offsetX: 1237：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值
offsetY: 31
pageX: 1453：鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
pageY: 213
PageY=clientY+scrollTop-clientTop
screenX: -467：screenX:鼠标在屏幕上的位置,从屏幕左上角开始
screenY: 100
x: 1453
y: 213
十一、在浏览器URL位置输入html代码
data:text/html,<h1>Hello, world!</h1>
原始编辑器
data:text/html, <html contenteditable>
十二、使用innerHTML保存页面内容
var text = document.getElementById('template').innerHTML
十三、字体模糊
color: transparent;
text-shadow: #111 0 0 5px;
十四、多重边框
box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
height: 200px;
margin: 50px auto;
width: 400px;
color: black;
十五、随机 Math.random
生成的是0到1的小数
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
十六、修改console样式
var _log = console.log;
console.log = function() {
_log.call(console, '%c' + [].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);');
};
十七、两个变量值互换
var a=1,b=2;a=[b,b=a][0];
最低0.47元/天 解锁文章
6276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
